前の節までで、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)。
画面_5_1 jQuery UI Tabsを使って、1つの独自タブを複数のタブに分けた例(1枚目のタブ)
画面_5_2 jQuery UI Tabsを使って、1つの独自タブを複数のタブに分けた例(2枚目のタブ)
まず、jQueryのサイトでタブのデザインを行い、その後にjQuery UI Tabsをダウンロードします。
タブを含め、jQuery UIのデザインを行うには、「http://jqueryui.com/themeroller/」のページに接続します(画面_5_3)。
ページ左上端の「ThemeRoller」の部分で、タブをはじめとして、ユーザーインターフェース関係の色やフォントなどを設定することができます。最初に、「Gallery」のタブをクリックして基本のテーマを選んでおき、その後に「Font Settings」などの個々の項目を設定します。
画面_5_3 タブのデザインの例
タブのデザインが終わったら、ThemeRollerの中にある「Download theme」のボタンをクリックし、「Build Your Download」のページに移動します。そして、以下の手順でjQuery UI Tabsをダウンロードします(画面_5_4)。
画面_5_4 jQuery UI Tabsをダウンロードする(「Select all components」の枠内は、このページを開いた時点では「Deselect all components」と表示される)
ダウンロードが終わったら、そのZipファイルを解凍しておきます。そして、その中にある「js」と「css」のフォルダを、タブ用のHTMLファイルと同じフォルダにコピーします。
なお、筆者が試した時には、jQueryのサイトの調子が良くなかったのか、Zipファイルのダウンロードが途中で切れてしまうことがありました。正しくダウンロードできた時には、Zipファイルのサイズは300KB程度になりますので、それよりサイズが小さい場合は、ダウンロードをやり直すようにします。
Facebookページには、ページ全体に対して「いいね」を付ける機能があります。これに対応して、「いいね」されているかどうかで、タブの表示を変える方法を解説します。
Facebookページでは、ページ全体に対して「いいね」をつけるためのボタンがあります(画面_6_1)。そして、「いいね」をつけてくれた人にだけ、特別なアクションを起こす機能があります。例えば、「いいね」をつけてくれた人に対して、Facebookページを更新したことをメールで通知する機能があります。
Facebookページに独自タブを追加する場合、Facebookページ全体に「いいね」を付けてくれた人にだけ、何か特別なコンテンツを提供したいことも、よくあります。実際、そのような機能を、独自タブに盛り込むことができるようになっています。
自分のFacebookページを訪問してくれたユーザーが「いいね」を付けてくれたかどうかは、「signed_request」という情報で判断することができます。signed_requestには、「いいね」を付けてくれたかどうかだけでなく、ユーザーのIDや国など、いくつかの情報が含まれています。
「いいね」の状況に応じて表示する内容を変えるには、PHP等のサーバー側の処理を使って、signed_requestの内容を調べて、条件判断を行います。
サーバー側の処理は、どのようなプログラム言語で書いても構いません。ただ、PHPだとFacebookからSDKが提供されていて、プログラムを作りやすいです。そこでこの節では、独自タブをPHPで作り、PHP SDKを使って判断する方法を紹介します。
まず、PHP SDKをダウンロードします。PHP SDKは、Githubの以下のページからダウンロードすることができます。このページに接続すると、ページの右上の方にダウンロードのリンクがあります。
https://github.com/facebook/php-sdk/
ダウンロードしたZipファイルを解凍すると、その中に「src」というフォルダがあります。このsrcフォルダが、PHP SDKの本体です。srcフォルダをご自分のサーバーにアップロードして使います。
アップロード先のディレクトリは、独自タブのPHPからアクセスできるディレクトリであれば、どこでも構いません。独自タブのPHPと同じディレクトリに、srcフォルダをアップロードすると分かりやすいです。