Posts tagged ‘Open Graph’

September 21st, 2011

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.

<meta property="og:video" content="http://example.com/videoplayer.swf" />
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="426" />
<meta property="og:video:type" content="application/x-shockwave-flash" />

 

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:

<meta property="og:video" content="http://example.com/html5.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://example.com/fallback.vid" />
<meta property="og:video:type" content="text/html" />

 

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:

<meta property="og:type" content="article">
<meta property="og:url" content="http://example.com/videopage">
<meta property="fb:app_id" content="000000000">
<meta property="og:title" content="Video Page Title">
<meta property="og:image" content="http://example.com/videothumbnial.jpg"/>
<meta property="og:description" content="Video description"/>
<meta property="og:site_name" content="Your website name">

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:

<meta property="og:type" content="article">
<meta property="og:url" content="http://blog.kaltura.org/about">
<meta property="fb:app_id" content="217926898242066">
<meta property="og:video" content="http://www.kaltura.com/kwidget/wid/_309/uiconf_id/3406441/entry_id/1_5ex2uuu8" />
<meta property="og:video:width" content="640" />
<meta property="og:video:height" content="426" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="http://cdnbakmi.kaltura.com/p/309/sp/30900/serveFlavor/flavorId/1_230vtgd1/name/1_230vtgd1.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://cdnbakmi.kaltura.com/p/309/sp/30900/serveFlavor/flavorId/1_230vtgd1/name/1_230vtgd1.mp4" />
<meta property="og:video:type" content="text/html" />
<meta property="og:title" content="Kaltura - Open Source Video">
<meta property="og:image" content="http://cdn.kaltura.com/p/309/thumbnail/entry_id/1_5ex2uuu8/width/300"/>
<meta property="og:description"
  content="Kaltura - the first open source video platform for online video management, creation, interaction & collaboration. Kaltura enables sites to integrate advanced interactive rich-media functionalities"/>
<meta property="og:site_name" content="Kaltura.org Developer Blog">

 

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).

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

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:

http://kaltura.com/p/{Kaltura partner id}/thumbnail/entry_id/{the video entry id}/width/300


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.

May 15th, 2011

Make Facebook understand your video pages

by Zohar Babin

Facebook has updated Open Graph since this post was published. Read this post for a more recent tutorial and code.

When you share YouTube pages on Facebook walls, Facebook does a nice thing – instead of just showing a link, it embeds the YouTube video player right there in your wall post. Nice eh?

Follow these simple steps and your pages will be parsed correctly by Facebook!

The Facebook Open Graph protocol

The Open Graph Protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things — things like movies, sports teams, celebrities, and restaurants. Including Open Graph tags on your Web page, makes your page equivalent to a Facebook Page.

What it really means, is that Facebook features are also available outside of Facebook, one of them being better understanding of your webpage content.

Simply add 2 xml name spaces and few meta-tags

The Open Graph requires the following:

  1. Adding 2 new xmlns to the <html> tag (the first tag on the page):
    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:og="http://ogp.me/ns#"
    xmlns:fb="http://www.facebook.com/2008/fbml">

    Note – even though Facebook specify the namespaces are needed, in tests I’ve made (and also reviewing implementation on YouTube), step 1 of defining the namespaces is not really required for the use case described in this post. Feel free to include or to pass on this step.

  2. Meta tags that contain information about your content and site. in the following form:
    <meta property=”og:PROPERTY” content=”VALUE”/>
    Or
    <meta property=”fb:PROPERTY” content=”VALUE”/>
    PROPERTY – the name of the property (video, description, type, etc.).
    CONTENT – the value to set for this property.

The Meta tags

Facebook provided a set of parameters you can define on your page, you can find all on the Open Graph page. For now, let’s focus on the relevant pieces for letting Facebook know this is a video page and we’d like it to show on the wall when the link is shared.

  1. og:type – set this to article
  2. og:video –  The url to the SWF file that is the video player we’ll use. in Kaltura this will be the url to the KDP.
  3. og:image – The url to the video thumbnail. If this is omitted, the wall post will not show the video inline!
  4. og:video:width – The width in pixels of the video player you’d like to show on the wall post.
  5. og:video:height- The height in pixels of the video player you’d like to show on the wall post.
  6. og:video:type - Facebook currently supports embedding SWF format only. So for now, the type value is always: application/x-shockwave-flash
  7. og:description - A one to two sentence description of your video.

And although not required, you might also want to add the following tages:

  1. og:site_name – Human readable name for your site.
  2. og:title – Title of your video (if omitted, Facebook will use the page title).
  3. og:url – Url of the page hosting the video.

Putting the code together

Now that you have understanding of why it all should work and how, this is below a live example of how the code should look like -

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
	<head>
		<title>Kaltura - Open Source Video</title>
		<meta property="og:type" content="article">
		<meta property="og:title" content="Kaltura - Open Source Video">
		<meta property="og:video" content="http://www.kaltura.com/kwidget/wid/_198332/uiconf_id/1347482/entry_id/0_w7tfcu3a" />
        <meta property="og:image" content="http://cdn.kaltura.com/p/198332/thumbnail/entry_id/0_w7tfcu3a/widget_id/_325801/width/300"/>
		<meta property="og:video:width" content="640" />
		<meta property="og:video:height" content="426" />
        <meta property="og:video:type" content="application/x-shockwave-flash" />
		<meta property="og:description"
          content="Kaltura - the first open source video platform for online video management, creation, interaction & collaboration. Kaltura enables sites to integrate advanced interactive rich-media functionalities"/>
		<meta property="og:site_name" content="Kaltura.org Developer Blog">
	</head>
	<body>
		Your page contents here...
	</body>
</html>

Try it, copy this link: http://blog.kaltura.org/about and paste it on your Facebook wall! (Thanks for sharing! :) )

Few things to note

  • Facebook will cache your links! – if you try various options and you’d like to see how Facebook parse your code, you should use a different link for every new code.
  • You get the url to your Kaltura video from the embed code of your video. You find the embed code in the KMC using “Preview & Embed”, you should copy the value of the “movie” param. like here:
    <param name=”movie” value=”…” />
  • To create the url for your thumbnail, use the Kaltura Thumbnail API Guide, or you can also copy it from the embed code in the media:thumbnail metadata. like here:
    <a rel=”media:thumbnail” href=”…”></a>

Next post…

Stay tuned, next time we’ll talk about integrating the Kaltura SEO Best-Practice Video pages with Facebook features…

Let us know if you find it useful in the comments below.