facebookのiframeのページを作る際のコツ

facebookのアプリ設定画面
facebookのアプリ基本設定

facebookのiframeのページ作成のポイント
今回ネットで公開されている情報を基に、facebookのiframeのページを作りました。この時に、ネット上の情報だけで製作すると出来ない部分がありますので、ポイントをご紹介します。
まず、私は、こちらのブログの記事を参考に作りました。http://www.gb-jp.com/blog/social/1241.html
それで、まずアプリの設定のところで、「facebook integration 」を選択してとありますが、見つかりません。
たぶん、ページのレイアウトの変更等があり、なくなってしまったと思われます。

それで、色々とfacebookの中を探検したりしましたが、どうにも見つかりません。
よくよくアプリの設定画面を見たら、掲載した画像のようになっていまして、アプリ統合がページの中にありました。


それで、ページタグに藤堂することを意味する項目にチェックを入れると、ページ内容をアップロードしたURLを入力する場所が出てきます。
そこに、ブログで紹介されている通り、セキュアのhttpsとhttpの両方を入力します
httpsのURLがないと、ページ表示が出来ません。
また、さくらインターネットの場合のように、サーバーの設定でフォルダ内に、index.htmlが無い場合は、アクセスを拒否する設定がされている場合があります。
facebookのファンページにアプリを追加して表示確認したときに、エラーになったら、確認してみてください。
サーバーの設定の中のファイルマネージャーを選択。この中で、アクセス設定の項目があります。その中に、indexを追加できるタグがありますので、その中に、index.phpを追加してください。
また、さくらインターネットでは、初期のドメインで共有SSLの設定をしてください。

また、PHPのファイルがありますので、パーミッションの設定も、サーバーの会社から支持されている内容に従って設定してください。

さくらインターネットのパーミッションの設定方法

http://support.sakura.ad.jp/manual/rs/tech_cgi.html

それからページのサイズですが、iframeのサイズが520px×800pxとなっています。
それで縦に長いページの場合は、800pxを実際のページよりも少し長めに設定します。横の520pxですが、このまま製作すると横にもスクロールバーが表示されてしまいます。そのため、私は、480pxにして製作しました。facebookのページレイアウト変更があってアプリの基本設定のところでは、ページサイズが横が520pxよりも大きくなっていますが、スクロールバーを出さないように作るためには、480pxくらいに収めた方が良いです。

それから、いいねボタンの押してある、押してないのチェックのためのPHPで、parse_signed_request.phpもfacebookのページからコピペして製作するようにありますが、下記のソースを使ってください。ブログで紹介されている通りにメモ帳などにコピペしてアップロードすると、正しく機能しなくて中身のソースがそのまま表示されてしまいます。


いいねボタンを押した押してないのチェックのPHPについて

http://tam-tam.co.jp/tipsnote/program/post1509.html

parse_signed_request.phpのソース
------------------------------------------ この下から

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>
<meta content="text/html; charset=Shift_JIS" http-equiv="content-type"><title>welcome</title>
</head><body>
<?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, '-_', '+/'));}?>
</body></html>------------------------------------------ この上まで

今回ページの作り込みについては割愛しました。CSS3を使いどのブラウザでもグラデーション表示が適用されるように工夫する方法などは、私のこちらのブログの記事を参考にしてみてください。
http://ameblo.jp/kogane21/entry-11087531055.html


今回製作したページは、こちらになります。

 

facebookのミラクルくまちゃんのファンページ

 

国内最大級の個人向けレンタルサーバー「ロリポップ!レンタルサーバー」は、
月額105円~で容量は最大30GB!
しかも、ロリポップ!は安いだけじゃなく、
WordPressやMovableTypeの簡単インストール/
WEBメーラー/ショッピングカートなど、無料でついてくる機能が満載!
Cronや共有SSLもバッチリ対応♪
もちろん、オンラインマニュアルや助け合い掲示板、ライブチャット等もあり、
充実したサポートで初心者の方でも安心です。
無料のお試し期間が10日間ありますので、
まずは気軽に利用してみてくださいね!

▼ロリポップ!レンタルサーバーはこちら