Enable viewers to share your content

Encourage your viewers to share your content on social media by enabling and customizing the sharing menu in your player.

You can encourage your viewers to share your content on social media by enabling and customizing the sharing menu in your player.

Screenshot of the sharing menu in the playerScreenshot of the sharing menu in the player

Screenshot of the sharing menu in the player

When enabled, a sharing icon is added to the control bar of your player. When your viewers click the sharing icon, they have the ability to do any of the following activities:

  • Share your video to the social networks you have chosen
  • Email a link to your video to those within their network
  • Copy the link to your video to creatively share with others
  • Copy a code block that enables your video to be embedded in web pages, like blog posts

Customize a basic sharing menu

The following steps explain how to enable and customize the sharing menu by customizing the JSON configuration of your player.

📘

TIP:

You can also learn How to implement social sharing through your JW Player dashboard.

  1. Add a sharing object to your player JSON configuration.
  2. Define the social media networks (including email) to which your viewers can share your videos. If you do not define the sharing object, the default settings will appear: facebook, twitter, email, and link.
  3. (Optional) Customize the localized tooltip text for and aria-label HTML attribute of the sharing button in the control bar and sharing menu options. This requires that the HTML lang attribute has been defined for the page. When this attribute is defined, the player automatically translates the text of the tooltips and aria-label HTML attributes into the defined language.
jwplayer("myElement").setup({
  playlist: "http://cdn.jwplayer.com/media/1234abcD",
  sharing: {
    sites: ["facebook","twitter","email","linkedin","pinterest"]
  },
  intl: {
    en: {
      sharing: {
        heading: "Share this awesome video"
      }
    }
  }
});


Add a custom site to the sharing menu

You can also add a custom site or behavior to the sharing menu. The following steps and code samples illustrate how this can be done:

  1. In the sharing.sites array, add an empty object.
  2. Within the empty object, define the icon, label, and src.
jwplayer("myElement").setup({
  playlist: "http://cdn.jwplayer.com/media/1234abcD",
  sharing: {
    sites: [
      "reddit",
      {
        icon: "https://www.mydomain.com/custom-icon.png",
        src: "https://www.custom-site.com",
        label: "My Custom Site"
      },
      "facebook"
    ]
  }
});
jwplayer("myElement").setup({
  playlist: "http://cdn.jwplayer.com/media/1234abcD",
  sharing: {
    sites: [
      "reddit",
      {
        icon: "https://www.mydomain.com/custom-icon.png",
        src: function () {
          // custom Javascript
        },
        label: "My Custom Behavior"
      },
      "facebook"
    ]
  }
});
PropertyDescription
icon string(Required) URL to an icon that appears in the sharing menu

This can be an .svg or .png file.
label stringLabel for the custom site or custom behavior
src string | functionURL of the custom site or JavaScript behavior to be executed when this sharing option is clicked


Did this page help you?