How to display your custom flash video player on Facebook

Tutorial: Custom video player in Facebook streams

Facebook and the Open Graph Protocol allows you to define special meta data on your web pages that defines them in Facebook’s social graph. In this post i’ll show you how to set up the meta tags required for you to embed your custom video player, styled exactly like you want it, in Facebook streams. Pretty cool, huh?

This method will also allow you to have HTML5 fallback for iPhone, iPad etc. which will even work inside the Facebook iPhone app – My example is set up with HTML5 fallback that shows that functionality as well.

Step 1 – Request to have your domain white listed

Facebook don’t trust your domain’s flash(.swf) files by default, so you need to send a request through this form first. This process will take up to a week.

Step 2 – Prepare your flash video player

There are two ways you can go here: Either set up your video player to accept a flashvar with the URL to the video file, or hard code the URL into the source code of the flash player, so that it keeps track of it internally. Naturally, going with flashvars is much more dynamic, as you can use the same video player with different video’s if you have more than one on your website. In my example i’ve used the flashvar “url” to supply the video file URL. Learn how to use flashvars in this video tutorial by Lee Brimelow.

Step 3 – Set up the necessary meta tags in your web page

I’ve put up an example at that has the correct meta tags. If you post the URL to Facebook you’ll see the player embeds correctly. You can view the source and look out for the open graph tags. In my example they are as follows:

<!-- Open Graph tags -->
<meta property="og:title" content="Circular scrubbing video player" />
<meta property="og:description" content="A video player interface experiment, which features circular scrubbing and a very minimal design." />
<meta property="og:type" content="video" />
url" content=""/>
<meta property="og:image" content=""/>
<meta property="og:site_name" content="Ahrengot's Playground"/>
<meta property="fb:admins" content="100000936142315"/>

<!-- Video player specific OG tags -->
<meta property="og:video" content="" />
<meta property="og:video:width" content="374" />
<meta property="og:video:height" content="202" />
<meta property="og:video:type" content="application/x-shockwave-flash" />

The tags are quite self-explanatory, but if you need any help, refer to the documentation.

You’re done!

View on Envato

That’s it – If this was of any help to you, or you have any questions, I’d really appreciate your feedback in the comments. Oh, and if you like the video player in my example it’s available on Envato marketplaces: Video player with circular scrubbing.

Posted in Flash, Tips and tutorials | Tagged , , , | 5 Comments


KONKREET PERFORMER is Redefining music apps

“Konkreet Performer is a music control and performance instrument for the iPad. Its unique and intuitive multi-touch interface reconnects the musician’s
 actions directly with the music. Use PERFORMER to play your Synth, operate your DAW, or anything that receives OSC or MIDI. Re-explore your favorite music software tools with a whole new way to search, find and perform your sound.”

App store link:​app/​konkreet-performer/​id417418467?mt=8

The app is made by Konkreet Labs.

Posted in Technology | Tagged , , | Leave a comment

The Google Art Project

Google Art Project takes Street View into museums

As you’ll see in the video above, Google’s latest project is a cool new discovery tool for art lovers, which enable you to explore the worlds museums in an almost virtual reality kind-of-way.

Google captured the museums using their street view technology, so the navigation is exactly like you’re used to. Google Art Project also features some “Super high-resolution images” of the most famous paintings. These high-res photos will allow you to see the paintings in even more detail than you can with the naked eye.

Have a look at Google Art Project

Posted in Interactivity, Technology | Tagged , , , | Leave a comment

Free online version of ‘Dive Into HTML5’

This will look great on your tablet!

Posted in Tips and tutorials | Tagged , , | Leave a comment

How to read the RSS feed of any Facebook page

Getting the RSS feed for a Facebook page

Every Facebook page has an RSS feed. You can subscribe to that feed with your RSS reader. You can also embed it or build applications that utilize it and everything else you can do with an RSS feed . The only thing is, finding the URL of the feed can be difficult, so i decided to help a little and write this guide.

Note: If you’re not interested in the URL of the feed but just want it imported in Google Reader, FeedBurner or Firefox simply skip step 1-3.

Step 1 – Getting your page id

Everything on Facebook from users to photos to events has a numeric id. This id is used internally by Facebook to identify different stuff in its enormous database when users request it. So when you request the RSS feed from a page, you’ll need to send the id of the page along with your request. That’s why the first thing you need to do is to find the id of your page. It’s pretty simple.

Open any Facebook page and click of the profile image. In the address bar you’ll see ‘; where ‘40796308305’ will be the page id. Copy those numbers as we’ll need them in just a second.

Step 2 – Choosing a format

You are able to choose between an atom feed and RSS 2.0. If you don’t know the difference just go with atom. To read more about Atom vs RSS 2.0 click here.

Step 3 – The complete URL of your Facebook page feed

I’ve used the id from the Coca-Cola page to demonstrate the URL’s. Just replace the numeric id at the end with the id you found in step 1.

Here’s the URL to the Coca-Cola Facebook page as an atom feed:

And here’s the URL to the same page using RSS 2.0:

Adding your Facebook page feed to Google Reader

Just paste the URL of the page into Google Reader. For instance

Adding your Facebook page feed to FeedBurner

Same as google reader.

Adding your Facebook page feed in Firefox

Go to the Facebook page and click the “Add Subscription” button in the address bar.

You’re done!

… Anyway, that’s how to do it. I hope this solves some headaches :)

Update: You can get your personal feed as RSS as well!

If you want your own(or any of your friends) wall feed as RSS you can do that via the FB RSS Facebook application. Thanks to Peter for pointing this one out in the comments.

Posted in social media, Tips and tutorials | Tagged , , , | 31 Comments

The one about ROME

Adobe Project ROME

Welcome to Project ROME – a new software offering by Adobe. The free software preview, available for a limited time, lets virtually anyone create and deliver stand-out print designs, digital documents, presentations and websites using its simple all-in-one content creation and publishing environment. We hope you’ll give Project ROME a test drive, share your thoughts with us, and ultimately, help shape new features and functionality.

This new Air app from Adobe is pretty impressive in the sense that it must have taken a lot of time to build and plan, but honestly, it feels like there are already better tools out there for doing that kind of stuff. I mean, if you want to make presentations, Keynote works a lot faster, smoother and … well … better, and if you want to do cool, customized interactive presentations there’s just no way around it, you gotta learn some HTML/JavaScript/Flash etc.

You can give ROME a try on

Posted in Flash, Interactivity | Tagged , , | Leave a comment

The one about the Semantic Web

Organizing the vast amount of online junk

From Wikipedia:

Semantic Web is a term coined by World Wide Web Consortium (W3C) director Sir Tim Berners-Lee[1]. It describes methods and technologies to allow machines to understand the meaning – or “semantics” – of information on the World Wide Web.

So, this is supposed to be the next big thing, right? That’s not really news. A lot of websites have organized their content with tags, vocabularies and categories for a long time, but what’s interesting is that we’re really starting to use all this data now, and in some really creative ways as well.

One example is the way some new mobile devices are organizing your contacts and photos. Tagged content like Facebook status updates, tweets, Flickr galleries and so forth is automatically interpreted/identified as relevant and added and to your contacts. All of this is naturally kept up to date and in sync automatically.

The video below is a short documentary explaining all of this in plain english.

Part 1:

Part 2:

Posted in Uncategorized | 3 Comments

Show-off: Gesture driven navigation

Drawing is interacting

Inspired by the incredible cool site hello monday made for Red Issue, i decided to try and  replicate that kind of effect and implement the technology in a Gaia Flash Framework driven website.

Gesture driven navigation by AhrengotSee the result here

I really wanted to test it out on my iPhone, as i imagine this could only be awesome with a touch screen, but unfortunately that requires a $99 Apple Developer certificate. Too bad!

Posted in Design, Flash, Interactivity, Showoff | Tagged , , , , | Leave a comment

The one about HTML5 vs. Flash

Jump back in time with HTML5

Posted in Flash, Humor | Tagged , , , | Leave a comment

Freebie: 3D image rotator

Minimalistic 3D image browser (XML based)

* ReadMe.txt file included and the .xml file is very well documented

Minimalistic XML driven image browser using Papervision3D as the 3D engine rather than that of Flash Player 10(Which can be buggy, isn’t true 3D, reduces quality etc.).

This means that this file also works with Flash CS3 and Flash player 9

No buttons and no preloaders. I cut everything but the bare minimals away to leave you with a minimalistic, clean and very flexible little swf file. It’s built on full object oriented AS3 following best practises for easy implementation in your own flash projects, but is of course just as easy to use as a stand-alone file.

Through the XML you can change the following settings:
# Width and height of the images(yes, you can actually do resizing without having to recomplile the swf.
# Duration of the flip animation
# Amount to sink back in z-space while flipping
# wobble along the x-axis while flipping

The powerful Tweensy engine is used for tweening.

I’m happy to answer any questions you may have :)

* Tweensy and Papervision3D are both free and licensed under the MIT license. All necessary files are, of course, included.

Check it out here

Download it here

Posted in Flash | Tagged , , , , , | Leave a comment