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:
<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.
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.
And although not required, you might also want to add the following tages:
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
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.