We are closing.

Dm banner

SublimeVideoDocumentation

Social Sharing add-on

Table of Contents

Introduction

This add-on provides social sharing feature to your player. It displays a sharing button on the top-right corner of the player which opens a pane with different sharing options/services of your choice:

  • Twitter
  • Facebook
  • Google+
  • Pinterest
  • Plain link sharing

Sharing button
The main sharing button in our Classic player.

Sharing pane
The sharing pane complete with social sharing and link field.

Sharing pane simpler
Simpler sharing pane with just Twitter and Facebook in our Flat player.

Properly linking to a video

If you have one video per page (clearly visible at the top of the page), then linking to it is straightforward because you can simply use the URL of that page as your video sharing URL.

But in the following cases, you should not just use your plain page URL:

  1. if you have multiple videos in the same page
  2. if your video is somewhere at the bottom of your page
  3. if your video is shown through a lightbox
  4. if your video is loaded via AJAX or in a playlist

For 1. and 2. you can simply append a unique #hashtag (see myvideo1 in the sample code below) to the page URL, and have an anchor link element just before your <video> element, so that when your sharing URL is visited, the page will scroll down where the video is located.

<a id="myvideo1"></a> <!-- Place this anchor link just before your video element -->
<video class="sublime" data-sharing-url="http://mysite.com/#myvideo1">
  <source src="video.mp4" />
  <source src="video.webm" />
</video>

For 3. and 4. you will have to add some JavaScript code in order to display the right video. The following sample code shows you how to extract the #hashtag from the sharing URL and pass it to a method of your choice which will be used to display the proper video.

var hashtag = "#myvideo1";
if (document.location.hash == hashtag) {
  showTheVideo(hashtag);
}
function showTheVideo(hashtag) {
  // Display your video.
}

You may want to refer to our JavaScript API to adapt this code to your existing setup.

Settings

Like most of our add-ons, you can set up its default options that should apply to all of your videos from your site’s Player editor page on MySublimeVideo. But you can also set more options and override the default ones on a per video basis via the Video Publishing Assistant, or manually, using the data-settings attribute directly on the <video> elements.

The table below gives you an overview of all the sharing options available and from where you can actually set them up.

Sharing option Player editor Video Publishing Assistant Notes
Main sharing button icon on player
Order of social sharing buttons in pane
Sharing URL
Sharing message text
Sharing message title Currently used for Facebook sharing.
Sharing message image * Currently used for Facebook and Pinterest sharing.
Twitter sharing text Specific sharing message for Twitter limited to 140 chars.

*: You won’t be able to provide a specific image URL from here, use the Video Publish Assistant for that.

Please note the settings described below can be set via the Video Publishing Assistant and via your site’s Player editor page on MySublimeVideo.

sharing-enable

Allows you to enable or disable the sharing features. Please note that a sharing URL must be provided, otherwise the sharing button won’t appear (see sharing-url).

Allowed values:

  • true – (Default) Enable sharing features.
  • false – Disable sharing features.

Example:

<video class='sublime' data-sharing-enable='false'>
  ...
</video>

sharing-icon

Defines the icon to be displayed inside the main sharing button.

Allowed values:

  • default – (Default) Default sharing icon. Sharing default icon@2x
  • alt – Alternative icon. Sharing alt icon@2x

Example:

<video class='sublime' data-sharing-icon='alt'>
  ...
</video>

sharing-buttons

Defines the social network buttons to be shown in the sharing pane. Add a space (" ") between social network names to specify multiple values. The buttons will appear in the same order as they were listed.

Supported social networks:

  • twitter
  • facebook
  • google+
  • pinterest

Example:

<video class='sublime' data-sharing-buttons='pinterest google+'>
  ...
</video>

Allows you to show or hide the link input field in the sharing pane.

Allowed values:

  • true – (Default) Display the input field.
  • false – Hide the input field.

Example:

<video class='sublime' data-sharing-link-enable='false'>
  ...
</video>

sharing-url

Defines the URL to be shared. This setting is required – the main sharing button will appear only if an URL has been specified.

See also out how to properly linking to a video.

Allowed values:

  • any valid url

Example:

<video class='sublime' data-sharing-url='http://yourdomain.com'>
  ...
</video>

sharing-title

Defines the title to be shared. This setting will only be used for social networks that let you provide both a title and a text as your sharing message (currently only used for Facebook).

Allowed values:

  • any string

Example:

<video class='sublime' data-sharing-title='Check out this video!'>
  ...
</video>

sharing-text

Defines the main text to be shared (Used for Facebook, Twtter and Pinterest). If your message is longer than 140 characters, remember to provide shorter and specific version for Twitter via the sharing-twitter-text setting. If you omit this setting, Facebook will extract this info from the og:description metadata.

Allowed values:

  • any string

Example:

<video class='sublime' data-sharing-text='Check out this video!'>
  ...
</video>

sharing-twitter-text

Defines the text to be shared via Twitter. If the setting isn’t specified, the default sharing-text will be used instead.

Allowed values:

  • any string – It must be shorter or equal to 140 characters.

Example:

<video class='sublime' data-sharing-twitter-text='Twitter users, check it out!'>
  ...
</video>

sharing-twitter-via

Allow you to specify a username to associate with the Tweet.

Allowed values:

  • any string – Twitter username.

Example:

<video class='sublime' data-sharing-twitter-via='jilion'>
  ...
</video>

sharing-image

Defines the image to be shared (currently supported by Facebook and Pinterest).

Allowed values:

  • auto – Depending on the social network, the image will be taken from Open Graph, the img elements in the page or the video poster.
    • Facebook will first check Open Graph tags in your page and will fallback to the DOM when necessary.
    • Pinterest will use the <video> poster frame.
  • poster – The video poster frame will be used as image.
  • any valid url – custom image.

Example:

<video class='sublime' data-sharing-image='poster'>
  ...
</video>

About Open Graph

We offer options to pre-compose the sharing message (title, description and image). Depending on the social sharing service, this info might be extracted from the Open Graph markup that you have in the <head> of your page.

Please read sharing-text, sharing-image, and sharing-title for more details.

We also recommend to use this page to validate the Open Graph markup in your page.