FacebookにiFrameを読み込む

FacebookにiFrameを読み込む

前回はFacebookにページを作る、と言う部分までを備忘録として残しました。
正直、その部分は備忘録が不要なくらいに簡単です。

問題はここからです。

Facebookページは2011年3月まではFBMLというFacebook独自のマークアップで制作する必要があったようですが、今はiFrameという形で作る方が推奨されています。
少しでもHTMLが分るならこれがどんな素晴らしい事か…。例えば、Dream WeverやホームページビルダーのようなHTMLを作るソフトで簡単に作る事が可能です。

その部分は後で書くとして、まずはアプリを作る必要があります。

Step 1:アプリケーションの作成
前回、Facebook開発者登録をすると書きましたが、これは必須です。開発者登録後に開発者ページにアクセスし、画面右上の「新しいアプリケーションを作成」をクリックします。

新しいアプリケーションを作成

Step 2:名前の設定
こんな画面が表示されます。

名前の設定

「App Diplay Name」はユーザーに見せる名前になりますので、分りやすい名前にしておきます。「Welcome」などが良いかと…。
「App Namespace」はちょっと良くわかりません。私は社名を入れておきました。ちなみに後で変更可能です。

Step 3:アプリの基本設定
アプリの基本設定をします。

アイコンの設定

まずはアプリのアイコンを設定します。これは16×16 pixelsで作ります。大きすぎる画像を指定しても自動でリサイズしてくれます。また、指定しなくてもFacebookでフォルトのものが表示されるので、とりあえずは安心(!?)です。

次に画面下方にある「ページタブ」をクリックします。

ページタブ

「ページタブ名」はFacebookページの右にある今制作しているページの名称です。
「Page Tab URL」はiFrameデータを格納しているURLを入力します。
「Secure Page Tab URL」にはiFrameデータを格納しているURLを入力します。ただし、こちらはhttpsから始まるURLである必要があります。
「Page Tab Edit URL」にはアプリを編集するためのURLを入力します。つまりはFacebookのデベロッパーページのURLをいれるということになります。

「Page Tab URL」と「Secure Page Tab URL」は同じURLの方が良いようです。つまり、httpかhttpsの差、という意味です。独自SSLを使えない環境だとこれができない可能性がありますので注意が必要です。HTML制作時にもこの方が便利ですね。

今回はさくらサーバーを使っているので、以下のように設定しました。
「Page Tab URL」 http://example.sakura.ne.jp/facebookpage/
「Secure Page Tab URL」 https://example.sakura.ne.jp/facebookpage/
ちなみに、「example」の部分が元々登録したときのものなります。
「facebookpage」の部分は任意のフォルダを指定すれば良いかと思います。

Step 4:iFrameで表示するHTMLを作る
iFrameのHTMLを作るのは簡単です。
注意するのは幅と高さが基本的には固定であるということです。幅520px、高さ800pxとなっています。勿論、これには回避方法があるのですが、まぁ基本的にはこのサイズで作れば間違いないということになります。

Step 5:iFrameで表示するHTMLの振り分け
単純にHTMLを表示する、と言う事であればStep 6に飛んで下さい。
さて、「いいね」を押してくれたユーザーと押してくれてないユーザーに見せるモノを変えたい場合は、phpで判定させて、振り分けないといけません。

ゼロから作るのも面倒だなぁ、と思っていたら、とても親切なTokyoHeadTerminalさんが叩き台をアップされています。と、言う事で早速使わせて頂きました。
詳細は割愛しますが、ダウンロードしたZIPファイルを解凍して中身を見れば簡単に作り込みが可能です。

fan.htmlとnotfan.htmlをそれぞれ作成します。

次に、index.phpの4行目にある「ここにアプリの秘訣を入力」をFacebookから提供された「アプリの秘訣(正しくは秘密ですけど、誤訳ですね)」にある英数字の羅列を入力します。

これでHTML側の作業は終了です。あとはFTPしてStep 3で指定してフォルダーにアップします。

Step 6:Facebookアプリの最終設定
もうここまで来たら終わったようなものですが、ここにFacebookの罠が潜んでいます。
つい先日アプリをFacebookページのタブにする設定が変更になりました。今までは幾つかやり方があったようですが、今の時点ではそういった全ての方法が使えなくなっています。私はここでつまづいて数時間はGoogleで検索しまくる、という状態になりました。

結論から言うと、ダイアログボックスとかは無くなり、URLにID等を打ちこんで直接当てに行くという形になっているようです。この点については、Facebookのブログに書いてあります。日本語が良い!と言う場合はFBNさんでブログの内容を訳した感じの記事が掲載されています。
ちなみにブログではHTMLを作れと書いてありますが、FBNさんのやり方の方が手っ取り早いかと思います。

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL

上記URLの該当箇所を以下のように書き直して、ブラウザーに打ちこむとダイアログボックスが表示されます。
「YOUR_APP」にはApp IDというものを入力します。
「YOUR_URL」にはStep 3で入力したSecure Page Tab URLを入力します。

Step 7:Facebookアプリの表示場所を決定する
表示されたダイアログボックスから今回制作したFacebookページを選択して「ページタブを設定する」をクリックします。

ページタブの設定

Step 8:Facebookページの再修正設定
Facebookページに戻り、「Facebookページを編集」をクリックします。画面中央の「デフォルトで表示するタブ」プルダウンから先程設定したアプリを選びます。

デフォルトタブ設定

これでおしまい!!

基本的には備忘録なので、個人的に迷わなそうな部分は大分省いていますが、なんとなく雰囲気は分って頂けたかと思います。

次はアプリに手を出してみるか…????

Tags: , ,

Leave a Reply





Spam Protection by WP-SpamFree