Facebookページにタブを追加してコンテンツを表示するには、コンテンツを「アプリ」として登録します。
→今回、この一連の作業が非常に厄介でしたのでメモ。

1. Facebookの開発者ページにアクセスします。

2. 右上の「Set Up New App」をクリックします。


3. アプリケーション名を入力し「アプリケーションを作成」をクリックします。アプリケーション名はあとで変更可能です。

セキュリティチェックのあと、

4. 各種情報を入力します。通常のウェブページとして表示させたいのでシンプルなアイコンとし、ロゴは社名の入った画像を登録しました。その他の情報はサイトより流用しました。



5. 次に Facebook Integration でページの詳細な設定を行います。

• 【キャンバスページ】　任意のURLを半角英数字のみで入力します。このURLがFacebookページのURLになります。
• 【Canvas URL】　iFrameのURLを入力します。
• 【iFrameサイズ】　Auto-Resizeを選択しました。ページからサイズを指定することも可能です。
• 【タブ名】　全角16文字までの任意の名称を入力できます。
• 【タブのURL】　ファイル名を指定します。

以上の設定が済んだら「変更を保存」をクリックします。
→ふぅ、もう少しです。

ここまでの作業が済んだらFacebookページにタブとして表示させることが出来るようになります。

「Application Profile Page」をクリックします。



右にあるメニューから「マイページへ追加」をクリックします。



このアプリを表示させたいFacebookページを選択します。


Facebookページを確認してみましょう。アプリがタブとして登録されています。



…っとアプリの登録フローを備忘録として紹介しましたが、実際は外部サーバとiFrameコンテンツの用意が済んでいる、という前提で進めています。
外部サーバは自前で用意してもらうとしてiFrameコンテンツのテンプレートセットをサンプルとして近日公開いたします。
それまではFacebookページ　デザイン用素材を参考にして下さい。

テンプレートセットには弊社Facebookページで使っているHTML(CSS)とPSDを予定しています。
→Facebookページ　テンプレート公開しました。