Sharing

The Sharing plugin in its default configuration

standalone demo

Here is the Sharing plugin in its default configuration. The defaults are sensible and most of the time there is no need to change anything.

Configuration

Note that we need very little configuration here to get going. Several configuration options are available if you want to tweak the behavior.

flowplayer("sharing",
    "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",
    {
    'plugins': {
        'sharing': {
            'url': 'http://releases.flowplayer.org/swf/flowplayer.sharing-3.2.8.swf'
        }
    },
    'clip': {
        'url': 'http://pseudo01.hddn.com/vod/demo.flowplayervod/Extremists.flv',
        'pageUrl': 'http://flowplayer.org/demos/plugins/flash/sharing.html',
        'autoPlay': false
    }
});

JavaScript

HTML meta tags to share the player

When you share this page on certain social networks like Facebook, not only a link back to this page is shared but also the player. This viral spreading of the media itself is achieved by adding HTML meta attributes to your page.

Here are the HTML tags and attributes needed to share this page with the player:

<!doctype html>
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- ... other head tags go here ... -->
 
<!-- "old-fashioned" meta tags -->
<meta name="medium" content="video" />
<meta name="title" content="Sharing" />
<meta name="description" content="The Sharing plugin in its default configuration" />
<meta name="video_type" content="application/x-shockwave-flash" />
<meta name="video_height" content="300" />
<meta name="video_width" content="500" />
<link rel="image_src" href="http://flowplayer.org/media/img/home/flow_eye.jpg" />
<link rel="video_src"
   href="http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf?config=http%3A%2F%2Fflowplayer.org%2Fdemos%2Fstandalone%2Fplugins%2Fflash%2Fsharing_config.js" />
 
<!-- open graph meta properties -->
<meta property="og:url" content="http://flowplayer.org/demos/plugins/flash/sharing.html" />
<meta property="og:site_name" content="Flowplayer" />
<meta property="og:type" content="movie" />
<meta property="og:title" content="Sharing" />
<meta property="og:description" content="The Sharing plugin in its default configuration" />
<meta property="og:video:height" content="300" />
<meta property="og:video:width" content="500" />
<meta property="og:image" content="http://flowplayer.org/media/img/home/flow_eye.jpg" />
<meta property="og:image:secure_url" content="https://d12zt1n3pd4xhr.cloudfront.net/fp/img/flow_eye.jpg" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video"
   content="http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf?config=http%3A%2F%2Fflowplayer.org%2Fdemos%2Fstandalone%2Fplugins%2Fflash%2Fsharing_config.js" />
<meta property="og:video:secure_url"
   content="https://d12zt1n3pd4xhr.cloudfront.net/fp/swf/flowplayer-3.2.11.swf?config=https%3A%2F%2Fd12zt1n3pd4xhr.cloudfront.net%2Ffp%2Fjs%2Fsecure_sharing_config.js" />
</head>

HTML

Most of the above tags are self-explanatory. Some of them, like og:title, may be used to override a page attribute for more specific use in media sharing.

We have two groups of meta tags with overlapping content. A network like MySpace needs the group which is labelled 'old-fashioned', while Facebook and others prefer the Open Graph protocol.

For Facebook and Open Graph it is recommended that you add these schemas to the html tag:

<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

HTML

Find out more about Facebook's handling of Open Graph properties here.

Video meta tags

The tags responsible for sharing the player are: video_src, og:video, og:video:secure_url. Their value is an URL pointing to the location of the Flowplayer swf file with a query containing the player configuration:

http://example.com/path/to/flowplayer-3.2.11.swf?
config=http%3A%2F%2Fexample.com%2Fpath%2Fto%2Fconfig.js

Shared configuration

Shared players are embedded by social networks using an OBJECT tag. The configuration part therefore is formatted the same way as the flashvars parameter of the object tag and must then be url-encoded as it is the query part of an URL.

The same restrictions apply as for all alternate embedding methods which install Flowplayer without its JavaScript API.

Ensure that the media URLs (clips, logo, plugins etc.) in the configuration of the og:video:secure_url tag point to a HTTPS location, unless they are deployed via RTMP.

We recommend using an external configuration file because url-encoding even a simple configuration is error-prone and hard to maintain. As you can only share one player per page anyway - albeit from various locations - this is much easier as long as you stick to a consistent naming scheme. Often the shared configuration will vary slightly from the configuration of the player on the originating page, and then again a human-readable configuration is easier to set up - as in this demo.

The external configuration file for sharing the player on this page can be found here, and its HTTPS 'secure' version here.

Debugging meta tags

Check the meta tags of your page in Facebook's Debugger.

Try the value of the video meta tags in action by entering it in your browser's location bar. For this page just click on the following link which is the value of og:video:secure_url, and the shared player will open in its own window: