前の節までで、Facebookに独自タブ用のアプリケーションを登録して、タブを表示するための準備ができました。ここからは、実際に独自タブの中身を作る話に入っていきます。まずは、タブの基本的な作成方法から話を始めます。
「タブの作成とカスタマイズの基本的な流れ」の節で述べたように、Facebookページの独自タブは、一般的なWebページと同様に、HTMLとCSSを組み合わせて作ります。Webデザインをされている方なら、普段行っていることを、ほぼそのまま独自タブ作成に生かすことができます。
ただ、Facebook独自の注意点も若干あります。その点を考慮しつつ、HTMLやCSSを組んでいくようにします。そこで、まずは注意すべき点を挙げることから始めます。
まず、一点特殊な点として、「幅が520ピクセルに決まっている」という点があります。図_4_1の例だと、背景に薄い色がついている部分がタブで、その幅が520ピクセルになっています。
独自タブは、FacebookページのIFrameの中に表示されるWebページです。IFrameの幅が520ピクセルになっていますので、中身のWebページも幅が520ピクセルになるようにデザインする必要があります。幅が520ピクセルを超えると、IFrameに横スクロールバーが表示されてしまいます。
したがって、スタイルシートを利用して、タブのWebページの幅が520ピクセルになるように、適切にスタイルを指定する必要があります。
タブのIFrameは、幅だけでなく、高さもデフォルトでは800ピクセルに決まっています。そのため、タブのコンテンツの高さが800ピクセルを超えると、IFrameに縦スクロールバーが表示されます。
この問題は、FacebookのJavaScript SDKを使って解決することができます。SDK内の「FB.Canvas.setAutoResize」または「FB.Canvas.setAutoSize」という関数を使って、IFrameの高さを、その内部のWebページの高さに合わせれば、縦スクロールバーを消すことができます。
Facebookページの内容によっては、1つの独自タブの中に、いくつかのコンテンツを分類して表示したい場合もあります。その1つの方法として、jQuery UI Tabsを使って分類表示する方法を解説します。
Facebookページに独自タブを追加するには、1つの独自タブにつきアプリケーションを1つ登録することが必要です。そのため、多くのタブを追加したい場合、タブの数だけアプリケーションを登録する必要があり、非常に面倒です。
そこで、1つの独自タブを、HTMLやJavaScriptを工夫して複数のタブに分け、タブを切り替えて表示できるようにする方法が考えられます。この方法なら、1つの独自タブを、コンテンツの内容ごとにタブに分けることができ、アプリケーションの登録を1回で済ませることができます。
タブ切り替えを行う方法はいろいろ考えられますが、この節ではjQueryの「jQuery UI Tabs」を使う方法を紹介します。jQuery UI Tabsは、比較的簡単なコードだけで、Webページのコンテンツを複数のタブに分けて表示することができます(画面_5_1、画面_5_2)。