PHPで「いいね！」してくれたファンを振り分ける
Facebookページの「いいね！」を促進する仕組みとして、「ファンゲート」があります。ファンゲートとは、「いいね！」してくれたファンだけが見られるページのことで、プレゼントの申し込みフォームやクーポンコードといった特典を用意する企業が多いようです。たとえば、レノボ・ジャパンのFacebookページは以下のようなファンゲートを実装しています。
レノボ・ジャパンのファンゲート。ファンにだけクーポンコードを表示する仕組みを実装している
今回は、Web Professionalのプレゼントページを改造し、「いいね！」してくれたファンにだけ応募フォームを表示するようにしましょう。
プレゼントページ。ファンだけが応募できるように、「いいね！」をクリックしたユーザーにのみフォームを表示する
Web Professionalのプレゼントページは前回の「iframeを使ったウェルカムページ」と同じ方法で作成しています。
まず、プレゼントページのアプリの設定画面で「アプリの秘訣」（英語ではApp Secret）コードを控えておきます。
アプリの秘訣（App Secret）を控えておく
次に、ファンとファン以外で異なるコンテンツを表示するために、4つのファイルを用意します。
- signed_request.php
- ユーザーが「いいね！」してくれているかを判断するプログラム
- index.php
- signed_request.phpの結果を受けてユーザーを振り分けるプログラム
- fan.html
- 「いいね！」してくれているファンにだけ表示するページ
- not_fan.html
- ファンでないユーザーに対して「いいね！」するように促すページ
Facebookページを訪れたユーザーがファンか否かは、Facebookが開発者向けに公開しているコードを利用します。
以下のPHPのコードを「signed_request.php」として保存します。
<?php function parse_signed_request($signed_request, $secret) { list($encoded_sig, $payload) = explode('.', $signed_request, 2); // decode the data $sig = base64_url_decode($encoded_sig); $data = json_decode(base64_url_decode($payload), true); if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') { error_log('Unknown algorithm. Expected HMAC-SHA256'); return null; } // check sig $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true); if ($sig !== $expected_sig) { error_log('Bad Signed JSON signature!'); return null; } return $data; } function base64_url_decode($input) { return base64_decode(strtr($input, '-_', '+/')); } ?>
続いて、「index.php」を用意します。index.phpは、ユーザーがプレゼントページにアクセスしたときに最初に読み込まれるファイルです。index.phpにインクルードされた「signed_request.php」の実行結果を受けて、ファンとファン以外に対して表示するコンテンツを出し分けます。
<?php include_once('signed_request.php'); if ( isset($_POST['signed_request']) ) { $fb_data = parse_signed_request($_POST['signed_request'], 'アプリの秘訣'); if( $fb_data['page']['liked'] ){ include_once('fan.html'); } else { include_once('not_fan.html'); } } ?>
コード内にある「アプリの秘訣」には、前に控えておいた「アプリの秘訣」（App Secret）コードを入れてください。アプリの秘訣コードを入力することでFacebookから正しいユーザー情報を受け取れます。
if( $fb_data['page']['liked'] ){
include_once('fan.html');
ここでは、「いいね！」してくれているファンに対する処理を記述します。今回は「fan.html」を表示させています。
} else {
include_once('not_fan.html');
}
ここでは、まだ「いいね！」してくれていないファン以外に対する処理を記述します。今回は「not_fan.html」を表示させています。
「いいね！」をクリックしていないユーザーの場合にはファン以外向けのコンテンツを表示する
なお、PHPで読み込むコンテンツ（fan.html/not_fan.html）の高さが800pxを超える場合は、スクロールバーが表示されます。スクロールバーの表示を回避するには、index.phpにJavaScript SDKを読み込み、JavaScriptでiframeの高さ（キャンバスサイズ）を変更する必要があります。前のページの解説を参考に設定してください。
作成したファイルをFTPなどでWebサーバーにアップロードし、前回説明した方法でiframeアプリとして登録するとファンゲートの完成です。一度「いいね！」を外して表示の違いを確認してみてください（もう１度「いいね！」するのを忘れないでくださいね）。
◆
いかがだったでしょうか。今回は、iframeを使って追加したタブをカスタマイズする方法を紹介しました。JavaScript SDKやPHPが出てきたことで難易度はやや上がってしまいましたが、紹介した方法を使うことでより本格的なFacebookページを作成できます。ぜひ、挑戦してみてください。
著者：加藤 洋（かとう・ひろし）
株式会社TAM アートディレクター兼ソーシャルメディア・プランナー。大手通信会社キャンペーンサイト、国内高級車メーカープロモーションサイト、大手通販会社ECサイトなどを数多くWebプロジェクトを手掛ける。FacebookやTwitterなどソーシャルメディア活用のノウハウ蓄積と情報発信を行なうサイト「Social Media 360.jp［役に立つソーシャルメディア情報配信サイト］」を運営中。
著者：梅田恭子（うめだ・きょうこ）
株式会社TAM マークアップエンジニア。自社サービス、大手消費財メーカーサイト、大手通販会社コミュニティサイト、各種学校紹介サイト、月刊情報誌サイトなど数多くのWebプロジェクトを手掛ける。TAMテクニカルチームがテーマ別の技術グループに分かれて情報発信を行なうサイト「Tips Note」を運営中。
