今日からできるFacebookファンページ制作＆運用ガイド ― 第3回

JS+PHPでFacebookページをカスタマイズ！

2011年03月28日 11時00分更新

加藤洋・梅田恭子／TAM

ツイートする

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」を運営中。

前へ 1 2 3 次へ

カテゴリートップへ