大統領選以降、Facebookのライブ配信機能を使った投票コンテンツが人気を集めています。
日本でもニュースメディアやバイラルメディアの投稿、企業のキャンペーン投稿などでも頻繁に目にするようになりました。
投票コンテンツでは、いいね、超いいねなどのボタンを押すリアクションを促すことで、大きな反応を獲得することができます。
今回は、この投票機能のライブ配信にチャレンジしてみましょう！非エンジニアの私でも、2-3時間で準備・配信できましたので、是非みなさんもやってみてください。
配信の仕組みと概要
今回実践する投票ライブ配信の仕組みはざっくり説明すると以下のようになります。
・配信するのはWEBサーバーにアップしたHTMLソース
・HTML側ではJavaScriptでFacebookから得た投稿のリアクションの数を表示する
・ストリーミングソフトでアップしたWEBページをキャプチャして配信
それでは、これらの仕組みを構築する手順を解説してまいります。
始める前の事前準備
この施策を実行するにあたり、以下の通りいくつかの準備が必要です。
これらについては順を追って説明してまいります。
（１）ライブ配信を行うためのFacebookページ
（２）HTML・JavaScript・画像などWEBページの素材
（３）WEBページを配置するためのホスティングサーバーとドメイン
（４）ライブ配信動画の予約投稿
（５）PCからライブ配信するためのストリーミングソフト
（６）HTMLの設定を行うための各種コード
（１）ライブ配信を行うためのFacebookページ
配信を行うためのFacebookページが必要です。
Facebookページの作成方法は以下を参考にしてください。
（２）HTML・JavaScript・画像などWEBページの素材
こちらについてはbratzaさんが大統領選の投票配信ページのサンプルソースコードを公開しています（素晴らしい！）。
How Presidential Candidates helped me earn Facebook likes is AMAZING! – Just Marketing – Bratza.com
画像や背景を差し替えて利用することができます。お好きな見た目に修正してあげてください。
今回はとりあえずこんな感じにしてみました。
これとは別に、HTML内の指定のコードをいくつか個別に修正する必要がありますが、こちらについては後述します。
（３）WEBページを配置するためのホスティングサーバーとドメイン
（２）で準備した素材を自身のサーバーへFTPでアップロードする必要があります。
フォルダごとまるごとアップロードしてあげてください。
（４）ライブ配信動画の予約投稿
Facebookページを開き、上部のナビゲーションから「投稿ツール」をクリック、左のサイドバーから「動画」をクリックすると、右上に「＋ライブ動画を作成」が現れるので、こちらをクリックします。
ボタンを押すと以下の通りストリームキーが表示されます。配信ソフト側の設定で使用するため、メモしておいてください。タイトルとタグを設定して予約投稿したら投稿の準備は終了です。
（５）PCからライブ配信するためのストリーミングソフト
配信ソフトはブラウザを配信できれば何でも良いのですが、今回は、OBS（Open Broadcaster Software）という無料配信ソフトウェアを使用します。なお、今回はブラウザ画面を配信する必要があるので、OBSをインストールしたあとに、「CLR Browser Source Plugin」というプラグインを追加でダウンロードして、OBSのインストールフォルダ（プログラムファイル）の中にあるプラグインフォルダに格納しておきます。
ソフトウェア：Open Broadcaster Software
プラグイン：CLR Browser Source Plugin
OBSを起動したら、「設定」→「配信」で、サービス：「Facebook Live」を選択して、先ほど取得したストリームキーを貼り付けます。
Webページの縦横比をスクエアなどに修正している場合は、別途「出力」から解像度を修正してあげます。
（６）HTMLの設定を行うためのコードの取得
HTML内でFacebookの投稿に関する値を取得するためには、①ページID、②ポストID、③アプリアクセストークンの３つの値を取得しておく必要があります。
1つ目の「①ページID」はFacebookページに紐づくIDです。
「Find your Facebook ID」というページから確認することができます。
２つ目の「②ポストID」は投稿記事に紐づくIDです。
投稿した記事のIDは（４）でライブ動画の予約投稿した際に採番されるものを使用します。
タイムライン上で投稿記事の日付の箇所を別タブで開いてみると、
https://www.facebook.com/（ページURL）/videos/（ポストID）/
というURLが表示されますので、こちらのポストIDを使用します。
３つ目の「③アプリのアクセストークン」は、アプリの認証情報です。
これを作成するためには、Facebookアプリの作成後、アプリのアクセストークンを取得する必要があります。
まずFacebookのディベロッパーツールにアクセスし、ログイン後に右上から新しいアプリの作成を選びます。
表示名（なんでもいいです）、連絡先メールアドレスを入力、カテゴリを選択したら、ダッシュボードに遷移するので、左サイドメニューの「設定」→「ベーシック」から、アプリドメインの入力を行い、変更を保存します。
※「アプリドメインはセキュアキャンバスページのURL、モバイルサイトのURL…次のドメインを修正してください」というエラーが表示される場合は、下部の「プラットフォームを追加」から、ウェブサイトを選択して、ドメインを入力してください。
保存ができたら、左サイドメニューの「アプリレビュー」を選択後、「（アプリ名）を公開しますか？」という箇所を「はい」にして公開します。
続いて、「Graph APIエクスプローラー」にアクセスし、アプリケーションを選択（先ほど公開したアプリ）したあと、Get Tokenのプルダウンで、Get App Tokenを選択すると、アクセストークンの欄にアプリアクセストークンが表示されるのでこちらをメモしてください。
これで３つの必要な情報が揃いました。ここまで来たら９割終わったも同然です！
配信の直前の作業
ここまでの準備が完了したら、最後にindex.htmlを修正して、いよいよ配信です。
HTMLファイルの修正
index.htmlをエディタで開き、「 {post_id_goes_here} 」と記載のある3箇所を「ページID_ポストID」に差し替えます。連結する際には「_」を入れてください。
次に、「 {application_access_token_goes_here} 」と記載のある箇所を、「アプリアクセストークン」に差し替えます。
続いて、以下の2点を修正します。
・アクセストークンの記入箇所の後ろにある
「,function(res)」の前にアポストロフィ「’」が抜けているので追記
・194行目から204行目の「setInterval」の記述をまるごと削除
修正が完了したら再度FTPでindex.htmlをアップします。
※11月15日時点で公開されているソースをベースに記述しています
※インデクックスしたくない場合は、metaタグでnoindexの記述を追記してください
OBSから配信開始
OBSで、次にメイン画面下部のソースから、「BrowserSource」を選択し、「URL」の欄にindex.htmlが格納されているサーバーのURLパスを入力します。縦横比を変更している場合は、ここでも「Width」と「Height」を変更してあげてください。
※BrowserSourceの選択肢が表示されない場合は、プラグインが正しく格納されていない可能性がありますので、再度確認してください
※投票開始後、ブラウザ側では数値が更新されているのに、OBSで更新されてない場合は、ソースをリフレッシュ（再設定）してください
ソース画面にブラウザの様子が正しく映っていれば、設定は完了です。OBSの配信開始を押してライブの配信開始を待ちましょう。
配信完了！
無事にライブ配信をすることができました。
終わりに
Facebookの広告マネジメントツールを提供している会社のパッケージソリューション（有料）を使うと、アプリの作成やHTMLの成形など、もう少し手順を省いて簡単にできるようですので、これは効果がありそう！興味のある！量産したい！という方はご覧になってください。
FastTony.esでの配信方法
Facebook Post Live Reactions – vote live on your fanpage
