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 http://ahrengot.com/playground/circular-scrubbing 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="http://ahrengot.com/playground/circular-scrubbing"/> <meta property="og:image" content="http://ahrengot.com/playground/circular-scrubbing/thumb.jpg"/> <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="http://ahrengot.com/playground/circular-scrubbing/video-player.swf?url=http://ahrengot.com/playground/circular-scrubbing/assets/video/example.mp4" /> <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.
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.