ソーシャル共有プラグイン

例

Brightcove プレーヤーが配置された Web ページがあるとします。次に、その動画をソーシャルメディアプラットフォームでユーザーが共有できるようにしたいとします。ソーシャルメディアプラグインを使用すると、タイトルおよび説明ドックにソーシャル共有アイコンが表示されます。

このアイコンをクリックすると、以下に示すようなソーシャル共有画面が表示されます。

以下の 2 つの理由から、プレーヤーには幅と高さを設定する必要があります。

幅または高さが設定されていない場合、X に渡す値が存在しないため、X カードの検証に失敗します。
幅は、上記のスクリーンショットに示されているソーシャルプラグインのインターフェースを表示できる十分な広さが必要です。また、以下で説明している displayAfterVideo プロパティを使用すると、動画終了時にインターフェースを自動的に表示させることもできます。

プラグインを使用し、ソーシャルメディアのメタタグを含む Web ページの動作サンプルはこちらをクリックしてください。

概要

このドキュメントでは、Brightcove プレーヤーが配置された既存の HTML ページでソーシャルメディア共有を有効にするための手順を説明します。ここでは、適切な設定情報を持つ Brightcove プレーヤーを作成し、そのプレーヤーを HTML ページに追加していることを前提としています。

ソーシャルメディアプラグインを追加するには、以下の手順に従ってください。

プレーヤーを設定します。これにより、Brightcove プレーヤーがソーシャルメディアプラグインを使用するように更新されます。プレーヤーにソーシャル共有を含める方法は 3 つあります。
- プレーヤーのプロパティを設定する
  Studio の Players モジュールでは、ソーシャル セクションでプロパティを設定できます。これにより、異なるソーシャルメディアプラットフォームを選択するためのインターフェースが提供されますが、その他の設定オプションはありません。
- オプションを使用してプレーヤーを設定する
  Studio の Players モジュールの プラグイン セクションを使用すると、設定オプションを指定するためのインターフェースが提供されます。
- 共有 URL をカスタマイズする
  この実装では、コードを使用してソーシャルプラグインを追加します。
プレーヤーの HTML ページにソーシャルメタタグを追加します。
HTML ページ上のメタタグを FaceBook および X 向けに検証します。

ブラウザで Brightcove プレーヤーが配置された HTML ページを開き、プレーヤー内のソーシャル共有アイコンを使用して動画を共有します。

ソーシャルメディアプラグインはページコード内に直接実装することもできますが、これはより高度な方法です。カスタム共有 URL を含めたい場合に、このアプローチを使用することができます。詳細については、共有 URL のカスタマイズセクションを参照してください。

プレーヤーを設定する

ソーシャル共有プラグインを追加するには、以下の手順に従ってください。

PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したい既存のプレーヤーを選択します。
プレーヤーのリンクを選択して、プレーヤーのプロパティを開きます。
左側のナビゲーションメニューから Social を選択します。
次に、共有の有効化 のチェックボックスを選択します。
動画を共有したいソーシャルメディアプラットフォームを選択します。
プレーヤーを公開するには、公開と埋め込み > 変更の公開 を選択します。
開いているダイアログを閉じるには、閉じる を選択します。

JSON エディターを使用して実装する

7.21.0 以降のプレーヤーでは、JSON エディターを使用してプラグインを追加することもできます。以下の手順に従ってください。

Players モジュールで設定したいプレーヤーに移動し、JSON エディタのリンクをクリックします。 "plugins" 配列を編集して、ソーシャル共有プラグインを追加します。

          
            "plugins": [
            {
              "name": "social",
              "is_packaged": true,
              "options": {
                ...
              }
            }
          ]

iFrame 埋め込みを使用しているプレーヤーにソーシャル共有プラグインを実装した場合、生成されるダイレクトリンク URL は常にページ URL になるとは限らず、"players.brightcove.net" のようなプレーヤー URL が表示されることがあります。

これは、親ページに以下のヘッダーディレクティブが設定されているためです。

referrer-policy: no-referrer-when-downgrade

この設定が存在する場合、プラグインは親ページの完全な URL を返します。設定がない場合は、プレーヤーの URL を返します。

オプションを使用してプレーヤーを設定する

より高度な設定を行う場合は、オプションを使用してプラグインを設定できます。以下の手順に従ってください。

PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したい既存のプレーヤーを選択します。
JSON エディタまたは Players モジュール内のソーシャルセクションを使用して、プレーヤーにプラグインを追加します。
JSON エディタに移動し、social プラグインの "options" オブジェクトを編集して、必要なオプションを追加します。この例では、オプションによって次の設定が行われます。
- 2〜3 行目: 動画の名前と説明を設定します。
- 4 行目: 動画プレーヤーとソーシャル共有用メタタグを含む、カスタム Web ページの URL を定義します。
- 5〜6 行目: X において、5 秒のオフセット後から動画の再生を開始できるようにします。
- 7〜13 行目: Facebook、X、Tumblr、Pinterest、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,
            "x": true,
            "tumblr": true,
            "pinterest": true,
            "linkedin": true
          }
        }
```
保存をクリックします。
プレーヤーを公開するには、公開と埋め込み > 変更の公開 をクリックします。
開いているダイアログを閉じるには、閉じる をクリックします。

オプション

プラグイン全般において、options オブジェクトは、初期化をカスタマイズするためにプラグインへデータを渡すために使用されます。指定したオプションはデフォルト値とマージされ、設定オブジェクトが生成されます。この設定オブジェクトは player.socialSettings から参照できます。

`options.title`

動画の共有タイトルです。ほとんどのソーシャルサービスで使用され、オーバーレイに表示されます。

タイプ: String
デフォルト: ''

`options.description`

共有投稿用のカスタム説明文です。一部のソーシャルサービスでサポートされており、オーバーレイに表示されます。

タイプ: String
デフォルト: ''

`options.url`

動画を共有するためのカスタム URL です。この URL は、動画と共有用メタタグを含む Web ページを指します。ソーシャルメディア用メタデータをプレーヤーページに追加する方法については、メタタグセクションを参照してください。

タイプ: String
デフォルト: ''（必要に応じて決定）

`options.embedCode`

動画共有用のカスタム埋め込みコード（Brightcove Player の iframe 埋め込みコード）です。このオプションを使用すると、共有ダイアログ内にある 埋め込みコード フィールドの内容を完全に上書きできます。

このプロパティの値は、getEmbedCode() メソッドを使用して取得できます。

タイプ: String
デフォルト: ''（必要に応じて生成）

`options.embedDimensions`

埋め込みコード内のサイズ指定を有効または無効にします。このオプションは、embedCode がプラグインによって生成される場合にのみ使用できます。

タイプ: Boolean
デフォルト: false

`options.deeplinking`

共有された動画のディープリンクを有効または無効にします。この機能を使用すると、特定のオフセット位置から動画の再生を開始できます。詳細については、Deep Linking ドキュメントを参照してください。

タイプ: Boolean
デフォルト: false

`options.offset`

動画の再生を開始するカスタムオフセット（hh:mm:ss）です。この値は deeplinking オプションと併用され、再生開始位置を定義します。1 分 5 秒のオフセットを指定する場合は、00:01:05 と記述します。

タイプ: String
デフォルト: '00:00:00'

`options.displayAfterVideo`

動画終了後（ended イベントを監視）にオーバーレイを表示するかどうかを設定します。

videojs-endscreen プラグインが必要です。

タイプ: Boolean
デフォルト: false

`options.buttonParent`

共有アイコンをプレーヤー内のどこに表示するかを定義します。文字列の場合はプレーヤーの子コンポーネント名を表し、コンポーネントインスタンスを指定することもできます。

shelf に設定すると共有アイコンはドックに表示されます。controlBar に設定すると、共有アイコンはコントロールバーに表示されます。

タイプ: String|Component
デフォルト: controlBar

`options.removeEmbed`

true に設定すると、iframe の埋め込みコードを無効（非表示）にします。

タイプ: Boolean
デフォルト: false

`options.services`

どのサービスを有効にするかを示すオブジェクトです。サービスのサポートを有効または無効にするには、プロパティを削除するのではなく、値を true または false に設定してください。

タイプ: Object

`options.services.facebook`

Facebook 共有リンクを有効にします。

タイプ: Boolean
デフォルト: true

`options.services.x`

X の共有リンクを有効にします。

タイプ: Boolean
デフォルト: true

`options.services.tumblr`

Tumblr の共有リンクを有効にします。

タイプ: Boolean
デフォルト: true

`options.services.facebook`

Facebook 共有リンクを有効にします。

タイプ: Boolean
デフォルト: true

`options.services.pinterest`

Pinterest の共有リンクを有効にします。

タイプ: Boolean
デフォルト: true

`options.services.linkedin`

LinkedIn の共有リンクを有効にします。

タイプ: Boolean
デフォルト: true

オプションの例:

{
          "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",
          "buttonParent": "controlBar",
          "services": {
            "linkedin": true,
            "pinterest": true,
            "tumblr": true,
            "x": true,
            "facebook": true
          }
        }

ゲッターおよびセッターの設定メソッド

設定オプションを設定および取得するために使用できるメソッドがいくつか用意されています。これらのメソッドはすべて SocialOverlay コンポーネントに関連付けられており、このコンポーネントは videojs.ModalDialog クラスを拡張しています。（このクラスの詳細については、ModalDialog の実装ドキュメントを参照してください。）

ソーシャルプラグインが初期化されると、SocialOverlay コンポーネントのインスタンスが player.socialOverlay から利用できるようになります。ゲッターおよびセッターメソッドを使用する際の一般的な形式は次のとおりです。

player.socialOverlay.methodName()

setDirectLink(string)

使用方法: player.socialOverlay.setDirectLink(string)
目的: ソーシャルオーバーレイで使用される URL を更新します。値を空文字列（''）に設定すると、URL は必要に応じて決定されます。

getDirectLink()

使用方法: player.socialOverlay.getDirectLink()
目的: ソーシャルオーバーレイで使用される URL を返します。

setEmbedCode(string)

使用方法: player.socialOverlay.setEmbedCode(string)
目的: ソーシャルオーバーレイで使用される埋め込みコードを更新します。

getEmbedCode()

使用方法: player.socialOverlay.getEmbedCode()
目的: ソーシャルオーバーレイで使用される埋め込みコードを取得します。

SocialButton

ソーシャルプラグインが初期化されると、SocialButton コンポーネントのインスタンスが player.socialButton から利用できるようになります。このコンポーネントは videojs.Button クラスを拡張しています。

メタタグを生成する

前のセクションで Brightcove プレーヤーをソーシャル共有プラグインに対応させたら、HTML ページにソーシャル用メタタグを追加する準備が整いました。

これらのメタタグにより、ソーシャル共有サイトは投稿内に動画プレーヤーやサムネイルを埋め込むことができます。以下のフォームでは、入力された情報を使用して CMS API を呼び出し、動画データを取得します。その後、固有のデータを基にソーシャル用メタタグを生成します。

Brightcove プレーヤーを含む HTML ページにソーシャルメディア用メタタグを追加するには、以下の手順に従ってください。

以下のフォームにアカウント、プレーヤー、および動画の情報を入力し、Generate Social Tags ボタンを選択します。

データ入力

アカウント情報

サービス URL:	https://edge.api.brightcove.com/playback/v1
Video CloudBrightcove Player アカウント（Publisher ID）:
Policy key:

プレーヤー情報

プレーヤーページの URL:
Web サイトの X @ユーザー名:
プレーヤー ID（Players モジュールより）:
プレーヤーの幅:
プレーヤーの高さ:

動画情報

動画 ID（Media モジュールより）:

ソーシャルタグを生成

Select the code ボタンを押します。次に、選択されたコードをコピーし、HTML プレーヤーページの <head> セクションに貼り付けます。

生成されたソーシャル共有用メタタグ

メタデータコード

Select the code をクリックし、コードをコピーしてページに貼り付けます。

変更を保存します。これで、プレーヤーでソーシャルメディア共有インターフェースを使用する準備が整いました。

HTTPS によるセキュアブラウジングを利用している Facebook ユーザー向けに、HTML プレーヤーページにはセキュアな URL 値（ <meta property="og:video:secure_url" content=""/> ）を指定することを推奨します。

Facebook での共有

現時点では、Facebook のウォール上で動画を再生できるのは Facebook のネイティブプレーヤーのみです。動画を共有し、Facebook のウォール内で再生させたい場合は、Brightcove Social を使用できます。詳細については、Brightcove Social をはじめるドキュメントを参照してください。

Brightcove Player は、ウォール上にリンクを作成し、そのリンクをクリックすると新しいブラウザのタブまたはウィンドウで動画とプレーヤーが開きます。多くの場合、この動作で問題ありません。これを実現するために、Facebook ではページの HTML 内に Open Graph（og）メタタグを使用して動画を定義できます。Facebook 向けに og タグを使用する方法の詳細については、共有のベストプラクティスドキュメントを参照してください。

プレーヤーと動画へのリンクを共有するには、以下の手順に従ってください。

Players モジュールで ソーシャル セクションまでスクロールし、共有を許可するために 共有の有効化 を選択します。
変更を保存し、プレーヤーを公開します。
プレーヤーと動画を含む HTML ページを作成します。
HTML ページ用のソーシャルメタタグを生成し、以下のように更新します。
- 9～11 行目: サイト名、動画のタイトル、およびタイプを video として定義します。
- 12 行目: Brightcove Player を含む動画の URL を指定します。
- 13 行目: 動画のサムネイル画像を指定します。
  メディア URL は有効期限があるため、以下のいずれかを行うことを推奨します。
  - ポスター画像を自社サーバーでホストし、その URL を適切なメタタグで使用する。
  - Playback API からメディア URL を取得し、適切なメタタグを日次で更新するサーバーサイドコードを実装する。
  メディア URL の使用に関する詳細については、CMS および Playback API のベストプラクティスドキュメントを参照してください。
- 14～16 行目: 動画の説明とプレーヤーのサイズを指定します。

<!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"/>
            <!-- X: card/meta-tags -->
            <meta name="x:card" content="player"/>
            <meta name="x:site" content="@username" />
            <meta name="x:title" content="Tiger"/>
            <meta name="x:description" content="Tiger video"/>
            <meta name="x:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"/>
            <meta name="x:player" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media.html"/>
            <meta name="x:player:width" content="640"/>
            <meta name="x:player:height" content="360"/>
            <meta name="x:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-x.html"/>
            <meta name="x: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/oVYJtofHRF_default/index.html?videoId=4172255216001' allowfullscreen allow='encrypted-media'></iframe>
          </body>

以下の手順に従ってください。

Players モジュールで ソーシャル セクションまでスクロールし、共有を許可するために 共有の有効化 を選択します。
変更を保存し、プレーヤーを公開します。
プレーヤーと動画を含む HTML ページを作成します。
HTML ページ用のソーシャルメタタグを生成し、以下のように更新します。
- 92～94 行目: サイト名、動画のタイトル、およびタイプを video として定義します。
- 95 行目: 動画の URL を指定します。
- 96 行目: 動画のサムネイル画像を指定します。
  メディア URL は有効期限があるため、以下のいずれかを行うことを推奨します。
  - ポスター画像を自社サーバーでホストし、その URL を適切なメタタグで使用する。
  - Playback API からメディア URL を取得し、適切なメタタグを日次で更新するサーバーサイドコードを実装する。
  メディア URL の使用に関する詳細については、CMS および Playback API のベストプラクティスドキュメントを参照してください。
- 97～99 行目: 動画の説明とプレーヤーのサイズを指定します。

          <!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"/>
              <!-- X: card/meta-tags -->
              <meta name="x:card" content="player"/>
              <meta name="x:site" content="@username" />
              <meta name="x:title" content="Tiger"/>
              <meta name="x:description" content="Tiger video"/>
              <meta name="x:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"/>
              <meta name="x:player" content="https://players.brightcove.net/3676484087001/f28fbfc5-9153-4c51-ac67-ec6bcad8a28e_default/index.html"/>
              <meta name="x:player:width" content="640"/>
              <meta name="x:player:height" content="360"/>
              <meta name="x:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-custom.html"/>
              <meta name="x:player:stream:content_type" content="video/mp4" />
            </head>
            <body>
              <iframe style='width: 640px;height: 360px;' src='https://players.brightcove.net/3676484087001/oVYJtofHRF_default/index.html' allowfullscreen allow='encrypted-media'></iframe>
            </body>
          </html>

検証セクションで説明されているように、有効なメタタグが設定されていることを必ず確認してください。

Facebook への共有に関する詳細については、以下を参照してください。

プレーヤーのソーシャルプロパティを設定する

X での共有

X で動画を共有するには、X のメタタグを含める必要があります。

現在、指定した時点から動画を再生するためのディープリンクを使用できるソーシャルサイトは X のみです。この機能を使用しない場合は、以下の例にあるプレーヤー URL から time パラメータを外すだけで構いません。

ディープリンク機能を使用するには、Deep Linking ドキュメントで定義されているとおり、クエリ文字列に time パラメータを追加する必要があります。

以下は例です。

Players モジュールで ソーシャル セクションまでスクロールし、共有を許可するために 共有の有効化 を選択します。
変更を保存し、プレーヤーを公開します。
ソーシャルメタタグを生成したら、以下のように更新します。
- 64～67 行目: X カードのタイプを player として定義し、X のサイト、タイトル、説明を指定します。
- 68 行目: 動画のサムネイル画像を指定します。
  メディア URL は有効期限があるため、以下のいずれかを行うことを推奨します。
  - ポスター画像を自社サーバーでホストし、その URL を適切なメタタグで使用する。
  - Playback API からメディア URL を取得し、適切なメタタグを日次で更新するサーバーサイドコードを実装する。
  メディア URL の使用に関する詳細については、CMS および Playback API のベストプラクティスドキュメントを参照してください。
- 69 行目: Brightcove Player の URL を指定します。クエリパラメータで videoId を定義し、動画の 15 秒地点から自動的に再生を開始するようプレーヤーに指示している点に注目してください。これにより、X で動画へのディープリンクが可能になります。
- 70～71 行目: プレーヤーのサイズを指定します。
- 72 行目: Brightcove プレーヤーを含む HTML ページの URL を指定します。

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Social Media Plugin - Deep Linking with X</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"/>
    <!-- X: card/meta-tags -->
    <meta name="x:card" content="player"/>
    <meta name="x:site" content="@username" />
    <meta name="x:title" content="Social Media Plugin"/>
    <meta name="x:description" content="Great Blue Heron"/>
    <meta name="x:image" content="https://solutions.brightcove.com/bcls/assets/images/Great-Blue-Heron.png"/>
    <meta name="x:player" content="https://players.brightcove.net/1752604059001/2c7eac7c-181c-41d1-aae8-4a5107c05ee2_default/index.html?videoId=4172255216001#t=00h00m15s&autoplay=true"/>
    <meta name="x:player:width" content="640"/>
    <meta name="x:player:height" content="360"/>
    <meta name="x:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-twitter.html"/>
    <meta name="x:player:stream:content_type" content="video/mp4" />
  </head>
  <body>
    <iframe style='width: 640px;height: 360px;' src='https://players.brightcove.net/1752604059001/oVYJtofHRF_default/index.html?videoId=4172255216001' allowfullscreen allow='encrypted-media'></iframe>
  </body>

以下は例です。

Players モジュールで ソーシャル セクションまでスクロールし、共有を許可するために 共有の有効化 を選択します。
変更を保存し、プレーヤーを公開します。
ソーシャルメタタグを生成したら、以下のように更新します。
- 139～142 行目: X カードのタイプを player として定義し、X のサイト、タイトル、説明を指定します。
- 143 行目: 動画のサムネイル画像を指定します。
  メディア URL は有効期限があるため、以下のいずれかを行うことを推奨します。
  - ポスター画像を自社サーバーでホストし、その URL を適切なメタタグで使用する。
  - Playback API からメディア URL を取得し、適切なメタタグを日次で更新するサーバーサイドコードを実装する。
  メディア URL の使用に関する詳細については、CMS および Playback API のベストプラクティスドキュメントを参照してください。
- 144 行目: Brightcove Player の URL を指定します。クエリパラメータで videoId を定義し、動画の 15 秒地点から自動的に再生を開始するようプレーヤーに指示している点に注目してください。これにより、X で動画へのディープリンクが可能になります。
- 145～146 行目: プレーヤーのサイズを指定します。
- 147 行目: Brightcove プレーヤーを含む HTML ページの URL を指定します。

  <!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Social Media Plugin - Deep Linking with X</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"/>
    <!-- X: card/meta-tags -->
    <meta name="x:card" content="player"/>
    <meta name="x:site" content="@username" />
    <meta name="x:title" content="Social Media Plugin"/>
    <meta name="x:description" content="Tiger video"/>
    <meta name="x:image" content="https://solutions.brightcove.com/bcls/assets/images/Tiger.jpg"/>
    <meta name="x:player" content="https://players.brightcove.net/3676484087001/f28fbfc5-9153-4c51-ac67-ec6bcad8a28e_default/index.html?t=00h00m15s&autoplay=true"/>
    <meta name="x:player:width" content="640"/>
    <meta name="x:player:height" content="360"/>
    <meta name="x:stream" content="https://solutions.brightcove.com/bcls/brightcove-player/social-plugin/social-media-perform.html"/>
    <meta name="x:player:stream:content_type" content="video/mp4" />
  </head>
  <body>
    <iframe style='width: 640px;height: 360px;' src='https://players.brightcove.net/3676484087001/oVYJtofHRF_default/index.html' allowfullscreen allow='encrypted-media'></iframe>
  </body>
  </html>

validate セクションで説明されているように、有効なメタタグが設定されていることを必ず確認してください。

X のメタタグ設定に関する詳細については、以下を参照してください。

検証

ページにメタタグを含める手順を完了したら、Facebook と X の両方でページを検証できます。いずれかの検証プロセスでエラーが発生した場合は、必要に応じてプレーヤー設定を更新してください。

Facebook

Facebook の場合は、Facebook Debugger にアクセスし、メタタグを含むページの URL を貼り付けて Debug をクリックし、検証します。

X

X の場合は、Card Validator にアクセスし、メタタグを含むページの URL を貼り付けて Preview card をクリックし、検証します。検証するメリットとして、X から Web サイトの確認を求められ、その後 X Cards の承認待ちリストに登録されます。

共有 URL をカスタマイズする

ソーシャルメディアプラグインのより高度な実装として、Players モジュールの Videoタグ埋め込みコード を使用する方法があります。これにより、ページコード内から設定オプションを渡せるようになります。この方法を採用する理由の 1 つは、ページ上のプレーヤーとは異なるプレーヤーを共有するために、カスタムの embedCode 値を指定できる点です。

カスタムコードを使用してプラグインを実装するには、以下の手順に従ってください。

PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したい既存のプレーヤーを選択します。
プレーヤーのリンクを選択して、プレーヤーのプロパティを開きます。
左側のナビゲーションメニューから ソーシャル を選択し、チェックボックスがオンになっていないことを確認します。
左側のナビゲーションメニューから プラグイン を選択します。
スタイルシート を選択し、スタイルシートの追加 ボタンを選択します。

CSS URL に以下を入力します。

https://players.brightcove.net/videojs-social/3/videojs-social.css

スクリプト を選択し、スクリプトの追加 ボタンを選択します。

JavaScript URL に以下を入力します。

https://players.brightcove.net/videojs-social/3/videojs-social.min.js

保存を選択します。
プレーヤーへの変更を公開します。

これでプレーヤーにはソーシャルメディア共有機能のためのコード一式が含まれますが、プラグインの自動初期化や共有ボタンの作成は行われません。

作業中のプレーヤーを関連付け、Videoタグ コードを HTML ページにコピーします。ブラウザでページを実行すると、プレーヤー内に共有ボタンが表示されないことに気付くはずです。ソーシャルプラグインが初期化されると表示されます。

HTML ページのコードに、以下のように JavaScript コードを追加します。
- 23～24 行目: プレーヤーへの参照を取得します。
- 25～40 行目: ソーシャル共有プラグインのオプションを設定します。詳細については、プロパティセクションを参照してください。
- 28 行目: 共有 URL を設定します。
- 41 行目: 指定したオプションでソーシャルプラグインを初期化します。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Social Media Plugin</title>
</head>

<body>
<div style="max-width: 960px;">
  <video-js
    id="myPlayerID"
    data-account="1752604059001"
    data-player="vQgKqFD0n"
    data-embed="default"
    controls=""
    data-application-id=""
    class="vjs-fluid"
    style="padding-top: 56.25%;">
  </video-js>
</div>
<script
  src="//players.brightcove.net/1752604059001/vQgKqFD0n_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,
            "x": true,
            "tumblr": true,
            "pinterest": true,
            "linkedin": true
          }
        };
        myPlayer.social(options);
      });
    </script>

</body>
</html>

HTML ページのコードに、以下のように JavaScript コードを追加します。
- 147 行目: プレーヤーへの参照を取得します。
- 149～164 行目: ソーシャル共有プラグインのオプションを設定します。詳細については、Options セクションを参照してください。
- 153 行目: Smart Player を使用する共有 URL を設定します。このプロパティを使用して、共有 URL を任意の Brightcove Player または Smart Player に設定できます。
- 166 行目: 指定したオプションでソーシャルプラグインを初期化します。

  <!DOCTYPE html>
  <head>
      <meta charset="utf-8">
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <title>Social Media Plugin</title>
  </head>
  
  <div style="max-width: 640px;">
    <video-js 
      data-account="1752604059001" 
      data-player="rklk1S3Zdz" 
      data-embed="default" 
      controls="" 
      data-video-id="3851380732001" 
      data-playlist-id="" 
      data-application-id="" 
      class="vjs-fluid">
    </video-js>
  </div>
  <script src="https://players.brightcove.net/1752604059001/rklk1S3Zdz_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://player.support.brightcove.com/plugins/samples/social-media.html",
            "embedCode": "<iframe src='http://bcove.me/niqx01er'>",
            "deeplinking": true,
            "offset": "00:00:05",
            "services": {
              "facebook": true,
              "x": true,
              "tumblr": true,
              "pinterest": true,
              "linkedin": true
            }
          };
          myPlayer.social(options);
        });
      </script>
  
  </body>
  </html>

プレーヤー内にソーシャル共有ボタンが表示されるはずです。コントロールバー内の共有アイコンを確認してください。
これで、プレーヤーページにソーシャルメタタグを追加する準備が整いました。これらのタグを生成するには、メタタグセクションを参照してください。

カスタムサービス

このプラグインには、6 つの主要なソーシャルメディアプラットフォームに対する組み込みサポートがありますが、カスタムサービスを使用して他のサービスを追加することもできます。そのためには、options.customServices オブジェクトを設定します。このオブジェクトは、カスタムサービスオブジェクトの配列です。以下に簡単な設定例を示し、その後に例の詳細を説明します。

次の例では 3 つのボタンが追加されます。1 つ目と 2 つ目は Xing と WhatsApp 用のボタンです。WhatsApp ボタンはモバイル環境でのみ表示されます。これら 2 つの例では、アイコンとして Font Awesome を使用しています。これは、すでにそのフォントを使用しているページにプレーヤーをインページ埋め込みしている場合に便利ですが、他のスタイルを使用することも可能です。3 つ目は Facebook のフィード API を使用した Facebook 共有ボタンで、Facebook アプリ ID を含めてアトリビューションを付与できます。この方法を使用する場合は、通常の Facebook ボタンを無効にする必要があります。

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

以下は、カスタムサービスオブジェクトのプロパティを定義します。

customService.title

タイプ: string
共有先のタイトルです。

customService.className

タイプ: string
ボタンに追加されるクラス、またはスペース区切りのクラス一覧です。

customService.classSuffix

タイプ: string
このサフィックスは vjs-icon- に付加され、ボタンのクラス名を生成します。className が指定されていない場合にのみ使用されます。Video.js のフォントには追加のソーシャル宛先アイコンが含まれていないため、標準の宛先のいずれかを置き換える場合にのみ有用です。

customService.hrefTemplate

タイプ: string
共有 URL を生成するための文字列テンプレートです。{{{url}}、{{poster}}、{{title}}、{{description}} といったマクロを含めることができます。関数を指定できない場合（例: Player Management API に JSON 文字列としてオプションを指定する場合）には、customService.href の代わりに使用できます。

customService.href

タイプ: string
共有 URL を生成する関数です。オブジェクトを受け取り、文字列を返す必要があります。特に指定しない場合、この値は hrefTemplate から生成されます。

customService.bgColor

タイプ: string
背景色として適用される任意の CSS カラー値です。CSS でボタンをスタイル設定している場合は必須ではありませんが、既存のスタイルシートでアイコンを装飾する場合などに便利なため提供されています。

customService.mobileOnly

タイプ: boolean
デフォルト: false
true に設定すると、ボタンは Android および iOS のみで表示されます。

既知の問題

エンドスクリーンに短い説明が表示されない

動画の再生中に共有ボタンをクリックすると、動画の 短い説明 が表示されますが、共有情報を含むエンドスクリーンでは 短い説明 は表示されません。これは仕様どおりの動作です。

ボタンのキーボードナビゲーション - OS X の Firefox

OS X 上の Firefox では、デフォルトではテキストボックスおよびリスト要素のみが Tab キーによる移動対象となります。ソーシャルプラグインのボタンはリンク要素であるため、System Preferences > Keyboard > Shortcuts で All controls を有効にしない限り、キーボードによるナビゲーションはできません。

変更履歴

v5.0.2 までの過去のリリースノートおよび変更履歴については、Social Sharing プラグインのリリース情報を参照してください。

v5.0.2 以降に行われた主な変更点は、Brightcove Player リリースノートに記載されます。

ソーシャル共有プラグイン

例

概要

プレーヤーを設定する

JSON エディターを使用して実装する

オプションを使用してプレーヤーを設定する

オプション

options.title

options.description

options.url

options.embedCode

options.embedDimensions

options.deeplinking

options.offset

options.displayAfterVideo

options.buttonParent

options.removeEmbed

options.services

options.services.facebook

options.services.x

options.services.tumblr

options.services.facebook

options.services.pinterest

options.services.linkedin

オプションの例:

ゲッターおよびセッターの設定メソッド

setDirectLink(string)

getDirectLink()

setEmbedCode(string)

getEmbedCode()

SocialButton

メタタグを生成する

データ入力

生成されたソーシャル共有用メタタグ

Facebook での共有

X での共有

検証

Facebook

X

共有 URL をカスタマイズする

カスタム サービス

以下は、カスタム サービス オブジェクトのプロパティを定義します。

customService.title

customService.className

customService.classSuffix

customService.hrefTemplate

customService.href

customService.bgColor

customService.mobileOnly

既知の問題

エンドスクリーンに短い説明が表示されない

ボタンのキーボード ナビゲーション - OS X の Firefox

変更履歴

`options.title`

`options.description`

`options.url`

`options.embedCode`

`options.embedDimensions`

`options.deeplinking`

`options.offset`

`options.displayAfterVideo`

`options.buttonParent`

`options.removeEmbed`

`options.services`

`options.services.facebook`

`options.services.x`

`options.services.tumblr`

`options.services.facebook`

`options.services.pinterest`

`options.services.linkedin`

カスタムサービス

以下は、カスタムサービスオブジェクトのプロパティを定義します。

ボタンのキーボードナビゲーション - OS X の Firefox