準備:自由にHTMLを記述したページを用意する

外部サーバにページをUPしておく

外部サーバにページをUPしておく

まずは、Facebook側で設定するよりも前に、独自ページの中身(HTMLファイル)を作成して下さい。インラインフレームの内部で表示されることになるため、後述の注意点に気をつける必要はありますが、それ以外は普段通りの作成方法で作って構いません。自力でHTMLを書いても構いませんし、何らかの作成ソフトを用いても構いません。

作成できたら、SSLが利用可能なサーバにアップロードします。ブラウザを使って、HTTPでもHTTPSでもアクセスが可能なことを確認して下さい。

リンクを記述する際の注意点:
独自ページはフレームの内部に表示されることになるため、外部サイトへリンクを貼る場合には、リンクを作るa要素に「target="_top"」の記述を加えて、フレームを解除する指示が必須である点に注意して下さい。

※ここでの「外部サイト」とは、「アップロード先として利用したサイト以外すべて」を指します。ですから、facebook.comドメイン内のページであっても「外部サイト」になります。

リンクを作るHTMLは、例えば以下のように記述します。
<a href="リンク先" target="_top">リンク先はフレーム解除後に表示</a>

以下のように記述して、別ウインドウに表示するようにしても良いでしょう。
<a href="リンク先" target="_blank">リンク先は別ウインドウに表示</a>

ただし、何でもかんでも別ウインドウを強制的に開いてしまうインターフェイスは、ユーザの意向を無視してしまうという点で、あまり好ましいものではありません。できるだけ「target="_top"」の記述を使って「フレームを解除するだけ」に留めておき、別ウインドウで表示させたいかどうかはユーザ側に任せることをお勧め致します。

自由に使える領域について:
中央の青線内のみを自由にできる

中央の青線内のみを自由にできる

インラインフレームで表示される独自ページの表示領域は、右図で示した部分です。サンプルFacebookページ「ホームページ作成TIPS」内では、範囲が分かりやすいように「ブルーの枠線」で囲んでいます。

この範囲内だけを自由にデザインできます。それ以外の部分はFacebook側が合成して表示している部分ですから、直接の編集はできません。

横方向は固定、縦方向は可変(ただし上限あり)
古い仕様では横幅は520px固定だった

古い仕様では横幅は520px固定だった

独自ページの横幅は、固定サイズ(520pxまたは810px)です。以前は520px限定でしたが、Facebookが新しいレイアウトに変わってからは、810pxが追加されました。今後もこの仕様は変わる可能性がありますから、できるだけリキッドレイアウト(可変長)で作っておく方が望ましいでしょう。

縦方向は可変ではあるものの、上限値である800pxを超えると(インラインフレーム内に)スクロールバーが表示されてしまう仕様になっています。スクロールバーが表示されないようにするには、縦方向の大きさを800px以内に収める必要があります。

ただし、スクロールバーが出るのを回避して、好きなだけ下方向に延ばす方法は用意されています。それには、Facebook側が提供しているJavaScriptを使う必要があります。その具体的な方法は本記事では割愛していますが、その他のTIPSと共に、次回の記事でご紹介致します。

さて、ページの準備ができたら、それをFacebookページ内に結合するための「アプリ」を作りましょう。

独自ページを表示させるためのアプリを作る

「1ページ1アプリ」という扱い

「1ページ1アプリ」という扱い

Facebookページ内で独自ページを表示させるには、ページ1つに付き1つの「アプリ」という形で登録します。

つまり、
  • 『ようこそ!』ページを表示させるためのアプリ
  • 『新着記事』ページを表示させるためのアプリ
  • 『おすすめ記事』ページを表示させるためのアプリ
……などのように、1ページずつ独立したアプリを作って利用します。アプリを作るといっても、プログラミング能力は一切不要です。名称やURLなどを登録するだけで済みます。

※Facebookのインターフェイスは頻繁に変更されています。実際に操作すると、本記事に掲載している画面イメージとは細部が異なる可能性があります。もし、掲載画像と同じ画面が見つからない場合には、似たようなリンク・ボタンなどを探すようにしてみて下さい。本記事で使用している画面イメージは、2012年5月下旬時点のものです。本記事は、2011年12月23日に初版を公開し、2012年5月に一部を現状に合わせて改稿しました。

それでは、実際に「アプリ」を作ってみましょう。必要事項を入力するだけで、簡単に作成できます