Facebookウォールへプレイヤーを埋め込むには

(Video Cloudのすべてのエディションでご利用頂けます)

Facebookをはじめとするソーシャルメディアの勢いはとどまるところを知りません。企業もオフィシャルな情報をソーシャルメディア上で流すなど、ソーシャルメディアは企業活動の一つの場所となっています。当然、ソーシャルメディアで動画を活用する企業の事例も出てきています。
Debenhamsはイギリスなどでアパレル系のショップを展開しているブランドです。彼らのサイト上ではビデオコマースを展開していますが、そのプレイヤーのFacebookボタンを押すと、Facebookにプレイヤーが共有され、ウォール内で動画が再生されます。
また、それだけにとどまらず、元々のプレイヤーが持っていたコマース機能もついてくるので、『友達が勧めている動画内で紹介されているDebenhamsのアイテムを買う』といった導線までFacebook上で実現しています。


図1: Facebook上でのDebenhamsのプレイヤー
 

Debenhamsプレイヤーのようなコマース機能部分は別途開発が必要とはなりますが、Video Cloudのプレイヤーをウォール内に設置し、動画を再生させるだけであれば、以下の2つの手順で行えます。
 

1. 動画が置いてあるページ(Facebookに共有されるページ)のHTMLの書き換え
Facebookの近況欄にURLを入力すると、FacebookはそのURLを先読みし、ページ内に『Facebookウォール上で利用するプレイヤーの指示があるか、動画名は何であるか』などのメタデータ(情報)を取得し、そのメタデータを元にウォール上にプレイヤーを埋め込みます。
従って、Facebookに共有されるページのHTMLソースコードに、『Facebookウォールに動画プレイヤーを埋め込むための記述』を追加する必要があります。
具体的には、以下のようなmetaタグを、ページのheadタグ内に記述する形になります(OpenGraph準拠のタグです)。

<meta property="og:title" content="{動画名}" />
<meta property="og:description" content="{動画の説明}" />
<meta property="og:type" content="article" />
<meta property="og:image" content="{ウォールに表示するサムネイル画像のURL}" />
<meta property="og:video" content="http://c.brightcove.co.jp/services/viewer/federated_f9/{プレイヤーID}?isVid=1&isUI=1&publisherID={パブリッシャーID}&playerID={プレイヤーID}&domain=embed&videoId={動画ID}" />
<meta property="og:video:secure_url" content="https://secure.brightcove.co.jp/services/viewer/federated_f9/{プレイヤーID}?isVid=1&isUI=1&publisherID={パブリッシャーID}&playerID={プレイヤーID}&domain=embed&secureConnections=true&videoId={動画ID}" />
<meta property="og:video:width" content="{動画プレイヤーの幅px。最大値398}" />
<meta property="og:video:height" content="{動画プレイヤーの高さpx。最大値460}" />
<meta property="og:video:type" content="application/x-shockwave-flash" />

{動画名}』など、波括弧の部分を、実際の値に変更し、ページ内に記載してください。
そうすることで、このページが共有された際に、og:videoで指定した動画プレイヤーが置かれるようになります。
 

2. プレイヤーのバイラル機能(Shareボタン)で共有するURLの変更
ブライトコーブのプレイヤーには標準でFacebookボタンがついています。何も設定せずにこのボタンを利用すると、link.brightcove.co.jp上のVideo CloudアドレスがFacebookに共有されてしまいます。このままでは、手順1で記載したメタデータをFacebookが読み取れないので、Facebookボタンで共有されるURLを手順1手を加えたページに変更する必要があります。
変更する方法はいくつかありますが、一番確実なものはプレイヤー埋め込みコードに”共有するURL”を付け足す方法です。
以下のように、埋め込みコードにparamタグを付け足し、linkBaseURLにFacebookボタンを押した際に共有されたいURLを記載しておきます(通常はプレイヤーが置いてあるURLを記載しておきます)。
以下の例では、「http://example.com/go/to/here」が共有されます。実際には、手順1で編集を加えたHTMLのURLにします。

============================
<object id="myExperience" class="BrightcoveExperience">
  <param name="bgcolor" value="#FFFFFF" />
  <param name="width" value="798" />
  <param name="height" value="465" />
  <param name="playerID" value="1234567" />
  <param name="publisherID" value="7654321"/>
  <param name="isVid" value="true" />
  <param name="isUI" value="true" />
  <param name="@videoPlayer" value="12121212" />
  <param name="linkBaseURL" value="http://example.com/go/to/here" />
</object>
============================
 

ベストプラクティス
手順1でプレイヤーIDを指定していますが、そのプレイヤーIDに指定するプレイヤーはソーシャルメディア専用のプレイヤーにしておくとよいでしょう。
そうすることで、Analyticsモジュールのプレイヤー別パフォーマンス比較機能(Professional版以上)を利用でき、自社メディア上とソーシャルメディア上での動画の見られ方の違いを比較できます。


図2: Analyticsではプレイヤー別にデータの比較が行える
 

また、BEMLを使って、ソーシャルメディア上のプレイヤーのみにロゴ画像を乗せておくということも出来るので、ただ単にソーシャルメディア上で映像を流すだけでなく、その映像をフックにブランドの認知向上などに繋げることも出来ます。