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.

About Ahrengot

I rely on modern technology to design and build mobile-first, highly performant WordPress websites and JavaScript-based applications.
This entry was posted in Flash, Tips and tutorials and tagged , , , . Bookmark the permalink.

5 Responses to How to display your custom flash video player on Facebook

  1. Pingback: MY-TAG » How to display your custom flash video player on Facebook | Ahrengot

  2. djmakx says:

    Great article!

  3. arnaud says:

    hello thanks for your tutorial

    I use a cms and I don’t know php.. I d like to ask if you have any idea how to create a dynamic

    I have seen an example here

    <?php if (is_home())
    echo '’;
    else echo ”;

    Maybe this sort of code could be applied to the og:video meta and retrieve my video url for each single page?

  4. ahrengot says:

    The code needed to do this is dependent on the CMS you use, but it is possible.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s