Social Sharing Plugin

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Plugins
Social Sharing

In this topic, you will learn how to use the social media plugin to enable users to share a video through Facebook, Google+, Twitter, Tumblr, Pinterest and LinkedIn.

Example

Let's say you have a web page with a Brightcove player on it. Now, you want to let users share the video across social media platforms. With the social media plugin, you will see a social sharing icon in the title and description dock.

Social Media icon

Clicking on this icon displays the social sharing screen, as shown here.

Social Media Share Interface

You will need to set a width and height for the player for two reasons:

  1. If no width or height are set there will be no values to pass to Twitter, which will cause the Twitter card not to validate.
  2. The width needs to be wide enough to accommodate the social plugin's interface as shown in the screenshot above. You can also have the interface automatically appear on video end using the displayAfterVideo property, documented below.

Click here for a working sample of a web page that uses the plugin and includes the social media meta tags.

Overview

This document walks you through the steps to enable social media sharing for an existing HTML page with your Brightcove player on it. This assumes that you have created a Brightcove player with the proper configuration information and have added the player to an HTML page.

To add the social media plugin, follow these steps:

  1. Implement using Players module. This will update your Brightcove player to use the social media plugin.

    • You will need the URL to the HTML page with your Brightcove player.
    • Review the available properties to customize the social media plugin.
  2. Add social meta tags to your player's HTML page.
  3. Validate the meta tags on your HTML page for FaceBook and Twitter.

In a browser, open the HTML page with your Brightcove player and use the social sharing icon in the player to share your video.

You can also implement the social media plugin within your page code, but this is a more advanced solution. You may want to use this approach to include custom sharing URLs. For details, see the Customizing sharing URLs section.

Configure player

There are three ways to include social sharing with your player:

  • In Studio's Players module, configure properties in the Social section. This provides an interface to select different social media platforms, but no other configuration options. This implementation immediately follows this bulleted list.
  • In Studio's Players module, add the social sharing plugin using the Plugins section. This provides an interface to provide configuration options. This implementation is documented in the Configure player with options section later in this document.
  • Implement the plugin using code. This implementation is documented in the Customizing sharing URLs section later in this document.

To add the social sharing plugin, follow these steps:

  1. Open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.
  2. Click the link for the player to open the player's properties.
  3. Click Social in the left navigation menu.
  4. Next, click the checkbox for Enable Sharing.
  5. Click the social media platforms to which you wish to share videos.
  6. To publish the player, click Publish & Embed > Publish Changes.
  7. To close the open dialog, click Close.

Configure player with options

To use properties as configuration options to configure the plugin, follow these steps:

  1. Open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.
  2. Click the link for the player to open the player's properties.
  3. Click Social in the left navigation menu, and be sure that checkbox is NOT checked.
  4. Click Plugins in the left navigation menu.
  5. Next, click Add a Plugin.
  6. For the Plugin Name enter social.
  7. For the JavaScript URL, enter:
      https://players.brightcove.net/videojs-social/3/videojs-social.min.js
  8. For the CSS URL, enter:
      https://players.brightcove.net/videojs-social/3/videojs-social.css
  9. Enter the configuration options in the Options(JSON) text box. In this example, the options do the following:
    • Lines 2-3: Set the name and description for your video.
    • Line 4: Defines the URL for your custom web page with your video player and social sharing meta tags.
    • Lines 5-6: For Twitter, this allows a user to start viewing the video after a 5 second offset.
    • Lines 7-13: Enables social sharing for Facebook, Google, Twitter, Tumblr, Pinterest and LinkedIn.

    {
      "title": "Tiger",
      "description": "Video of two tigers",
      "url": "https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html",
      "deeplinking": true,
      "offset": "00:00:05",
      "services": {
        "facebook": true,
        "google": true,
        "twitter": true,
        "tumblr": true,
        "pinterest": true,
        "linkedin": true
      }
    }
  10. Check to be sure your form appears similar to the following:
  11. Click Save.
  12. To publish the player, click Publish & Embed > Publish Changes.
  13. To close the open dialog, click Close.

Properties

For plugins in general, the options object is used to pass data to the plugin to customize initialization. In this case, you can use the following properties in this object:

title

  • Type: string
  • This is a custom title that will appear when your video is shared.

description

  • Type: string
  • This is a custom description that will be used by the social services which support it.

url

  • Type: string
  • This is the URL that points to your custom web page which has your video and the meta tags for sharing. Refer to the meta tags section for details on how to add the social media metadata to your player page.

embedCode

  • Type: string
  • This is the Brightcove player iframe embed code for sharing the video. This allows you to completely override the contents of the Embed Code field located in the sharing dialog.
    Social Media Embed Code
  • You can get the value of this property by using the getEmbedCode() method.

removeEmbed

  • Type: boolean
  • Default: false
  • If set to true, turns off (hides) the iframe embed code

displayAfterVideo

  • Type: boolean
  • Default: false
  • Causes the social screen to automatically show on an ended event

deeplinking

  • Type: boolean
  • Default: false
  • This enables/disables deep linking for the shared video. This feature allows a user to start viewing a video from a specific offset. For more details, view the Deep Linking document.

offset

  • Type: string
  • Format: 00h00m00s
  • This is used with the deeplinking property and defines when to start playing the video. To offset 1 minute and 5 seconds, you would write: 00h01m05s

services

Include all service properties in this object. To enable or disable support for a service, set the property value to true or false instead of removing them.

  • facebook
    • Type: boolean
    • Default: true
    • This enables the Facebook sharing icon.
  • google
    • Type: boolean
    • Default: true
    • This enables the Google+ sharing icon.
  • twitter
    • Type: boolean
    • Default: true
    • This enables the Twitter sharing icon.
  • tumblr
    • Type: boolean
    • Default: true
    • This enables the Tumblr sharing icon.
  • pinterest
    • Type: boolean
    • Default: true
    • This enables the Pinterest sharing icon.
  • linkedin
    • Type: boolean
    • Default: true
    • This enables the LinkedIn sharing icon.

buttonParent

  • Type: text
  • Default: shelf
  • Determines where the sharing icon should be located. If set to shelf, the default, the sharing icon appears in the dock. If the value is set to controlBar, the sharing icon will appear in the controlbar.

Example:

{
  "services": {
    "linkedin": true,
    "pinterest": true,
    "tumblr": true,
    "twitter": true,
    "google": true,
    "facebook": true
  },
  "offset": "00:00:05",
  "deeplinking": true,
  "url": "https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html",
  "description": "Video of two tigers",
  "buttonParent": "controlBar",
  "title": "Tiger"
}

Getter and setter configuration methods

There are a number of methods available to both set and retrieve configuration options. All of the methods are associated with the SocialOverlay component, which extends the videojs.ModalDialog class. (Information on this class can be found in the Implementing the ModalDialog document.)

When the social plugin is initialized, an instance of the SocialOverlay component becomes available at player.socialOverlay . The general format for using the getter and setter methods is as follows:

player.socialOverlay.methodName()

setDirectLink(string)

  • Usage: player.socialOverlay.setDirectLink(string)
  • Purpose: Updates the URL used by the social overlay. Setting the value to the empty string ('') causes the URL to be determined on demand.

getDirectLink()

  • Usage: player.socialOverlay.getDirectLink()
  • Purpose: Returns the URL used by the social overlay.

setEmbedCode(string)

  • Usage: player.socialOverlay.setEmbedCode(string)
  • Purpose: Updates the embed code used by the social overlay.

getEmbedCode()

  • Usage: player.socialOverlay.getEmbedCode()
  • Purpose: Gets the embed code used by the social overlay.

SocialButton

When the social plugin is initialized, an instance of the SocialButton component becomes available at player.socialButton . This component extends the videojs.Button class.

Generate meta tags

After you update your Brightcove player to use the social sharing plugin in the previous section, you are ready to add social meta tags to your HTML page.

These meta tags allow social sharing sites to embed your video players and thumbnails in the post. The form below calls the CMS API with your information and retrieves your video data. It then generates social meta tags with your specific data.

To add social media meta tags to the HTML page with your Brightcove player, follow these steps:

  1. Enter your account, player and video information into the form below and select the Generate Social Tags button.

Data Input

Account Information
Service URL: https://edge.api.brightcove.com/playback/v1
Video CloudBrightcove Player Account (Publisher ID):
Policy key:

 

Player Information
URL for your player page:
Twitter @username of website:
Player ID (from Players Module):
Player width:
Player height:
Video Information
Video ID (from Media Module):

 

Generate Social Tags

 
  1. Press the Select the code button. Then, copy and paste the selected code into the <head> section of your HTML player page.

The Generated Social Sharing Meta Tags

Metadata Code

Select the code and then copy and paste it into your page.

 
  1. Save your changes. You are now ready to use the social media sharing interface with your player.

Sharing on Facebook

At this time, only Facebook's native player will play videos in a Facebook wall. If you would like to share your videos and have them play in the Facebook wall, you can use Brightcove Social. For details, see the Getting Started with Brightcove Social document.

The Brightcove player will create a link in the wall which will open your video and player in a new browser tab or window. For most people, this behavior may be fine. To do this, Facebook lets you define the video using Open Graph (og) meta tags in your page HTML page. For details about how to use og tags for Facebook, see the Sharing Best Practices document.

To share a link to your player and video, follow these steps:

  1. In the Players module, scroll down to the Social Sharing section, and select Yes to Allow Sharing.
  2. Save your changes and publish your player.
  3. Create an HTML page with your player and video.
  4. Generate your social meta tags for your HTML page and update them as follows:
    • Lines 9-11: define your site name, the title of your video and type as video.
    • Line 12: points to the URL for your video with the Brightcove player.
    • Line 13: points to a thumbnail image for your video.

    • Lines 14-16: provide a description for your video, along with player dimensions.
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Social Media Plugin</title>
    <!-- Open Graph Sharing Metadata -->
    <meta property="og:site_name" content="Brightcove"/>
    <meta property="og:title" content="Social Media Plugin"/>
    <meta property="og:type" content="video"/>
    <meta property="og:url" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html"/>
    <meta property="og:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png" />
    <meta property="og:description" content="Tiger"/>
    <meta property="og:video:width" content="640"/>
    <meta property="og:video:height" content="360"/>
    <!-- Twitter: card/meta-tags -->
    <meta name="twitter:card" content="player"/>
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:title" content="Tiger"/>
    <meta name="twitter:description" content="Tiger video"/>
    <meta name="twitter:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"/>
    <meta name="twitter:player" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html"/>
    <meta name="twitter:player:width" content="640"/>
    <meta name="twitter:player:height" content="360"/>
    <meta name="twitter:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-twitter.html"/>
    <meta name="twitter:player:stream:content_type" content="video/mp4" />
    <style>
      /* player dimensions */
      iframe {
        width: 640px;
        height: 360px;
      }
    </style>
  </head>
  <body>
    <iframe src='https://players.brightcove.net/1752604059001/86767278-c2c4-43fb-88fa-ff26c6b01837_default/index.html?videoId=4172255216001' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
  </body>

To do this, follow these steps:

  1. In the Players module, scroll down to the Social Sharing section, and select Yes to Allow Sharing.
  2. Save your changes and publish your player.
  3. Create an HTML page with your player and video.
  4. Generate your social meta tags for your HTML page and update them as follows:
    • Lines 92-94: define your site name, the title of your video and type as video.
    • Line 95: points to the URL for your video.
    • Line 96: points to a thumbnail image for your video.

    • Lines 97-99: provide a description for your video, along with player dimensions.
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Social Media Plugin - Share Smart Player</title>
    <!-- Open Graph Sharing Metadata -->
    <meta property="og:site_name" content="Brightcove"/>
    <meta property="og:title" content="Social Media Plugin"/>
    <meta property="og:type" content="video"/>
    <meta property="og:url" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html"/>
    <meta property="og:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png" />
    <meta property="og:description" content="Modus 550"/>
    <meta property="og:video:width" content="640"/>
    <meta property="og:video:height" content="360"/>
    <!-- Twitter: card/meta-tags -->
    <meta name="twitter:card" content="player"/>
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:title" content="Tiger"/>
    <meta name="twitter:description" content="Tiger video"/>
    <meta name="twitter:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"/>
    <meta name="twitter:player" content="https://players.brightcove.net/3676484087001/f28fbfc5-9153-4c51-ac67-ec6bcad8a28e_default/index.html"/>
    <meta name="twitter:player:width" content="640"/>
    <meta name="twitter:player:height" content="360"/>
    <meta name="twitter:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-custom.html"/>
    <meta name="twitter:player:stream:content_type" content="video/mp4" />
  </head>
  <body>
    <iframe style='width: 640px;height: 360px;' src='https://players.brightcove.net/3676484087001/f28fbfc5-9153-4c51-ac67-ec6bcad8a28e_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
  </body>
</html>

  1. Don't forget to check that you have valid meta tags, as described in the validate section.

For more information about sharing to Facebook, see the following:

Sharing on Twitter

If you want to share your video on Twitter, you need to include the twitter meta tags.

Currently, Twitter is the only social site that will allow you to use deep linking to start a video at a specified point in time. If you don't want to use this feature, simply leave the time parameter off the player URL in the example below.

To use the deep linking feature, you must add a time parameter to the query string, as defined in the Deep Linking document.

Here is an example:

  1. In the Players module, scroll down to the Social Sharing section, and select Yes to Allow Sharing.
  2. Save your changes and publish your player.
  3. Once you have generated your social meta tags, update them as follows:
    • Lines 64-67: define the Twitter card type as player , your Twitter site, the title and description.
    • Line 68: points to a thumbnail image for your video.

    • Line 69: points to the URL for your Brightcove player. Notice that the query parameters define the videoId , and tells the player to automatically start playing at the 15 second point of the video. This is how you can deep link into a video with Twitter.
    • Lines 70-71: provide the player dimensions.
    • Line 72: points to the URL for your HTML page with your Brightcove player.
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Social Media Plugin - Deep Linking with Twitter</title>
    <!-- Open Graph Sharing Metadata -->
    <meta property="og:site_name" content="Brightcove"/>
    <meta property="og:title" content="Social Media Plugin"/>
    <meta property="og:description" content="Great Blue Heron"/>
    <meta property="og:url" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-twitter.html"/>
    <meta property="og:image" content="https://solutions.brightcove.com/bcls/assets/images/Great-Blue-Heron.png"/>
    <meta property="og:type" content="video"/>
    <meta property="og:video:width" content="640"/>
    <meta property="og:video:height" content="360"/>
    <!-- Twitter: card/meta-tags -->
    <meta name="twitter:card" content="player"/>
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:title" content="Social Media Plugin"/>
    <meta name="twitter:description" content="Great Blue Heron"/>
    <meta name="twitter:image" content="https://solutions.brightcove.com/bcls/assets/images/Great-Blue-Heron.png"/>
    <meta name="twitter:player" content="https://players.brightcove.net/1752604059001/2c7eac7c-181c-41d1-aae8-4a5107c05ee2_default/index.html?videoId=4172255216001#t=00h00m15s&autoplay=true"/>
    <meta name="twitter:player:width" content="640"/>
    <meta name="twitter:player:height" content="360"/>
    <meta name="twitter:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-twitter.html"/>
    <meta name="twitter:player:stream:content_type" content="video/mp4" />
  </head>
  <body>
    <iframe style='width: 640px;height: 360px;' src='https://players.brightcove.net/1752604059001/2c7eac7c-181c-41d1-aae8-4a5107c05ee2_default/index.html?videoId=4172255216001' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
  </body>

Here is an example:

  1. In the Players module, scroll down to the Social Sharing section, and select Yes to Allow Sharing.
  2. Save your changes and publish your player.
  3. Once you have generated your social meta tags, update them as follows:
    • Lines 139-142: define the Twitter card type as player , your Twitter site, the title and description.
    • Line 143: points to a thumbnail image for your video.

    • Line 144: points to the URL for your Brightcove player. Notice that the query parameters define the videoId , and tells the player to automatically start playing at the 15 second point of the video. This is how you can deep link into a video with Twitter.
    • Lines 145-146: provide the player dimensions.
    • Line 147: points to the URL for your HTML page with your Brightcove player.
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <title>Social Media Plugin - Deep Linking with Twitter</title>
  <!-- Open Graph Sharing Metadata -->
  <meta property="og:site_name" content="Brightcove"/>
  <meta property="og:title" content="Social Media Plugin"/>
  <meta property="og:description" content="Tiger video"/>
  <meta property="og:url" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-perform.html"/>
  <meta property="og:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"/>
  <meta property="og:type" content="video"/>
  <meta property="og:video:width" content="640"/>
  <meta property="og:video:height" content="360"/>
  <!-- Twitter: card/meta-tags -->
  <meta name="twitter:card" content="player"/>
  <meta name="twitter:site" content="@username" />
  <meta name="twitter:title" content="Social Media Plugin"/>
  <meta name="twitter:description" content="Tiger video"/>
  <meta name="twitter:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"/>
  <meta name="twitter:player" content="https://players.brightcove.net/3676484087001/f28fbfc5-9153-4c51-ac67-ec6bcad8a28e_default/index.html?t=00h00m15s&autoplay=true"/>
  <meta name="twitter:player:width" content="640"/>
  <meta name="twitter:player:height" content="360"/>
  <meta name="twitter:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-perform.html"/>
  <meta name="twitter:player:stream:content_type" content="video/mp4" />
</head>
<body>
  <iframe style='width: 640px;height: 360px;' src='https://players.brightcove.net/3676484087001/f28fbfc5-9153-4c51-ac67-ec6bcad8a28e_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
</body>
</html>
  1. Don't forget to check that you have valid meta tags, as described in the validate section.

For more details about configuring your Twitter meta tags, see the following:

Validate

Once you have followed the steps to include the meta tags on your page you can validate the page for both Facebook and Twitter.

For Facebook, go to the Facebook Debugger and paste the URL to the page that contains the meta tags and click Debug to validate.

For Twitter, go to the Card Validator, paste the URL to the page that contains the meta tags and click Preview card to validate. An added advantage to validating is that Twitter will then ask you to verify your website and you will go on the waiting list to be approved for Twitter Cards.

If errors occur in either validation process, update the player configuration as needed.

Customizing sharing URLs

A more advanced implementation for the social media plugin is to use the In-Page Embed Code from the Players module. This will allow you to pass configuration options from within your page code. One reason to do this, would be to provide custom embedCode values to share a different player than the one on your page.

To implement the plugin using custom code, follow these steps:

  1. Open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.
  2. Click the link for the player to open the player's properties.
  3. Click Social in the left navigation menu, and be sure that checkbox is NOT checked.
  4. Click Plugins in the left navigation menu.
  5. Next, click Add a File.
  6. Check the JavaScript radio button.
  7. For the JavaScript URL, enter:
      https://players.brightcove.net/videojs-social/3/videojs-social.min.js
  8. Click Save.
  9. Again, click Add a File.
  10. Check the CSS radio button.
  11. For the CSS URL, enter:
      https://players.brightcove.net/videojs-social/3/videojs-social.css
  12. Click Save.

Your player now includes all the code for the social media sharing functionality, but it won't automatically initialize the plugin and create the sharing button.

  1. Associate the player with which you are working, and copy the Advanced code into your HTML page. If you run your page in the browser, notice that the sharing button does not appear in the player. It will once the social plugin has been initialized.

  1. To your HTML page code, add JavaScript code as follows:
    • Line 23-24: Gets a reference to your player.
    • Lines 25-40: Set the options for the social sharing plugin. For details, see the Properties section.
    • Line 28: Sets the sharing URL.
    • Line 41: Initializes the social plugin with the specific options.

<!DOCTYPE html>
  <head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <title>Social Media Plugin</title>
  <style>
    /* player dimensions */
      .video-js {
      width: 640px;
      height: 360px;
    }
  </style>
  </head>
  <body>
    <video-js id="myPlayer"
      data-account="1752604059001"
      data-player="a252c366-2867-4033-9f22-3caee828beef"
      data-embed="default"
      data-video-id="4093643993001"
      class="video-js" controls></video-js>
    <script src="https://players.brightcove.net/1752604059001/a252c366-2867-4033-9f22-3caee828beef_default/index.min.js"></script>
    <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this,
        options = {
          "title": "Tiger",
          "description": "Video of two tigers",
          "url": "https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html",
          "embedCode": "<iframe src='http://bcove.me/niqx01er'>",
          "deeplinking": true,
          "offset": "00:00:05",
          "services": {
            "facebook": true,
            "google": true,
            "twitter": true,
            "tumblr": true,
            "pinterest": true,
            "linkedin": true
          }
        };
        myPlayer.social(options);
    </script>
  </body>
</html>
  1. To your HTML page code, add JavaScript code as follows:
    • Line 147: Gets a reference to your player.
    • Lines 149-164: Set the options for the social sharing plugin. For details, see the Properties section.
    • Line 153: Sets the sharing URL to use a Smart Player. You can use this property to set the Sharing URL to any Brightcove player or Smart Player.
    • Line 166: Initializes the social plugin with the specific options.

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Social Media Plugin</title>
  </head>
  <body>
    <video-js id="myPlayer"
      style='width: 640px;height: 360px;'
      data-account="3676484087001"
      data-player="f28fbfc5-9153-4c51-ac67-ec6bcad8a28e"
      data-embed="default"
      class="video-js" controls></video-js>
    <script src="https://players.brightcove.net/3676484087001/f28fbfc5-9153-4c51-ac67-ec6bcad8a28e_default/index.min.js"></script>
    <script type="text/javascript">
      var myPlayer = videojs.getPlayer('myPlayerID');
      var options = {
        "title": "Tiger",
        "description": "Video of two tigers",
        "url": "https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html",
        "embedCode": "<iframe src='http://bcove.me/niqx01er'>",
        "deeplinking": true,
        "offset": "00:00:05",
        "services": {
          "facebook": true,
          "google": true,
          "twitter": true,
          "tumblr": true,
          "pinterest": true,
          "linkedin": true
        }
      };
      myPlayer.social(options);
    </script>
  </body>
</html>
  1. You should see the social sharing button in your player.

  2. You are now ready to add the social meta tags to your player page. See the Meta tags section to generate these tags.

Custom services

The plugin has built in support for six popular social media platforms, but you can also add others using custom services. To do this you configure an options.customServices object. This object is an array of custom service objects. A short example configuration is shown, then the details of the example provided.

The following example would add three buttons. The first and second buttons for Xing and WhatsApp. The WhatsApp button will only appear on mobile. These two examples are using Font Awesome for the icon, which is convenient if the player is an in-page embed in a page already using the font, but any other styling could be used. The third is a Facebook share button using Facebook's feed API which allows a Facebook app id to be included for attribution. You would want to disable the regular Facebook button when using this.

[{
  className: 'fa fa-xing',
  title: 'Xing',
  hrefTemplate: 'https://www.xing.com/spi/shares/new?url={{url}}',
  bgColor: '#026466'
},
{
  className: 'fa fa-whatsapp',
  title: 'WhatsApp',
  hrefTemplate: 'whatsapp://send?text={{title}}%20{{url}}',
  bgColor: '#25d366',
  mobileOnly: true
},
{
  classSuffix: 'facebook',
  title: 'Facebook',
  hrefTemplate: 'https://www.facebook.com/dialog/feed?app_id=123456789&caption={{title}}&display=page&link={{url}}'
}]

The following define the properties of a custom service object:

customService.title

  • Type: string
  • The title of the sharing destination.

customService.className

  • Type: string
  • A class or space-separated list of classes to add to the button.

customService.classSuffix

  • Type: string
  • The suffix is appended to vjs-icon- to generate the button's class. Only used if className is not specified. Only useful if replacing one of the standard destinations, since the Video.js font contains no additional social destination icons.

customService.hrefTemplate

  • Type: string
  • A sting template to generate the sharing URL, which may contain the macros {{url}} , {{poster}} , {{title}} and {{description}} . May be used instead of customService.href where it is not possible to specify a function, e.g. providing the options in a JSON string to the Player Management API.

customService.href

  • Type: string
  • A function to generate the sharing url. Must take an object and return a string. Unless specified this is generated from hrefTemplate .

customService.bgColor

  • Type: string
  • An optional CSS color value which will be applied as the background color element style. Not required if the button is styled by CSS, but provided for convenience especially where the icon will be styled by an existing stylesheet.

customService.mobileOnly

  • Type: boolean
  • Default: false
  • If true , the button will only display on Android and iOS.

Known issues

Keyboard navigation of buttons - Firefox for OS X

Firefox for OSX has default tabbing behavior to tab through text boxes and lists elements only. Since the Social Plugin's buttons are link elements, navigating through them with keyboard won't be possible unless you check the box All controls under System Preferences > Keyboard > Shortcuts.

Changelog

6 Dec 2018

v3.8.2

  • Dependency maintenance

6 Dec 2018

v3.8.1

  • Bug Fix: Ensure that keyboard focus is trapped inside the social modal dialog while it's open

13 Nov 2018

v3.8.0

  • Made the social dialog work better for responsive Players

1 Oct 2018

v3.7.6

  • Updated translations

18 Sep 2018

v3.7.5

  • Correctly expose the plugin version

7 Sep 2018

v3.7.4

  • Bug fix: Check if direct link enabled before giving it focus
  • Bug fix: Remove the postinstall script to prevent install issues
  • Updated using plugin generator v7.2.0

2 Aug 2018

v3.7.3

  • Fixed size of share icon

17 Apr 2018

v3.7.2

  • Increased the clickable area for Share and Close buttons on all devices
  • Updated VJS version in use

12 Mar 2018

v3.7.0

  • Added Finnish and Swedish translations
  • Improved accessibility with outlines on share links
  • Increased the clickable area for share and close button on mobile devices

5 Dec 2017

v3.6.5

  • Fixed an issue where the endscreen would incorrectly wait for a post-roll to complete when there was no post-roll
  •  

27 Nov 2017

v3.6.4

  • Fixed an issue where social endscreen was not showing at end of non-repeating playlist

15 Nov 2017

v3.6.3

  • Fixed an issue where endscreens might not appear for some players without playlists

8 Nov 2017

v3.6.1

  • Avoid possible issues with playlists with autoadvance of zero

5 Sep 2017

v3.6.0

  • Added support for custom share buttons

14 Aug 2017

v3.5.1

  • Fixed button sizing with Video.js 6

4 Aug 2017

v3.5.0

  • Added setters for Direct URL and Embed Code

10 May 2017

v3.4.0

  • Added playlistVideoId query string parameter to direct link, if necessary and possible

10 Feb 2017

v3.2.0

  • Added Video.js 5/6 cross-compatibility
  • The overlay will now close if switching sources
  • Buttons are now properly translated
  • Additions and improvements to localizations of Arabic, German, Spanish, French, Japanese, Korean, and Turkish

19 Jan 2017

v3.1.1

  • Social overlay now closes if new video is loaded
  • Updated Tumblr share URL to use HTTPS

14 Apr 2016

v3.1.0

  • Support for Turkish language
  • Support for devices with small screens

25 Mar 2016

v3.0.9

  • Added Arabic language files
  • Fixed unclickable social sharing links
  • Fix to ensure that social and button are hidden on small devices

7 Mar 2016

v3.0.8

  • Fixed an issue where it looked like the player was torn down when being restarted.
  • Fixed sizing dependent on the base font size (now assuming SVT's 14px).
  • Added "deploy" script to package.json .

23 Nov 2015

v3.0.0

  • Refactor to use video.js ModalDialog and ES6.
  • Deprecate show and hide methods.
  • Remove update method.
  • Overhaul HTML/CSS to be cleaner and more consistent.
  • Fully update design for the new Brightcove Player.

29 Sep 2015

v2.0.0

  • Refactor and update for basic compatibility with video.js 5.0.

14 Jul 2015

v1.5.0

  • Refactor internals
  • Expose getEmbedCode .
  • Always have socialOverlay present.

17 Feb 2015

v1.4.0

  • Add embed code override option

22 Jan 2015

v1.3.0

  • Add option to use the social dialog as an endscreen

31 Oct 2014

v1.2.0

  • Localization support

25 Jul 2014

v1.1.0

  • Make background of social plugin in IE8 be black
  • IE8 fixes

24 Jul 2014

v1.0.0

  • Initial release