FacebookページにiFrameを使ったタブを追加する手順

HTML&CSS

2011.05.11

急に湿度が上がってパーマが強調されているminamiです。

今回はFacebookです。最近ちょっとご無沙汰していたら、いろいろと機能が追加され、さらにFacebookページの作り方まで変わっていたのでちょっとまとめてみました。

FacebookページにiFrameを使った独自のタブを追加する

以前はFacebookページ（旧ファンページ）では、FBMLというFacebook独自の言語を使用してオリジナルのタブを追加することができました。
しかし、2011/3/11にFacebookではそれ以後のFBMLを使ったコンテンツを非推奨とし、iFrameとHTML、Javascript、CSSで作成できるように仕様が変更されました。

まず下準備

というわけで、iFrameを使ってFacebookページのタブを作っていくわけですが、iFrameですのでもちろんその中に読み込むhtmlファイルおよび画像やCSSファイルが必要になります。まずはそれらのコンテンツを外部からアクセス可能なサーバにアップします。

Facebookページにタブを追加する

アップするhtmlの準備ができたらFacebookページにタブを追加していきます。今回は既にあるFacebookページに新しいタブを追加してみます。

まずは追加するタブを、Facebookアプリとして登録する必要があります。
どこから追加するのかとっても分かりにくいですが、検索窓に「開発者」と打ち込むとすぐに見つかります。

開発者フォーラムの右にある、「Set Up New App」ボタンをクリックします。

アプリケーション作成画面になります。ここではアプリケーション名を入力して、利用規約に同意します。Facebookの認証がまだの場合は、この前に本人確認の認証を求められる場合があります。その場合、またもとってもわかりにくいのですが、こちらの「携帯メールアドレスを確認」から認証を行ってください。

アプリケーションが作成されると、設定画面にうつります。ここではタブの3番目「Facebook Integration」をクリックします。

「キャンパスページ」には任意の名前を入力します。数字は使えないので注意が必要です。「Canvas URL」には、先ほど用意したiFrame用のhtmlがあるサーバのURLを入力します。「iFrame Size」はスクロールバーを出したくないのであれば「Auto-resize」を選択します。

下の項目に移り、「タブ名」「タブのURL」を入力します。「タブ名」はそのまま左のタブメニューの文言になります。
「タブのURL」に、作成したページに読み込むファイル名を入力します。