How to enable Facebook embedding

This how-to will show you how to embed a video on facebook. For any remaining questions regarding this subject, please send an e-mail to support@bluebillywig.com.

To allow your videos to be shown on Facebook directly in your own (branded) player, you will have to implement certain “og:” (Open Graph) metadata-tags on your website's video pages. This how-to will explain how to implement this Facebook video solution on your website. As a side effect this will also improve your Google video SEO, as they will index these OG tags and show the results found on your website in their video search section.

If you do not wish to link directly to your website or implement these tags on your video pages, the Blue Billywig VMS automatically generates a video page already containing these tags. An example can be found here:

http://bb.bbvms.com/view/QuickTour2_526/1089251.html?r=false

When this link is shared on Facebook, the article will pick up your player, title and description automatically, which looks like the example below:

Example screen-shot of playing the video:

As you can see the URL still says bb.bbvms.com If you would implement this on your own website, your own URL would show up here, increasing traffic to your website. How to do this will be explained in the next section.

Another useful feature is the redirect option. By appending ?r=true to the url, the request will be redirected to the url set in the deeplink field of the clip in stead of the default view page. By default, this redirect is set to false.

In addition to this how-to document, Facebook offers documentation on which tags should be implemented on your website to make player embedding work. Go to http://developers.facebook.com/docs/opengraph/ and look for the chapter Attaching Audio and Video Data. For more information about the OG protocol, please refer to http://ogp.me/.

To get started, let's have a look at an example of the OG tags on the automatically generated page:

  1. <!-- Open Graph tags -->
  2. <meta property="og:title" content="QuickTour - Beheren" />
  3. <meta property="og:description" content="Hoofdstuk 1 van de VMS Quick Tour Met het Blue Billywig V..."/>
  4. <meta property="og:type" content="video" />
  5. <meta property="og:image" content="http://bb.bbvms.com/mediaclip/1089251/pthumbnail/130/130.jpg"/>
  6. <meta property="og:site_name" content="Your website’s name"/>
  7.  
  8. <!-- Video player specific OG tags -->
  9. <meta property="og:video" content="http://bb.bbvms.com/p/QuickTour2_526/player.swf?defaultMediaAssetPath=https://d2rvackbgybhru.cloudfront.net&server=http://bb.bbvms.com&clipXmlUrl=http://bb.bbvms.com/mediaclip/1089251.xml" />
  10. <meta property="og:video:width" content="396" />
  11. <meta property="og:video:height" content="223" />
  12. <meta property="og:video:type" content="application/x-shockwave-flash" />

The example above can be built by setting a few variables that will be used to fill the template:

  • The serverUrl (in our example http://bb.bbvms.com ) of your VMS publication.
  • The tag from serverUrl/mainconfig.xml as a base URL for all your files.
  • The mediaclip details from serverUrl/mediaclip/clip_id.xml to fill the other fields.
  • A playout that you want to use on Facebook. You can create this playout in the VMS and hardcode it into your template. The playoutname is added after the http://servername/p/ in the url.

You can use these variables to fill the tags like this:

  1. <meta property="og:title" content="<media-clip@title>" />
  2. <meta property="og:description" content="<media-clip><description/></media-clip>"/>
  3. <meta property="og:video" content="http://bb.bbvms.com/p/{playoutName}/player.swf?defaultMediaAssetPath={defaultMediaAssetPath}&server={serverUrl}&clipXmlUrl={serverUrl}/mediaclip/{clip_id}.xml" />

The other tags can be filled like the example above. A check for audio can be build in using the <media-clip@mediatype> attribute.

If you have any questions or suggestions on how to improve this how-to document you are more then welcome to send an email to support@bluebillywig.com.