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

    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 –

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.

14 Responses to “Make Facebook understand your video pages”

  1. This works for when you have a page that has a single video, loaded at the time the page is rendered. A gallery of thumbnails with a popup player for example… well, let’s just say this is not that use-case! The Facebook Linter tool is SO valuable when figuring out how to tag your pages for sharing and Like-ing. (google that location if you need it).

    Oh how I wish this blog post had existed in March. My April would have been much happier!
    -David

    PS this will work no matter how you link to this page. Even if you use AddThis or any other link tool, what Facebook posts on the wall is based on the tags on your page.

    • Hi David,

      Actually, Facebook doesn’t care about the contents of the page.. so even if you have a gallery with lightbox videos, this can work perfectly. Either always link to an intro or selected video from the gallery or have the server side script echo the relevant videos per the url request (e.g. http://myvideogallery.com/videoId/1_asfs768j the server will print that video id to the facebook tags).

  2. This is a fantastic blog. I’ve been doing Kaltura work for a few months now and I’ve just stumbled upon it.

    This facebook integration doesn’t seem to work any more. I’ve tried implementing it on my website and I get no play button when the link is shared. There’s no play button on your example link either. I had a look at the source of a youtube video and the only difference I noticed was they have a fb:app_id ()

    Is it possible that facebook has now blocked this functionality?

  3. Hi Jon –

    Welcome and Thanks for the kind words and feedback!
    We’d love to hear more about how you use Kaltura and what you’re doing with it.

    Thanks for the heads up about this, it seems that Facebook changed their requirements tag wise to support mobile and HTML5.
    I’ve fixed the example on this blog, so you can copy the following link and try it out:
    http://blog.kaltura.org/about?r=1 (the video will show after you share, not while you edit).

    See this for more details – http://blog.kaltura.org/facebook-now-require-html5-and-fallback-in-open-graph

    Cheers

  4. Hi Zohar,

    I got this working but forgot report back here. It does in fact work but you are unable to see the play button on items that you’ve posted yourself. I’ve had a look at your new example and i’ll try and implement it myself.

    Cheers

  5. I do accept as true with all of the ideas you’ve presented on your post. They are really convincing and can definitely work. Still, the posts are very short for beginners. Could you please lengthen them a bit from subsequent time? Thank you for the post.

  6. Tremendously challenging appreciate it, I reckon your current followers will probably want significantly more information of this nature continue the great work.

  7. Like you I found that defining a namespace doesn’t seem necessaryt for this to work.

    One thing I also found is that the play button and embedded video will not appear if you have Facebook set to force an SSL connection but your Kaltura server uses a non-SSL connection. I guess this is to eliminate mixed content warnings.

    So if you are wondering why this wont work for you try setting Facebook to not force an SSL connection and try again.

    Also, as David suggests above, the Facebook Linter is useful for debugging stuff like this, it will also clear any cached data Facebook might have stored for your pages too…

    http://developers.facebook.com/tools/debug

  8. Tremendous post about FaceBook. SSL is becoming so standard today that I think it will have world wide adoption within a few short years.

    Custom IDX solutions

  9. Awesome! Its in fact remarkable paragraph, I have got much clear idea regarding from this paragraph.

  10. Greate pieces. Keep writing such kind of info on your
    site. Im really impressed by your site.
    Hey there, You’ve performed an incredible job. I will definitely digg it and in my opinion recommend to my friends. I’m confident they will be benefited from
    this site.

  11. Trackbacks

Leave a Reply