ウェブ、ショウジン

Facebookページ(iframe版)で言語設定によって表示する内容を出し分ける

2011-7-23
Category
Facebook

仕事でFacebookページに英語版のWelcomeページも設けたいというのが入ってきたので調べてみました。

この案件自体の仕様では日本語版、英語版、別々に新規タブ=アプリとなっていましたが、同一タブ内で出力を分けたほうがスマートだと思うので念のため、前もって仕込み。

iframeを使用しているタブでは閲覧者の情報を受取ることができます。代表的なのはそのページを「いいね」しているかどうかで表示する内容を分ける「ファンゲート」での使用でしょうか。

この情報は「Signed Request」パラメータというもので、暗号化されたJASONオブジェクトになります。暗号化されたままでは情報を操作できないので、使用するアプリの秘密キー(日本語では「アプリの秘訣」英語では「App Secret」)を使ってデコード(復号化)して使用します。

なので、Welcomeページのためのアプリを作成しておくことと、このアプリの秘密キーが必要です。

iframeを使ったFacebookページの作成についてはiFrameを使ったFacebookアプリの追加を参照のこと。

まず、作成したFacebookページのhead内に以下の記述を追加し、取得できているユーザー情報をvar_dump()で確認してみます。

Welcomeページ / index.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, '-_', '+/'));
}
?>

これでSigned Requestパラメータによるユーザー情報の取得ができます。しかし、このままでは取得した情報は暗号化されたままなので、アプリの秘密キーを使って情報をデコードするために以下の記述を追加します。

<?php
$secret = 'ここに秘密キー';
$data = parse_signed_request($_REQUEST['signed_request'],$secret);
var_dump($data);
?>

作成中のWelcomeページ(index.php)をブラウザで読み込んでみるとvar_dump()で出力された以下の情報を確認できます。

signed_request

これで取得した情報をデコードし、ページ閲覧者の各情報を使って判別する準備ができました。

ちなみに、Signed Requestに含まれるJASONオブジェクトついてはこちらのFacebook開発者向けドキュメントの日本語訳とTipsが参考になります。今回はuserフィールドが持つ「locale」(ユーザーの設定言語コード)を使用します。

確認のためにvar_dump()で出力していた部分は実際には不要なので削除し、コードは以下のようになります。

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

// 秘密キーを使って取得したデータを復号化
$secret = 'ここに秘密キー';
$data = parse_signed_request($_REQUEST['signed_request'],$secret);
?>

あとはbody内でユーザー側に表示する部分をif文を使って記述します。

<?php
    if($data['user']['locale'] == "ja_JP"){
        echo '日本語';
    }else{
        echo 'その他の言語';
    }
?>

今回は閲覧者がFacebookの利用において設定している言語コード(locale)での判別で、日本語かそれ以外だけを出し分けることができればいいので上記のようにしました。日本語設定の利用者には「日本語」となっている部分にその内容を記述し、日本語以外を設定している利用者には「その他の言語」の部分にその内容を記述します。

実際はテキスト以外にimgタグ等、いろいろ入ってくると思うのでヒアドキュメントにしたほうがいいのかなということで、以下のように。

<?php
if($data['user']['locale'] == "ja_JP"){
	$contents = <<<eol
<div>日本語版の内容</div>
EOL;
	echo $contents;
}else{
	$contents = <<<eol
<div>その他の言語向けの内容</div>
EOL;
	echo $contents;
}
?>

これで仕込みは完了しました。

今回お世話になったのは

Signed Request : Facebook開発者向けドキュメントの日本語訳とTips
新しいFacebookページにStatic iframe形式でタブを追加する方法

でした。大変参考になりました。
ありがとうございます。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿