iFrameでファン専用のコンテンツを作成しよう

2011-02-28 10:00 (更新：2021-01-05 08:53)深谷歩Facebook

「FacebookページにiFrameを組み込もう」でもお伝えしましたが、2011年3月11日を境に、FacebookページではStaticFBMLの新規追加ができなくなり、iFrameのみが利用できるようになります。 FacebookページでYouTube動画やmp3ファイルを再生できるようにする場合、通常のHTMLで埋め込むことができるため、あえてFBMLタグを覚える必要がなくなります。こうした点は制作する人にとって楽になります。しかし、ユーザーがFacebookページに「いいね！」をしているかどうか（ファンになっているかどうか）によって、コンテンツの見せ方を変えたい場合、FBMLでは<fb:visible-to-connection>タグを使って簡単に実現できましたが、iFrameでは自分で実装しなくてはならなくなりました。今回はFacebookページを見た人が「いいね！」をしているかどうかを判別するsigned_requestを使用し、それぞれ異なるコンテンツを表示する方法を説明します。

下準備

まずはiFrameのページを設定します。設定方法やFacebookページに追加する方法については「FacebookページにiFrameを組み込もう」をご覧ください。

アプリの秘訣

なお、今回はセキュリティの観点から署名を使用します。これはsigned_requestの値が正しくFacebook側から送られたものかを判別するためのものです。iFrameページ作成時の以下の画面で「アプリの秘訣」というキー情報をメモしておいてください。

署名用ファンクション

次に以下のコードをコピーし、「parse_signed_request.php」という名前で保存、Webサーバ側に設置してください。

[code] <?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, '-_', '+/')); } ?> [/code]

以上で下準備は終了です。

実践

ようこそ

次に以下のコードをコピーし、index.phpという名前で保存し、Webサーバ側に設置してください。

Facebook上で表示すると以下のように表示されます。

もし表示されない場合や、表示の仕方が分からない場合は「FacebookページにiFrameを組み込もう」を参照してください。では、ファンか否かを判別するsigned_requestを使用してみましょう。先ほどと同様に下記コードをindex.phpで保存し、Facebook上で表示してみてください。 10行目の「アプリの秘訣」の部分は、冒頭でメモしたキー情報に置き換えてください。

[code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> ようこそ <?php include 'parse_signed_request.php'; if (isset($_POST['signed_request'])) { $data = parse_signed_request($_POST['signed_request'], 'アプリの秘訣'); } echo '<pre>'; print_r($data); echo '</pre>'; ?> </body> </html> [/code]

以下のような画面が表示されます。

これはFacebookページにiFrameが読み込まれた際に、Facebook側から送信されるsigned_requestの中身を表示したものです。ファンか否かの判別は赤枠で囲った部分、「liked」の値で行います。今は空になっています。これはまだファンにはなっていないことを意味しています。もしファンの場合は以下の画面のように「liked」の値に「1」が格納されます。

分岐させてみよう

では、今度はこの「liked」の値で分岐させてみましょう。以下のコードをindex.phpとして、Webサーバ側に設置してください。 10行目の「アプリの秘訣」を置き換えるのを忘れないでください。

15行目から19行目が今回、分岐させるために追加した部分です。「liked」の値が「1」であれば、以下の画面のように「あなたはファンです」と表示させています。もし「liked」の値が「1」ではなかった場合は、「あなたはファンではありません」と表示されます。

このように、signed_requestを利用することでファン専用のコンテンツを作成することが可能です。

まとめ

最後に、全くPHPが分からない、という方のためにコピー&ペーストで使用できるコードを用意しました。以下のコードをindex.phpという名前で保存し、Webサーバ側に設置してください。また、今までと同様に4行目の「アプリの秘訣」は置き換えてください。

[code] <?php include 'parse_signed_request.php'; if (isset($_POST['signed_request'])) { $data = parse_signed_request($_POST['signed_request'], 'アプリの秘訣'); } if($data['page']['liked'] == '1'){ include 'fan.html'; } else { include 'notfan.html'; } ?> [/code] 以下のコードをfan.htmlという名前でWebサーバ側に設置してください。 [code] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> ここにファン用のコンテンツを記述してください </body> </html> [/code]

以下のコードを「notfan.html」という名前でWebサーバ側に設置してください。

index.php、fan.html、notfan.htmlは全て同じWebサーバ側のディレクトリに設置してください。 Facebook上でindex.phpが読み込まれた際に、「liked」の値を確認し、「1」であれば「fan.html」を、そうでなければ「notfan.html」を読み込むようにしてあります。「fan.html」と「notfan.html」は自由にhtmlでつくり込むことができます。

深谷歩

株式会社深谷歩事務所代表取締役ソーシャルメディアやブロクを活用したコンテンツマーケティング支援として、サイト構築からコンテンツ企画、執筆・制作、広報活動サポートまで幅広く行う。Webメディア、雑誌の執筆に加え、インタビュー取材による導入事例作成、記事作成なども行う。著書『コストゼロでも効果が出る！ LINE公式アカウント集客・販促ガイド』（翔泳社、共著）、『自社のブランド力を上げる! オウンドメディア制作・運用ガイド』（翔泳社）、『たった1日でも効果が出る！ Facebook広告集客・販促ガイド』（翔泳社）他多数