source: plugins/sharing/v5/doc/facebook.html @ 1749

Revision 1749, 5.0 KB checked in by jeroen, 3 years ago (diff)

converted sharing plugin docs to html+examples, so they are a one shot copy into Drupal

Line 
1<p>Facebook provides a simple but effective mechanism for sharing web pages with your friends:</p>
2
3<pre>
4http://www.facebook.com/share.php?u=http://www.site-to-share.com
5</pre>
6
7<p>Tons of sharing services use this functionality, amongst which the Sharing Plugin of the JW Player. This plugin is available through our <a href="http://www.longtailvideo.com/addons/plugins/110/Sharing">AddOns library</a> and built into our <a href="http://www.longtailvideo.com/bits-on-the-run/">Bits on the Run platform</a>.</p>
8
9<p>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:</p>
10
11<ul>
12<li>You need to set certain meta tags in the <em>&lt;head&gt;</em> of the page you want to share.</li>
13<li>You need to contact Facebook to get your domain approved for video sharing.</li>
14</ul>
15
16
17<h2>Meta tags</h2>
18
19<p>The first step is setting the meta tags. At <a href="https://developers.facebook.com/docs/opengraph/">this developer wiki page</a>, Facebook explains in detail which meta tags you need to set in order to share a video. Here is an example block:</p>
20
21<pre>
22&lt;meta property="og:title" content="Bits on the Run introduction video"/&gt;
23&lt;meta property="og:description" content="Bits on the Run is a clear and flexible platform
24  for transcoding, managing and streaming your video online."/&gt;
25&lt;meta property="og:image" content="http://example.com/thumbs/yYul4DRz-320.jpg" /&gt;
26&lt;meta property="og:site_name" content="http://www.mysite.com" /&gt;
27&lt;meta property="og:type" content="movie"/&gt;
28&lt;meta property="og:url" content="http://example.com/previews/MSO47ORl-tBhZ0fIU"/&gt;
29&lt;meta property="og:video" content="http://example.com/players/yYul4DRz-tBYU3ED4.swf" /&gt;
30&lt;meta property="og:video:height" content="245" /&gt;
31&lt;meta property="og:video:width" content="400" /&gt;
32&lt;meta property="og:video:type" content="application/x-shockwave-flash" /&gt;
33</pre>
34
35<p>All these tags should be placed between the <em>&lt;head&gt;</em> and <em>&lt;/head&gt;</em> tags of your page's HTML (<a href="http://content.bitsontherun.com/previews/nPripu9l-8toGQxMR">example </a>). Here's what they do:</p>
36
37<ul>
38<li>The <em>title</em> and <em>description</em> are straightforward: they provide some basic metadata on your video.</li>
39<li>The <em>image</em> provides a preview image of your video. When your friends click that image, the videoplayer will be loaded on their page.</li>
40<li>The *video* provides the link to your video <em>player</em> (not the actual video). In case your players are setup with <a href="http://www.longtailvideo.com/support/addons/sharing-plugin/14049/setting-clean-embed-codes">clean embed codes</a> (e.g. when you use <a href="http://www.longtailvideo.com/bits-on-the-run/">Bits on the Run</a>), 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:</li>
41</ul>
42
43<pre>
44http://www.mysite/com/player.swf?file=http://www.mysite.comvideo.mp4&image=...
45</pre>
46
47<ul>
48<li>The <em>video:height</em> and <em>video:width</em> define the dimensions of your video. The maximum width is <b>420</b> pixels and the maximum height is <b>280</b> pixels. Don't worry about setting other dimensions here than with the player on your own site; the JW Player will automatically resize itself.</li>
49<li>The <em>video:type</em> tells Facebook what media type the video player is. This should always be set to <b>application/x-shockwave-flash</b>.</li>
50</ul>
51
52
53
54<h2>Share page</h2>
55
56<p>Here's an image that shows two instances of the Facebook <em>share</em> 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:</p>
57
58<p><img src="http://www.longtailvideo.com/support/sites/default/files/facebooksharenew.png" alt="facebook sharing dialogs" /></p>
59
60
61<h2>Getting approved</h2>
62
63<p>Next, you need to get your website approved for video embeds with Facebook. That can be done by <a href="http://www.facebook.com/help/contact.php?show_form=video_embed_whitelist">filling out this form</a>. 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).</p>
64
65<p>If you host your videos through `Bits on the Run <http://www.bitsontherun.com/>`_, you're all done at this point, since <a href="http://www.longtailvideo.com/bits-on-the-run/">content.bitsontherun.com</a> is already approved by Facebook.</p>
66
67<p>Facebook will get back to you within a few days, at which point your video embeds should be working.</p>
68
69<h2>End result</h2>
70
71<p>Here's how a video player will look in the news feed of a person who shared it:</p>
72
73<p><img src="http://www.longtailvideo.com/support/sites/default/files/facebookfeednew.png" alt="video player on Facebook profile" /></p>
74
75<p>Clicking the thumbnail will replace the description with your actual videoplayer, so people can watch your video inline.</p>
Note: See TracBrowser for help on using the repository browser.