Facebook Video Sharing
Facebook provides a simple but effective mechanism for sharing web pages with your friends:
http://www.facebook.com/share.php?u=http://www.site-to-share.com
Tons of sharing services use this functionality, amongst which the Sharing Plugin of the JW Player. This plugin is available through our AddOns library and built into our Bits on the Run platform.
While sharing of a regular web page might be enough for some users, other users might be more interested in actually sharing the videoplayer on that page. This is also possible, but two additional steps are required:
- You need to set certain meta tags in the <head> of the page you want to share.
- You need to contact Facebook to get your domain approved for video sharing.
Meta tags
The first step is setting the meta tags. At this developer wiki page, Facebook explains in detail which meta tags you need to set in order to share a video. Here is an example block:
<meta property="og:title" content="Bits on the Run introduction video"/> <meta property="og:description" content="Bits on the Run is a clear and flexible platform for transcoding, managing and streaming your video online."/> <meta property="og:image" content="http://example.com/thumbs/yYul4DRz-320.jpg" /> <meta property="og:site_name" content="http://www.mysite.com" /> <meta property="og:type" content="movie"/> <meta property="og:url" content="http://example.com/previews/MSO47ORl-tBhZ0fIU"/> <meta property="og:video" content="http://example.com/players/yYul4DRz-tBYU3ED4.swf" /> <meta property="og:video:height" content="245" /> <meta property="og:video:width" content="400" /> <meta property="og:video:type" content="application/x-shockwave-flash" />
All these tags should be placed between the <head> and </head> tags of your page's HTML (example ). Here's what they do:
- The title and description are straightforward: they provide some basic metadata on your video.
- The image provides a preview image of your video. When your friends click that image, the videoplayer will be loaded on their page.
- The *video* provides the link to your video player (not the actual video). In case your players are setup with clean embed codes (e.g. when you use Bits on the Run), this is a single URL. When your player also needs flashvars, you should amend them the the URL of the player as querystring variables, like this:
http://www.mysite/com/player.swf?file=http://www.mysite.comvideo.mp4&image=...
- The video:height and video:width define the dimensions of your video. The maximum width is 420 pixels and the maximum height is 280 pixels. Don't worry about setting other dimensions here than with the player on your own site; the JW Player will automatically resize itself.
- The video:type tells Facebook what media type the video player is. This should always be set to application/x-shockwave-flash.
Share page
Here's an image that shows two instances of the Facebook share page. In the first example, the metatags are not included on the page that is shared, in the second example they are. As you can see, the second example is a lot richer in content:
Getting approved
Next, you need to get your website approved for video embeds with Facebook. That can be done by filling out this form. Note that you should specify the domain where your JW Player and videos reside, not the domain where you embed your player at (should they differ).
If you host your videos through `Bits on the Run
Facebook will get back to you within a few days, at which point your video embeds should be working.
End result
Here's how a video player will look in the news feed of a person who shared it:
Clicking the thumbnail will replace the description with your actual videoplayer, so people can watch your video inline.