Facebook Now Requires HTML5 and Fallback in Open Graph

by Zohar Babin

Remember the post about making Facebook understand and present the videos on your page?

Thanks to our dear reader Jon, we noticed Facebook has recently updated their Open Graph tags requirements to include HTML5 and non-Flash-non-HTML5 fallback video file links, otherwise, Facebook will not show your videos when users share them on their wall.

 

Originally Facebook accepted Flash Only

Previously, this is the minimal meta tags you’d have to use to have Facebook read the video in your page and present it on the wall when someone shares your page link.

 

Enter HTML5 and Direct Link Fallback

While FB supported html5 and video link for a while now, it seems that recently Facebook made it mandatory to support non-Flash environments. In addition to Flash, for FB to present your video now you’d have to include the following tags as well:

 

To be fully compatible with Facebook’s Open Graph

Add a few more meta tags and you’re fully compatible with all the Open Graph Specifications:

Find out more about these tags and their meaning in the Open Graph Specifications.

Try testing our about page in Facebook’s Open Graph Debug Tool.

 

What does our about page looks like now?

The following is a good reference example fully compatible with the Open Graph specs:

 

Using the Kaltura Platform

In addition to Facebook’s changes, and with Microsoft recently joining the list of companies to strongly advocate HTML5, announcing the new plug-in free Win8 & IE 10 (i.e. dropping official support for Flash), having an HTML5 based and standardized video streaming solution that delivers HTML5 and direct video streaming is increasingly becoming more important.

The above code took you through making Facebook show videos on wall posts. Below, I briefly discuss how to get the thumbnail and mp4 urls I used for the code.

- Using the Kaltura Management Console (KMC), upload the video:

- The uploaded video is then converted to mp4 and several other flavors (to support various other use cases):

- The URL to the mp4 file is then the following following:

 (make sure there are no special access control settings on it, otherwise Facebook will not be able to read the file).

Where {the id of the iPad flavor} is taken from the flavors list:

You can use any of the mp4 flavors, I used iPad since this will be the best format for most devices. If and when Facebook will add support for more flavors to be compatible with various device sizes and network speeds, we will be able to use the other flavors on the list, like we do using the Html5 Video Library.

- Finally, to get the URL for the thumbnail, use the Kaltura thumbnail API:


Big shutout to Jon for the heads up!
Let us know in the comments how you’re using this functionality or if you have any questions.

5 Responses to “Facebook Now Requires HTML5 and Fallback in Open Graph”

  1. It would really help me, and I’m sure many other developers integrating with Kaltura, if instead of having to know the the falvor id for each specific video, and use the awkward URL:
    http://kaltura.com/p/{Kaltura partner id}/sp/{Kaltura partner id}00/serveFlavor/flavorId/{the id of the iPad flavor}/name/{the id of the iPad flavor}.mp4
    I could use something like:
    http://www.kaltura.com/kwidget/wid/{Kaltura partner id}/uiconf_id/3406441/entry_id/{entry id}/flavor/ipad

  2. Just a friendly note to say that the video will not play in-line on FB if you are using the ‘Secure Browsing’ feature (i.e., https://facebook.com) and your playback page is served over a non-secured connection. In this case the blue play icon won’t appear and the thumbnail will be linked directly to one of the ‘og:video’ media locations.

    I haven’t tried enabling https (+rtmps?) on the playback page– it might work for both use cases.

  3. Hey there,

    One really curious question is bugging my lately. If Facebook wall embed requires just a movie param within its meta tag, that means we are loosing all the JS functionality around Kaltura player. I am specifically targeting the custom tracking functionality I have done myself. Is there any way around passing play count value on facebook wall to my DB without using JS?

    TA

  4. I have developed a general KDP share plugin (that uses AddThis sharing abilities) and also supports Facebook direct video embedding for the KDP. You can see it in action her:

    http://projects.kaltura.com/eitan/landing/lp.php?entryId=1_elwxyx1c

    For more information contact our support or sales teams

    Zohar, thanks for this post – it helped a lot
    :)

  5. Trackbacks

Leave a Reply