Facebookの新機能「Live Stream Box」を設置してみる
Facebookがこのたび新しく搭載した「Live Stream Box」。もとはCNNなどと共同で行ったイベント時に使われていていたウィジェットですが、これが一般公開されました。
FriendFeedなどと同様、こうしたリアルタイムのウェブサービスは個人的に大好き。せっかくですので設定の手順を書いてみます。
Live Stream Boxはリアルタイムかつイベント的用途にフォーカスを当てたサービスです。個別のブログエントリーに対するコメントを受け付けたいなどの用途であれば、Inside Facebookなどで採用されているComments Boxというサービスもあります。
数百万人同時のコミュニケーションが可能
Live Streaming Boxは、Facebook Connectを利用して外部のウェブサイトにウィジェットを設置し、そこでチャットすることでそのサイトを見ている人とコミュニケーションできるとともに、その発言の内容を同時にFacebook本体にも送信するというものです。
ウェブサイトはもちろん、Facebook内のそれぞれのアプリケーション内でも使うことができ、アプリ内での汎用のチャットシステムとしても機能することでしょう。
数百万人の同時アクセスをさばけるとのことで、相当大規模なウェブサイトでも対応できるそうです。
Live Stream Boxを作るには、ロゴ・アイコン画像（16ピクセル×16ピクセルと99ピクセル×22ピクセルの2種類）が必要です。また、サイト上にHTMLファイルをアップロードする権限が必要なのと、ヘッダーを書き換えることも必要になります。
「友達」タブでは、Facebook本体で見られる通常のニュースフィードを見ることができる
（１）APIキーを取得
それでは一通り設定してみます。まずはFacebookアプリケーションを作るときと同様に、APIキーを取得します。
http://www.facebook.com/developers/createapp.php
アプリケーション名を入力。サイト名とかイベント名でいいでしょう。
すると、次の画面でAPIキーが表示されますので、これをメモっておきます。
（２）ロゴのアップロード、URLの設定
アプリケーションの設定画面で、16ピクセル×16ピクセルのアイコンと、99ピクセル×22ピクセルのロゴ画像をそれぞれアップロードします。アイコンは「一般」→「基本情報」に、ロゴは「コネクト」→「Facebookコネクトのロゴ」にあります。
「コネクト」→「Facebookコネクトの設定」→「コネクトURL」の箇所に、Live Stream Boxを貼りたいサイトのURLを入力します。Boxは複数ページに貼れますのでディレクトリやファイル名が一致している必要はありませんが、同一ドメイン下でなければなりません。また、このURLは個々の発言で「〜から」と表示される部分のリンク先にもなります。
入力したら、ウィンドウ最下部の「変更を保存」をクリックしてからウィンドウを閉じます。
（３）ファイルの作成・アップロード
こちらのサイトを参考に、クロスドメインで通信を許可するためのHTMLファイル「xd_receiver.htm」を作成し、使いたいドメイン先にアップロードします。こちらのファイルを直接ダウンロードしてそのまま使っても構いません（ただし同一ドメインに置かないといけないため、直リンクしても使えません）。
（４）HTML&JavaScriptコードの挿入
Live Stream Boxを表示したいHTMLファイルに、次の2点の変更を加えます。
(a)<html>のタグ部分に、Facebook専用のタグを使えるようにするための属性を付記します（下記太字下線部分）。
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”>
(b)<body>タグ内のLive Stream Boxを表示したい箇所に下記のコードを挿入します。
<script src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php” type=”text/javascript”></script>
<fb:live-stream width=”<widthInPixels>” height=”<heightInPixels>”></fb:live-stream>
<script type=”text/javascript”> FB.init(“YOUR_API_KEY_HERE“, “<path from web root>/xd_receiver.htm”); </script>
ここでYOUR_API_KEY_HEREの部分にはさきほど取得したアプリケーションAPIのキーを入力します。
path from web rootの部分は表示しようとしているファイルからみたxd_receiver.htmの相対パスを入力します。
下記に実際に貼り付けてみます。
ここにも設定してあります。発言してみました。
発言はFacebook本体にも反映されます。「〜から」という部分をクリックするとそのサイトにリンクします。
下記のページにも置いておきます。
関連リンク：
Live Stream Box – Facebook Developer Wiki
Facebook Launches “Live Stream” Widget for All Publishers, Networks, and Developers
Facebook Launches Live Stream For All Websites And Developers
Comments boxの設置を試みてるのですが、アプリケーション作成をするとアカウント認証で、携帯かクレジットカードの番号を追加して下さいと出るのですが、これを追加しないと出来ないのでしょうか。