『Facebookページの作り方 ～ようこそページをiframeでつくろう～』

前回『Facebookページの作り方～登録編～』という記事を書きましたが、今回はその続きでようこそページをiframeで作る具体的な方法をご説明します。

まず、iframeのページをFacebookで使えるようにするためにアプリ登録をします。こちらのFacebook開発者ページを開き、画面上部の「マイアプリ」をクリックします。

まだ何もアプリを作成したことがないと　「アプリケーションがありません。」　と表示されるので、「+Set Up New App」ボタン、または「作成する」をクリックします。

すると、「アプリケーションを作成」画面に移ります。

今回は、自分で作ったFacebookページに入れるiframeのページを登録するだけなので、アプリケーション名は自分で分かりやすい名前なら何でも大丈夫です。

私の場合、「和装本っていいね！」というFacebookページに、「ようこそページ」を作るための登録だったので、「和装本っていいね！ようこそページ」というアプリケーション名にしました。

そして「同意する」にチェックを入れ、『アプリケーションを作成』ボタンを押します。

セキュリティチェックの画面で表示されている文字を入力し『送信』ボタンを押すと、編集画面へ移動します。

ここではぜひ、「アイコン」を設定しておくことをオススメします。

デフォルトの画像でも問題はないのですが、このアイコンは実際のFacebookページにも表示されるので（画面左側のタグの欄に、アイコンとタグ名が出ます）、16px × 16pxのオリジナル画像を登録しておきましょう。

そして、「言語」は「日本語」を選びます。

次に、左側メニューの「Facebook Integration」をクリックします。

『キャンバス』項目の「Canvas Page」には自由なディレクトリ名が設定できます。（だたし、すでに取得されているディレクトリ名は取得できません。）

「キャンバスページURL」には、自分のサーバ（契約しているレンタルサーバなど）のURLを入力します。設置するディレクトリの最後の「 /　（スラッシュ）」まで書いてください。

「Canvas Type」は「IFrame」を選択します。（FBML廃止にともなって、これはもう表示されなくなるのかな？）

「iFrameサイズ」は、iframe表示枠の規定サイズ（横520px × 高さ800px）をはみ出してしまった場合、スクロールバーを表示するかリサイズするかを選べます。
私は枠内におさめたかったので、「Auto-resize」を選びました。

※高さ800pxを超えてもスクロールバーを出さずに表示させるには、Facebookが提供しているJavaScript SDKを使います。その方法については、後日また記事を書く予定です。

『Discovery』項目の「Social Discovery」は「無効」にしておきます。（このアプリは自分で使うためだけのものなので、他のユーザの検索対象にする必要はありません。）

『Page Tabs』項目の「タブ名」は、Facebookページに表示されるタブ名となります。私は「ようこそ」としました。

「Page Tab Type」は「IFrame」を選択します。

「タブのURL」には、自分のサーバに置くファイル名を入力します。（このファイルの中身が、iframeでFacebookページに表示されます。）
私は「index.php」と入力しました。（htmlではなくphpにしておくと、あとで「いいね！してくれた人だけに見せるコンテンツ」などを作ることができるのでオススメです。）

ここまで入力できたら、画面下の『変更を保存』ボタンをクリックします。

（繰り返しますが、今回は自分で作ったFacebookページに入れるiframeのページを登録するだけなので、必要最低限の項目しか設定していません。）

「マイアプリ」ページが表示され、今作ったアプリが登録されています。

画面右側の「Application Profile Page」をクリックします。