各社のfacebookページを見ていると様々な工夫が見られます。
その中で最もポピュラーなのが、『いいね』ボタンを押してくれたユーザにのみ特別なコンテンツを見せる方法ではないでしょうか。
筆者のページも『いいね』を押す前と後では若干違うように制作してあります。
http://www.facebook.com/webilab
この仕組を実装するには、PHPが必要になります。
facebookDEVELOPERサイトでは実装のためのPHPコードが用意されています。
尚、前回あたりから専門的な話がチラチラ出始めました。今回ももう少し掘り下げます。
では、続きを読む、からどうぞ。
『いいね』ボタンによるページ変更を実装するためには最低５つのファイルを準備します。
/
├parce_signed_request.php //プログラムPHP
├index.php //メインファイル。条件分岐PHP
├iine_click.html //『いいね』が既にクリックされている場合のページ
├iine_mada.html //まだ『いいね』をクリックしていない場合のページ
└error.html //エラーページ
仕組みは “index.php” で “parce_signed_request.php” を読み込んで実行させ、アクセスユーザが『いいね』を押しているかを判断し、押している場合はiine_click.htmlを、押してない場合はiine_mada.htmlを表示させます。
また、読み込みで何らかのエラーが発生した場合はerror.htmlを表示させます。
順に解説しますが、ｈｔｍｌの説明は実際に表示させるコンテンツになりますので解説を省略します。
parce_signed_request.php
facebookから『いいね』など様々な情報を抽出するための関数を定義しています。
このPHPコードがfacebookから提供されているわけです。
サイトからコードを抜き出してみました。
<?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, ‘-_’, ‘+/’));
}
?>
内容については深く考えず、このコードをnotepadなどにコピペして、parce_signed_request.phpという名前で保存します。これで、一つ目のファイルの完成です。
注意点は保存の際に文字コードの指定に注意すること。
保存する際の文字コードはUTF-8Nです。文字コードについては以前このブログでも紹介しています。
index.php
このファイルをfacebookアプリに登録します。
これはfacebookでは用意されていませんので自身で記述して下さい。
コードは以下のとおり。
<?php
include ‘parse_signed_request.php‘;
if (isset($_POST[‘signed_request’])) {
$data = parse_signed_request($_POST[‘signed_request’], ‘アプリケーションの秘訣‘);//①
if($data[‘page’][‘liked’] == ‘1’){
include ‘iine_click.html‘;//②
} else {
include ‘iine_mada.html‘;//③
}
}
else {
include ‘error.html‘;//④
}
?>
これもほぼコピペで使えます。入力し直す必要があるのは番号の付いた４箇所。
『アプリケーションの秘訣』はアプリ登録した時の設定画面にありますのでそれを書き写します。
②～④のhtmlファイルについてはそれぞれ自分で名付けたファイル名に書きなおして下さい。
②『いいね』を押しているユーザ向け、③まだ押してないユーザ向け、④エラー用になります。
これもUTF-8Nで保存することを忘れないように。
index.phpについてはもう少し解説を続けます。
コードの解説ですので、より知りたい方だけ見て下さい。
2行目・・・最初に紹介したPHPファイル、parse_signed_request.phpを読み込んでいます。
３行目・・・『signed_request』というデータの存在をPOSTで確認しています。facebookではページ移動の際、様々なデータがバックグラウンドでやり取りされています。
signed requestは、facebookとアプリ都の間で情報を共有する際に使われます。
4行目・・・signed_requestにデータが存在した場合、parse_signed_request.phpで設定した関数parse_signed_request関数でデータを取得します。上記コード2行目 ‘function parse_signed_request($signed_request, $secret)‘ がこの関数です。 関数に必要な因数はさきほどifの条件分岐で存在を確認した$_POST[‘signed_request’]と、『アプリケーションの秘訣』です。
帰ってきたデータは変数$dataに代入されます。
5行目・・・変数$dataは配列になっています。『いいね』の判断は配列キー’page’に収められた配列のキー’liked’に収められています。この値が ‘1’ ならば『いいね』を押している、それ以外なら押していないと判断します。
あとは条件に合わせてそれぞれのページをincludeしていきます。
以上で『いいね』によるページ表示の解説は終わりですが、今回紹介したsigned_requestは様々なコンテンツ作りに役立ちます。また後日解説したいと思います。