(Facebookページ制作:基本03)タブに独自のコンテンツを追加しよう

GD122_L

前回の記事で、あなたのFacebookページの基本的なプロフィールを設定し、少しあなたのFacebookページらしくなってきました。

今回は、よりあなたのFacebookページらしくするべく、独自のコンテンツを追加してみましょう。私は前回までのサンプルで架空のレストランのFacebookページを作ったので、旬の料理を紹介するページを作ってみようと思います。

ちょっとフライングですが、今回の作業を行った後のFacebookページは下記のようになります。



左メニューに「旬の料理」というタブが新しく追加されていますね。そして旬の料理タブをクリックすると、旬の料理を説明している一覧が表示されています。

それでは、これを目指して取りかかってみましょう。

Facebookアプリケーションを作成する


あなたのFacebookページに追加するタブは、Facebookの「アプリケーション」という概念になります。つまり、まず「旬の料理アプリケーション」というものを作成し、そのアプリケーションをFacebookページの左メニューにタブとして貼りつけるイメージです。

ちょっと分かりにくいかもしれませんね。でもやってみるとちゃんと出来るので、考えるよりもトライしてみましょう。

それではアプリケーションを作成します。FacebookのDeveloperページへアクセスし、ページ右上の「Set Up New App」ボタンをクリックしてください。


すると画面が切り替わるので、アプリケーションの名前を入力してください。前回と同様、こちらでも「Facebook」などの一部キーワードは利用できないのでご注意おば。私は「旬の料理」タブを作るので、「旬の料理」と入力しました。


画面が切り替わって表示されるセキュリティチェックも入力。

これでアプリケーションの登録が完了しました!次に、いま作成したアプリケーションの設定をしていきます。


Facebookアプリケーションの設定をする


アプリケーションの設定項目はたくさんありますが、とりあえず必要なものだけ設定していきましょう。

アイコンを設定する
まず、「アイコン」を設定しましょう。これは最終的にFacebookページの左メニューに貼りつけたときに表示されるアイコンです。アイコンのサイズは横16px、縦16pxです。

「アイコンを変更」をクリックし、画像を設定してください。


iframeのサイズを設定する
左メニューの「Facebook Integration」をクリックしてください。

「iFrameサイズ」で、タブで表示するページのサイズを指定します。



「Show scrollbars」を選択すると、あなたの表示させる独自コンテンツ(私の場合は旬の料理)のページサイズが「横520px 縦800px」を超えると自動でスクロールバーが表示されます。ページサイズが小さい場合はこちらでもよいですが、大きいページを表示させるとスクロールバーが表示されてしまいカッコわるいかもしれません。

「Auto-resize」を選択すると、iframeの内容に応じて自動で高さを調節できるようになるのでスクロールバーが表示されません。が、ここで設定をすれば自動で調節してくれてラクチン♪というわけではなく、プログラムをいじったりしなくてはいけません。
(こちらのプログラムの組み方については後日別の記事で説明いたします。)

とりあえず今は「Show scrollbars」を選択しておきましょう。

タブ名を設定する
タブの部分に表示されるテキストを設定します。私の場合は「旬の料理」ですね。

○タブのURL
さて、ここがFacebookページを作るときの肝です。



いま私たちはFacebookページに独自コンテンツを作るべく、そのタブの元となるアプリケーションを設定しています。
そして、そのアプリケーションで表示させる中身はどうやって設定するかというと、自分でHTMLなどで作ってあなたのサーバーに保存しなくてはいけません。

Facebookのアプリケーションは、あなたのサーバーへHTML(やPHPなど)を読みにいき、そこの情報をiframeとしてFacebook内で表示させます。

少々むずかしいですが、とにかく、あなたのタブで表示させるコンテンツは、自分でHTMLなどを作成して自分のサーバーに保存しなくてはいけないわけですね。
そして、作成したHTMLのページは横520px以内にする必要があります。縦のサイズは上述のとおりです。

あなたが作成しサーバーに保存したHTMLのURLが「http://sample.com/index.html」の場合、「http://sample.com/」と入力してください。最後に「/」を入れるのをお忘れなく。

その他の項目はそのままで大丈夫です。「変更を保存」をクリックしてください。


Facebookページにタブとして追加しよう


保存するとマイアプリ一覧ページが表示されるので右側の「Application Profile Page」をクリックします。


※もしマイアプリページを見失った場合、開発者ページの右側に表示されているアプリケーション名をクリックしてください。

するとアプリケーション自体のページが表示されるので、左メニュー下部にある「マイページへ追加」をクリックし、追加したいFacebookページを選んでください。


次に、Facebookページにタブを表示させます。あなたの作成したFacebookページを表示し、右上の「Facebookページを編集」ボタンをクリックしてください。


左メニューの「アプリ」をクリックするとあなたが登録しているアプリ一覧が表示され、下の方に今回追加した「旬の料理」アプリケーションがありますので、「設定を編集」から「追加」をクリックしてください。


おつかれさまでした!これで作業はすべて完了です!


Facebookページで確かめてみよう


もう一度あなたのFacebookページをひらくと、左メニューに追加した独自コンテンツのタブ名(旬の料理)が表示されているはずです。
もちろん、タブをクリックするとあなたの作成したHTMLが表示されます。



もしもあなたが今回作成したタブ以外にも新しく「アクセスマップ」や「セール情報」などのタブを追加したい場合、また新しくアプリケーションを作成する必要があります。

※もしも設定をちゃんとしたのに表示されない場合、ページ右上の「アカウント」から「アカウント設定」をひらき、「アカウントのセキュリティ」で「セキュアな接続」のチェックをはずしてください。
Facebookはhttpsの環境ではiframeが表示しないバグが残っているので、こちらのチェックをはずせば表示されるはずです。

さて、これであなたのFacebookページはもう好きなようにカスタマイズできるはずです。

次回からは、より便利なFacebookページにするためのカスタマイズ方法や、クールなFacebookページにするコツをご紹介します。


Facebook Labは、調査・研究で培ったノウハウを活かしたFacebookページ制作サービスも行っています。
Facebookページの制作をお考えの方は、ぜひご相談ください。
詳しくはこちらをご覧ください。いいね!でファンになって頂いた方限定の割引キャンペーン実施中です。

記事を書いた人

ウェブクリエイター。デザイン・コーディング・システム開発を行う。 iPhoneアプリ開発やソーシャルメディア活用をメインに活動中。

View all posts by