Over the past few months, you may have noticed that an increasing number of items in your Facebook News Feed had a play icon in the bottom left hand corner, like so:
This is because Facebook recently opened the News Feed to third parties, allowing individuals to watch videos from all over the Internet without ever leaving Facebook. While getting this to work requires making some minor modifications to your website, publishers have been quick to implement the changes because of the number of video views Facebook can help drive (especially when a video goes viral).
In this blog post, we'll describe how publishers can use the JW Player with the Facebook News Feed and enable viewers to have the same experience regardless of where they're watching it.
Getting all of this to work is pretty simple, but it can be difficult to manage if you've got a large library of content. Additionally, Facebook does not store a copy of the content or player, so they will be loaded from your server every time they are watched on Facebook. If you're worried about management or your ability to handle the load when your video goes viral, it's worth taking a look at services like LongTail.tv and Bits on the Run, both of which support this type of Facebook integration natively.
Whenever someone publishes a post with a link to their News Feed, Facebook scans that page for metadata about that page. By including some specific metadata in the <head> of your page, you can instruct Facebook to embed your JW Player with your content in the News Feed. However, this also means that you'll need a unique web page with this metadata for each piece of content, which can become quite difficult to manage if you're not using a CMS like Wordpress or Drupal.
When scanning a page, Facebook examines the <meta> tags. Specifically, it looks at Open Graph tags - those with with an og prefix to the property attribute - and uses the data contained in the content attribute.
<html> <head> <meta property="og:type" content="movie" /> <meta property="og:video:height" content="260" /> <meta property="og:video:width" content="420" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> <meta property="og:title" content="Big Buck Bunny" /> <meta property="og:description" content="Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation." /> <meta property="og:image" content="http://www.example.com/bunny.png" /> <meta property="og:video" content="http://www.example.com/jwplayer/player.swf?file=http%3A%2F%2Fwww.example.com%2Fbunny.flv&autostart=true" /> </head> <body> … </body> </html>
So what do each of these tags mean?
Coming up with a usable og:video tag is a bit of a challenge. Since many of our plugins require similar configuration, we've got some documentation that should come in handy. However, you can also follow these steps to build the string:
As always, you'll need to make sure that you're using absolute paths to reference your content and skins. Also, you'll need to make sure that you have the proper cross-domain security restrictions in place.
Thanks to all of your hard work, posting into Facebook is a snap! Simply drop your into the share box, like so:
You'll notice that there's no play button in the preview image. Once you hit the share button, the play button will be added and your content will be posted for the whole world to view and enjoy within their News Feed!
Recently, Facebook has received some bad press because the site's login is not encrypted, making it easy for someone using the same WiFi as you to take over your Facebook account. To get around this, Facebook began offering the option to use a secure version of the site (HTTPS). When using this version of the site, Facebook does not always allow you to view content within the News Feed and may link you off to the original source of the content to view it. This is because most sites do not serve up their content via HTTPS, and loading standard HTTP content in an HTTPS site will result in an aggravating mixed content warning in all browsers.