Publish a video for playback on Facebook

In this tutorial, you learn how to embed a Nimbb video directly into Facebook’s News Feed. Sharing your video to Facebook can help you create a viral marketing. To publish a Nimbb video, we must simply add meta tags that Facebook recognizes. The HTML code below shows what you need to add to your page to share a video recorded using Nimbb. Users will also be able to play the video within Facebook.

This example requires you to specify your developer key (see tutorial).
A Silver or higher subscription is required.
For sharing on secure SSL Facebook pages, a Platinum or higher subscription is required.

Example

User shares a Nimbb video:


A thumbnail image of the video is displayed in the News Feed:


Users can watch the video within Facebook:


HTML code

<html xmlns:fb="http://ogp.me/ns/fb#">
<head>

  <meta property="og:title" content="Title" />
  <meta property="og:description" content="This is the description." />
  <meta property="og:site_name" content="Site name" />
  <meta property="og:type" content="movie" />
  <meta property="og:image" content="http://api.nimbb.com/Live/Thumbnail.aspx?guid=XXXXXXXXXX&key=YYYYYYYYYY" />
  <meta property="og:url" content="PAGE_URL" />
  <meta property="og:video" 
   content="http://player.nimbb.com/nimbb.swf?guid=XXXXXXXXXX&key=YYYYYYYYYY&autoplay=1" />
  <meta property="og:video:secure_url" 
   content="https://player.nimbb.com/nimbb.swf?guid=XXXXXXXXXX&key=YYYYYYYYYY&autoplay=1" />
  <meta property="og:video:type" content="application/x-shockwave-flash" />
  <meta property="og:video:width" content="320" />
  <meta property="og:video:height" content="240" />

</head>
<body>
  
  <!-- Code to display the Sharing button. -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=APPID";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  <fb:share-button type="box_count"></fb:share-button>
  
</body>
</html>

We use Open Graph tags so that Facebook can understand our content. Notice the use of the xmlns:fb parameter in the <html> tag. You must add all meta tags in the <head> section of your page. In the code, you will find highlighted all the parameters you must modify.

The og:title and og:description are texts that will be displayed next to the video in Facebook. Modify these so that readers are attracted to play your video. The og:site_name is the name of your site.

Notice the og:image tag, that is used by Facebook to get a thumbnail image of your video. Make sure to set the value of your video with the guid parameter. Also specify your public developer key with the key parameter.

Replace the PAGE_URL with the full URL to your page where you are adding those meta tags. Facebook will only see those tags once on your production site, so you might not see any result while you are in development (unless you have a public URL available for development).

As we are sharing a video and we want to be able to play it within the News Feed, the og:video tags are important. Replace the guid and key parameters with the same values as for the og:image tag. Notice the autoplay parameter which will automatically start playing the video once the user click the thumbnail in Facebook.

In the body section of the code, we included some code so that you can test sharing your page. Simply cut and paste this code somewhere in your page. Take note that you must change the APPID to your unique Facebook application ID. To get or create your application ID, visit the Facebook Developers site. If instead you prefer to manually share your page, simply use this URL: https://www.facebook.com/sharer/sharer.php?u=PAGE_URL (replace the PAGE_URL with your URL).

Once your page is online, you will want to make sure all your tags are correctly defined. For that, Facebook created a debugger. Simply paste the URL of your page in the debugger to try and find any problem.

Finally, you must add "static.ak.facebook.com" into your Developer settings so that the Nimbb Player can work correctly under Facebook. Since Facebook uses SSL as default security, you must also add the URL "s-static.ak.facebook.com" (a Platinum or higher subscription is required). Also, if you want to remove the Nimbb logo, you can add the parameter "nologo=1" in the URL of tags og:video and og:video:secure_url.

View more tutorials.

SIGN UP NOW 7-day free trial

Check out our Developer guide to get started with Nimbb.