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="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 Ive 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, lets focus on the relevant pieces for letting Facebook know this is a video page and wed 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 well 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 youd like to show on the wall post.
og:video:height- The height in pixels of the video player youd 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="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 youd 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>