Embed your own video player on Facebook
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 use a custom video player on Facebook, styled exactly like you want it. It will show up, and play, directly within Facebook status updates whenever someone shares the web page containing that meta data. Pretty cool, huh?
iPhone and iPad support
This method allows for HTML5 fallback which makes the video work on iPhones, iPads and other non-Flash devices. Even inside the native Facebook iPhone app — My example is set up with a HTML5 fallback to show that functionality.
Step 1: Prepare your flash video player
There are two ways you can go here:
- Set up your video player to accept a flashvar with the URL to the video file.
- 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.
Step 2: Utilize Open Graph tags
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" /> <meta property="og: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.