一週間を空き、前回に続き、今回はアプリ開発編です！

facebookのiframeアプリのパターン

facebookのiframeアプリを作るには、大体二つのパターンがあります。

１、facebookページにタブをつけて、「いいね」を稼ぐ

２、アプリページを直接アクセスさせる

両方とも、facebook側から、「signed_request」というパラメーターをPOSTしてきますが、

１の場合は、そのfacebookページに対して「いいね」を押したかの情報が入っていて、

２の場合はそれがないから、facebookページにアクセスしているか、アプリページにアクセスしているかを判別できます。

PHP

$fb_data = facebookHandler::parse_signed_request($_POST['signed_request'], APP_SECRET); if (!isset($fb_data['page'])) { // アプリページから来た } else if( $fb_data['page']['liked'] ){ // facebookページから来てかつ、そのfacebookページに対して既に「いいね」をした } else { // facebookページから来てかつ、そのfacebookページに対してまた「いいね」をしてない } class facebookHandler { public static function parse_signed_request($signed_request, $secret) { list($encoded_sig, $payload) = explode('.', $signed_request, 2); // decode the data $sig = facebookHandler::base64_url_decode($encoded_sig); $data = json_decode(facebookHandler::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; } public static function base64_url_decode($input) { return base64_decode(strtr($input, '-_', '+/')); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

$fb_data = facebookHandler::parse_signed_request($_POST['signed_request'], APP_SECRET); if (!isset($fb_data['page'])) { // アプリページから来た } else if( $fb_data['page']['liked'] ){   // facebookページから来てかつ、そのfacebookページに対して既に「いいね」をした } else {   // facebookページから来てかつ、そのfacebookページに対してまた「いいね」をしてない }   class facebookHandler { public static function parse_signed_request($signed_request, $secret) { list($encoded_sig, $payload) = explode('.', $signed_request, 2); // decode the data $sig = facebookHandler::base64_url_decode($encoded_sig); $data = json_decode(facebookHandler::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; }   public static function base64_url_decode($input) { return base64_decode(strtr($input, '-_', '+/')); } }

 

ここから、注意したいところをいくつリストしてきます。

１、サードパーティ クッキー

IEとSafariが、iframeの外側ページから来るクッキーを受け入れないため、別の方法でユーザ情報（signed_request）を伝わなければなりません。

なお、ChromeやFirefoxはデフォルトでサードパーティ クッキーを受け入れる動作をしています。

・IEの場合：PHPソースに下記の書き方で書けば、サードパーティ クッキーを受け入れるようになります。

header('p3p: CP="ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV"');

1	header('p3p: CP="ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV"');

・Safariの場合：ブラウザ設定を調整する以外に、サードパーティ クッキーを受け入れようにする方法がありません。

上記の事情があるため、ページ遷移するたびに、POSTでユーザ情報を次のページに伝えなければなりません。

 

２、合成写真の罠

例えば、アプリの診断結果の写真と、友だちのプロフィール写真と合成して、〇〇と一緒のタグをつけるアプリがよく見かけます。

実は、そのやり方はグレーだから、注意しなければなりません。

参考URL：http://developers.facebook.com/docs/reference/api/photo/#tags

 

３、画像をアップするのに必要な権限

To publish a ‘photo’ object you need

• a valid access token
• publish_stream permission

とfacebookのgraph仕様ページでも書いています。

なのに、user_photosの権限がないと、画像アップが失敗するのでご注意ください。

参考URL：http://developers.facebook.com/docs/reference/api/photo/

 

４、画像にタグつけの注意点

facebookのgraph仕様を見ると、タグつけにxとyというオプションがあります。

タグの位置指定で使うので、pixではないかという勘違いがよくあります。

実は、x,yともパーセンテージを指してます。

参考URL：http://developers.facebook.com/docs/reference/api/photo/#tags