ウェブ、ショウジン

Signed_Requestパラメータを使ってFacebookページのタブページにファンゲートを実装

2012-1-30
Category
Facebook

ひさしぶりにFacebookページでいわゆる「ファンゲート」を実装したのですが、なぜかうまくいかず、signed_requestの内容をvar_dump()しても「NULL」とでてしまったり、なんじゃこりゃ?でちょっと難儀したので一応メモ。

ファンゲートは、Facebookページ(ページ自体)を「いいね!」(ロケールが英語ならLike)している状態とそうでない状態(いいね!していない)で表示するものを分けるもの。たぶん。

このファンゲートは、以前『JS+PHPでFacebookページをカスタマイズ!』を参考というか、そのまんまにして無事実装できたのですが(自分でやったのは『PHPの条件分岐でFacebookページにファンゲートを実装する』)今回なぜかうまくきませんでした。

最終的にはうまくいったのですが(どっちやねん)なにかまた仕様が変わって仕込んだものが機能しなくなったのかなと思い、それだったら以前他のことでやってみた手を使って(signed_requestパラメータを使ってlikeの値で条件判断)やってみました。

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

これだとファイルを分けていないので1ファイルで済みます。(そのぶんソースが長くなりますが)

<!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" />
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<link rel="stylesheet" href="reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="fonts.css" type="text/css" media="all" />
<link rel="stylesheet" href="base.css" type="text/css" media="all" />
<!-- リンクをtarget="_blank"で開く -->
<script type="text/javascript">
window.onload = function() {
     for (var i = 0; i < document.links.length; i++) {
          var ele = document.links[i];
          if (ele.href.match(/^http/)) {
               ele.target = "_blank";
          }
     }
}
</script>
</head>
<body>

	<div id="content">

<?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 = 'Facebookタブページの「アプリの秘訣」(App Secret)';
$data = parse_signed_request($_REQUEST['signed_request'],$secret);

if($data['page']['liked'] == "true"){
	/* ページを「いいね」した、しているユーザに対して見せる内容 */
	$contents_html = <<<EOL
<h1>いいねしてくれましたね?あざす!!!</h1>
<div style="font-size:30px;">(´∀`*)ポッ</div>
EOL;
	echo $contents_html;
}else{
	/* ページにまだ「いいね」していないユーザに対して見せる内容 */
	$contents_html = <<<EOL
<h1>まだいいねしてませんね?</h1>
<div style="font-size:30px;">ガ━━(;゚Д゚)━━ン!!</div>
EOL;
	echo $contents_html;
};
?>

	<!-- // #content --></div>


<!-- 以下はiframe部分でスクロールバーを出さないための記述 -->
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
  FB.init({
    appId  : 'FacebookタブページのアプリID',
    oauth  : true,
  });

  FB.Canvas.setAutoGrow();

  function growSize() {
    var height = Number(
      document.getElementById('content').style.height.split('px')[0])
      + 100;
    document.getElementById('content').style.height = height + 'px';
  }
</script>
</body>
</html>

このやり方で無事ファンゲートを実装できたことを確認した後、一応再度前述のやり方でも確認してみたところ、こちらも問題なく結果を得ることができました。んー、原因は自分がなんかつまらないミスをしていただけのような気もしますが、せっかく?なので一応これも残しておきますということで。Signed_Requestについてある程度理解しておくとファンゲート以外についてもいろいろと役立てられることありますし。

Signed_Requestについては以下のページが詳しいです。(日本語に訳してくれてます)

Facebook開発者向けドキュメントの日本語訳とTips Signed_Request

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 さくらインターネット アクセス解析 カスタム投稿