Loading Search...
Facebook Sharing Guide

Audience and Overview

This guide is intended for all publishers that wish to faciliate the embedding of an LVP player on Facebook.

Table of Contents

1.0 Sharing the LVP Player
2.0 Embedding an LVP Player on a Facebook Fanpage

1.0 Sharing the LVP Player

The Limelight Video Platform provides a number of ways to 'share' a video from within the player. One of these ways permits the share of videos on the popular social networking site Facebook. By default, the LVP player will automatically post the video title and page link when a viewer choses to share. However, the player itself will not appear in Facebook unless the web page where the player is embedded contains special Facebook tags. This guide provides instructions on how to automatically include Facebook tags on your page.

1.1 Facebook Open Graph Tags

When a viewer selects Facebook from within an LVP player, Limelight automatically passes the page link of the video (along with a deep-link) and the video title. In an effort to include more information about the video, Facebook immediately hits the link and scans the page for specific meta tags containing relevant video information. This information takes the form of Facebook Open Graph Protocol <meta> tags. If Facebook finds any of these tags on the page it will include them as part of the post. The following diagram illustrates this data flow.


To allow Facebook to pull additional information about your video you need to include the following Open Graph tags within the HTML header of your page. For more information on the use of these tags, see Facebook's developer documentation: 

<html> 
<head> 
 
<meta property="og:title" content="Video Title"/> 
<meta property="og:video:type" content="application/x-shockwave-flash"/> 
<meta property="og:video:height" content="225"/> 
<meta property="og:video:width" content="400"/> 
<meta property="og:video"  content="http://assets.delvenetworks.com/player/loader.swf?playerForm=Player ID&mediaId=Media ID"/ > 
<meta property="og:description" content="Video Description"/> 
<meta property="og:image" content="Thumbnail Image URL"/> 
 
</head>

The following table summarizes the defintion and use of each tag:
Tag Description and Use
og:title The title of the shared video.
og:video:type Tells Facebook that the shared player is flash.
og:video:height The height of the shared player.
og:video:width The width of the shared player (The current Facebook max is 460).
og:video A link that tells Facebook where to find the LVP player and media. The player ID and media ID are included as query strings.
og:description The description of the shared video.
og:image A link that tells Facebook where to find the video thumbnail image.

1.2 Generating Open Graph Tags

The Facebook tags must be specific to the shared video so, as you may of guessed, one outstanding question remains: "How do I know which video was shared?" The answer to this question highlights the importance of dynamically generating the tags when Facebook attempts to pull information about a recently shared video. In a nut shell, here is how this could be done:

The link passed to facebook is a 'deep-link' which contains the shared video's Media ID as a query string. Therefore, when Facebook hits your page there will always be a Media ID in the URL. Use this ID to query the LVP Content API and build your Facebook page tags.

1.2.1 Code Convenience

Yes, we are here to make your life easier and therefore we provide code to help you generate the Facebook tags. This server-side code will be executed whenever your page is loaded, outputting Facebook specific tags in the HTML header as appropriate:

PHP LvpFacebookApiUtil.php

2.0 Embedding an LVP Player on a Facebook Fanpage

The LVP player embed code and Player API can be used to create dynamic video experiences on Facebook fan pages. Facebook offers a number of applications that permit the use of HTML, CSS, and javascript, allowing for the inclusion of LVP functionality. Virtually any experience that can be created on a regular web page can be replicated in Facebook. In the steps below we show you how to create a simple fan page tab that includes an LVP player. Although there are many applications that permit the addition of HTML on a fan page, we will be using the Static HTML app for this example.
  1. Login to Facebook and add Static HTML:iframe tabs to your fanpage. This app will create a page tab that can be edited, permitting the inclusion of web code (HTML, CSS, and/or javascript).
  2. Click the 'Welcome' tab that should now be visible on your fan page.
  3. Copy an LVP player embed code from your account and paste it into the editor. Click to save. Viewers of your page will now be presented with an LVP player.
  4. If you want to change the tab name to something more appropriate, go to your page and click 'Edit Page' then click 'Apps' on the sidebar. On the Static HTML application click 'Edit Settings' and edit the name of your tab.
The resulting page for this example can be viewed here: LVP Facebook Page