Integrating Social Dialog with Brightcove Web & Smart TV SDK

Overview

The Social Dialog integration enables the inclusion of social sharing buttons within your media player, facilitating easy sharing of content on social networks like Facebook, Twitter, Pinterest, and LinkedIn. This feature enhances viewer engagement and promotes content virality.

Prerequisites

• A functional Brightcove account and access to the Video Cloud.

• The Brightcove Web & Smart TV SDK installed in your project.

Integration

1. Import the Player (with UI) class from the Brightcove SDK.

   import { Player } from '@brightcove/web-sdk';
               

2. Import the Social integration class from the Brightcove SDK.

   import { SocialIntegration } from '@brightcove/web-sdk/integrations/social';
               

3. Import the Social integration CSS from the Brightcove SDK.

   import '@brightcove/web-sdk/integrations/social/styles.css';
               

4. Import required Social Language Packs from the Brightcove SDK (in this example: French)

   import { SocialIntegrationFrenchLanguagePack } from '@brightcove/web-sdk/integrations/social/languagePacks/fr';
               

5. Setup social integration to ensure it's available when the player initializes.

   Player.addSocialIntegration(ImaClientSideIntegration, { 
     languagePacks: [SocialIntegrationFrenchLanguagePack],
     services: [
       SocialIntegration.Service.Google,
       SocialIntegration.Service.Pinterest,
       SocialIntegration.Service.LinkedIn
     ]
   });
                 
               

6. Create and Configure the Player.

   const player = new Player();
   
   player.updateConfiguration({
     brightcove: {
       accountId: 'your-account-id',
       auth: { policyKey: 'your-policy-key' }
     }
   });
               

7. Attach the Player to a Video Element.

   const videoElement = document.querySelector('video');
   
   player.attach(videoElement);
                   
               

8. Use social integration.

   const directLink = 'your-direct-link';
   
   player.integrations.social.setDirectLink(directLink);
                   
               

Complete snippet:

// Import the Player (with UI) class from the Brightcove SDK
import {Player} from '@brightcove/web-sdk';

// Import the Social integration class from the Brightcove SDK
import { SocialIntegration } from '@brightcove/web-sdk/integrations/social';

// Import the Social integration CSS from the Brightcove SDK
import '@brightcove/web-sdk/integrations/social/styles.css';

// Import required Social Language Packs from the Brightcove SDK (in this example: French)
import { SocialIntegrationFrenchLanguagePack } from '@brightcove/web-sdk/integrations/social/languagePacks/fr';
 
// Setup social integration before creating player
Player.addSocialIntegration(ImaClientSideIntegration, { 
  languagePacks: [SocialIntegrationFrenchLanguagePack],
  services: [
    SocialIntegration.Service.Google,
    SocialIntegration.Service.Pinterest,
    SocialIntegration.Service.LinkedIn
  ]
});

// Create a new Player
const player = new Player();

player.updateConfiguration({
  brightcove: {
    accountId: 'your-account-id',
    auth: { policyKey: 'your-policy-key' }
  }
});

// Attach a video element to the Player instance
const videoElement = document.querySelector('video');

player.attach(videoElement);  

// Use social integration
const directLink = 'your-direct-link';
player.integrations.social.setDirectLink(directLink);