タブ用Webページ作成の基本テクニック

 前の節までで、Facebookに独自タブ用のアプリケーションを登録して、タブを表示するための準備ができました。ここからは、実際に独自タブの中身を作る話に入っていきます。まずは、タブの基本的な作成方法から話を始めます。

タブ作成の際の基本的な考え方

 「タブの作成とカスタマイズの基本的な流れ」の節で述べたように、Facebookページの独自タブは、一般的なWebページと同様に、HTMLとCSSを組み合わせて作ります。Webデザインをされている方なら、普段行っていることを、ほぼそのまま独自タブ作成に生かすことができます。

 ただ、Facebook独自の注意点も若干あります。その点を考慮しつつ、HTMLやCSSを組んでいくようにします。そこで、まずは注意すべき点を挙げることから始めます。

独自タブ=幅520ピクセルのWebページ

 まず、一点特殊な点として、「幅が520ピクセルに決まっている」という点があります。図_4_1の例だと、背景に薄い色がついている部分がタブで、その幅が520ピクセルになっています。

 独自タブは、FacebookページのIFrameの中に表示されるWebページです。IFrameの幅が520ピクセルになっていますので、中身のWebページも幅が520ピクセルになるようにデザインする必要があります。幅が520ピクセルを超えると、IFrameに横スクロールバーが表示されてしまいます。

 したがって、スタイルシートを利用して、タブのWebページの幅が520ピクセルになるように、適切にスタイルを指定する必要があります。

図_4_1 独自タブの幅は520ピクセル
独自タブの幅は520ピクセル

IFrameの縦スクロールバーを消す

 タブのIFrameは、幅だけでなく、高さもデフォルトでは800ピクセルに決まっています。そのため、タブのコンテンツの高さが800ピクセルを超えると、IFrameに縦スクロールバーが表示されます。

 この問題は、FacebookのJavaScript SDKを使って解決することができます。SDK内の「FB.Canvas.setAutoResize」または「FB.Canvas.setAutoSize」という関数を使って、IFrameの高さを、その内部のWebページの高さに合わせれば、縦スクロールバーを消すことができます。

1つのタブを複数のタブに分ける

 Facebookページの内容によっては、1つの独自タブの中に、いくつかのコンテンツを分類して表示したい場合もあります。その1つの方法として、jQuery UI Tabsを使って分類表示する方法を解説します。

1つのタブを複数のタブに分けるメリット

 Facebookページに独自タブを追加するには、1つの独自タブにつきアプリケーションを1つ登録することが必要です。そのため、多くのタブを追加したい場合、タブの数だけアプリケーションを登録する必要があり、非常に面倒です。

 そこで、1つの独自タブを、HTMLやJavaScriptを工夫して複数のタブに分け、タブを切り替えて表示できるようにする方法が考えられます。この方法なら、1つの独自タブを、コンテンツの内容ごとにタブに分けることができ、アプリケーションの登録を1回で済ませることができます。

 タブ切り替えを行う方法はいろいろ考えられますが、この節ではjQueryの「jQuery UI Tabs」を使う方法を紹介します。jQuery UI Tabsは、比較的簡単なコードだけで、Webページのコンテンツを複数のタブに分けて表示することができます(画面_5_1、画面_5_2)。

画面_5_1 jQuery UI Tabsを使って、1つの独自タブを複数のタブに分けた例(1枚目のタブ)
1枚目のタブ

画面_5_2 jQuery UI Tabsを使って、1つの独自タブを複数のタブに分けた例(2枚目のタブ)
1枚目のタブ