iframe版Facebookページで「いいね」されているかどうかで表示を変える

個々のFacebookページには、「いいね」ボタンがあります。
このボタンがクリックされているかどうかで、iframe版Facebookページの表示内容を変えたい場合もあります。
この方法を紹介します。

1.iframeをPHP等で出力する

Facebookページが「いいね」されているかどうかの判別は、サーバー側で行います。
そこで、iframeタブに対応するアプリケーションで、タブURLの設定を変えて、タブのアドレスをPHPやCGIのアドレスにして、ページをサーバー側で処理するようにします。

たとえば、タブをPHPで出力するとします。
この場合、アプリケーションの設定を以下のようにします。

キャンバスページ	（http://apps.facebook.com）/○○○
キャンバスURL	http://www.□□□.com/■■■/
タブURL	（http://apps.facebook.com/○○○)/tab.php

そして、PHPのファイルを作って、アドレスがhttp://www.□□□.com/■■■/tab.phpのアドレスになるように、サーバーにアップロードします。

2.signed_requestから情報を読み込む

iframe版タブにアクセスがあると、Facebookからタブに対応するPHP等にアクセスされる際に、POSTプロトコルで「signed_request」というデータが送信されます。
signed_requestには、アクセストークン等の情報がBASE64エンコードされた形で含まれています。
この情報の中に、ページが「いいね」されているかどうかも含まれています。

PHPの場合だと、以下のコードで情報をデコードすることができます。
変数$dataは連想配列になり、アクセストークン等の情報が代入されます。
そして、$data['page']['liked']に、ページが「いいね」されているかどうかが代入されます。
「いいね」されていればこの変数の値が1になり、そうでなければ値がない状態になります。

<?
if (isset($_POST['signed_request'])) {
    list($encoded_sig, $payload) = explode('.', $_POST['signed_request'], 2); 
    $data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);
}
?>

3.$data['page']['like']の値に応じて出力を変える

後は、変数$data['page']['like']の値に応じて、以下のようなコードで、「いいね」されているかどうかで出力を変えるようにします。

<?php if ($data && $data['page']['liked']) : ?>
    「いいね」されているときに出力する内容
<?php else : ?>
    「いいね」されていないときに出力する内容
<?php endif; ?>

4.PHPのひな形

ここまでの話をもとに、「いいね」されているかどうかで出力を分ける場合のPHPのひな形を作ると、以下のようになります。

<?php
if (isset($_POST['signed_request'])) {
    list($encoded_sig, $payload) = explode('.', $_POST['signed_request'], 2); 
    $data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);
}
?>
<html>
<meta charset="UTF-8">
<title></title>
</html>
<body style="margin : 0; padding : 0;">
<div style="width : 520px; overflow : hidden;">
<?php if ($data && $data['page']['liked']) : ?>
    「いいね」されているときに出力する内容
<?php else : ?>
    「いいね」されていないときに出力する内容
<?php endif; ?>
</div>
</body>
</html>

5.signed_requestの署名の確認

ここまでで紹介した方法では、signed_requestの値を単にデコードしているだけです。
ただ、それだとセキュリティ的な問題が起きることがありますので、signed_requestの署名を確認するようにします。
その方法は、「signed_requestの署名を確認する」の記事を参照してください。

お知らせ