このページの本文へ

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

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

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

加藤 洋・梅田恭子/TAM

  • この記事をはてなブックマークに追加
本文印刷

PHPで「いいね!」してくれたファンを振り分ける

 Facebookページの「いいね!」を促進する仕組みとして、「ファンゲート」があります。ファンゲートとは、「いいね!」してくれたファンだけが見られるページのことで、プレゼントの申し込みフォームやクーポンコードといった特典を用意する企業が多いようです。たとえば、レノボ・ジャパンのFacebookページは以下のようなファンゲートを実装しています。

[画像:レノボ・ジャパン株式会社]
レノボ・ジャパンのファンゲート。ファンにだけクーポンコードを表示する仕組みを実装している

 今回は、Web Professionalのプレゼントページを改造し、「いいね!」してくれたファンにだけ応募フォームを表示するようにしましょう。

[画像:ASCII.jp Web Professional プレゼント.png]
プレゼントページ。ファンだけが応募できるように、「いいね!」をクリックしたユーザーにのみフォームを表示する

 Web Professionalのプレゼントページは前回の「iframeを使ったウェルカムページ」と同じ方法で作成しています。

 まず、プレゼントページのアプリの設定画面「アプリの秘訣」(英語ではApp Secret)コードを控えておきます。

[画像:開発者.png]
アプリの秘訣(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」を表示させています。

[画像:ASCII.jp Web Professional_いいねまだ.png]
「いいね!」をクリックしていないユーザーの場合にはファン以外向けのコンテンツを表示する

 なお、PHPで読み込むコンテンツ(fan.html/not_fan.html)の高さが800pxを超える場合は、スクロールバーが表示されます。スクロールバーの表示を回避するには、index.phpにJavaScript SDKを読み込み、JavaScriptでiframeの高さ(キャンバスサイズ)を変更する必要があります。前のページの解説を参考に設定してください。

 作成したファイルをFTPなどでWebサーバーにアップロードし、前回説明した方法でiframeアプリとして登録するとファンゲートの完成です。一度「いいね!」を外して表示の違いを確認してみてください(もう1度「いいね!」するのを忘れないでくださいね)。


 いかがだったでしょうか。今回は、iframeを使って追加したタブをカスタマイズする方法を紹介しました。JavaScript SDKやPHPが出てきたことで難易度はやや上がってしまいましたが、紹介した方法を使うことでより本格的なFacebookページを作成できます。ぜひ、挑戦してみてください。

著者:加藤 洋(かとう・ひろし)

著者近影

株式会社TAM アートディレクター兼ソーシャルメディア・プランナー。大手通信会社キャンペーンサイト、国内高級車メーカープロモーションサイト、大手通販会社ECサイトなどを数多くWebプロジェクトを手掛ける。FacebookやTwitterなどソーシャルメディア活用のノウハウ蓄積と情報発信を行なうサイト「Social Media 360.jp[役に立つソーシャルメディア情報配信サイト]」を運営中。


著者:梅田恭子(うめだ・きょうこ)

著者近影

株式会社TAM マークアップエンジニア。自社サービス、大手消費財メーカーサイト、大手通販会社コミュニティサイト、各種学校紹介サイト、月刊情報誌サイトなど数多くのWebプロジェクトを手掛ける。TAMテクニカルチームがテーマ別の技術グループに分かれて情報発信を行なうサイト「Tips Note」を運営中。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く