自由にHTMLを書くFacebookページの作り方(2ページ目)

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

まずは、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または810px）です。以前は520px限定でしたが、Facebookが新しいレイアウトに変わってからは、810pxが追加されました。今後もこの仕様は変わる可能性がありますから、できるだけリキッドレイアウト（可変長）で作っておく方が望ましいでしょう。

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

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

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

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

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

つまり、

• 『ようこそ！』ページを表示させるためのアプリ
• 『新着記事』ページを表示させるためのアプリ
• 『おすすめ記事』ページを表示させるためのアプリ

……などのように、1ページずつ独立したアプリを作って利用します。アプリを作るといっても、プログラミング能力は一切不要です。名称やURLなどを登録するだけで済みます。

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

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