Make Facebook understand your video pages
Read the latest updates on the Distribution Connector for Facebook here
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:
- Adding 2 new xmlns to the <html> tag (the first tag on the page):
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://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.
- 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.
- og:type – set this to article
- 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.
- og:image – The url to the video thumbnail. If this is omitted, the wall post will not show the video inline!
- og:video:width – The width in pixels of the video player you’d like to show on the wall post.
- og:video:height- The height in pixels of the video player you’d like to show on the wall post.
- og:video:type – Facebook currently supports embedding SWF format only. So for now, the type value is always: application/x-shockwave-flash
- og:description – A one to two sentence description of your video.
And although not required, you might also want to add the following tages:
- og:site_name – Human readable name for your site.
- og:title – Title of your video (if omitted, Facebook will use the page title).
- 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="https://www.w3.org/1999/xhtml"
xmlns:og="https://ogp.me/ns#"
xmlns:fb="https://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="https://www.kaltura.com/kwidget/wid/_198332/uiconf_id/1347482/entry_id/0_w7tfcu3a" />
<meta property="og:image" content="https://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: https://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.
