今日からできるFacebookファンページ制作＆運用ガイド ― 第3回

JS+PHPでFacebookページをカスタマイズ！

2011年03月28日 11時00分更新

加藤洋・梅田恭子／TAM

ツイートする

　Facebookを企業で活用するために、Facebookページの開設・運用方法を解説する本連載。前回は、Facebookページの開設の流れと、iframeを使ったウェルカムページの作成方法について、Web ProfessionalのFacebookページを例に解説しました。今回も引き続き、Facebookページのカスタマイズについて詳しく説明します。


Web ProfessionalのFacebookページ

Facebookページをカスタマイズする2つの方法

　Facebookページの本格的なカスタマイズに入る前に、Facebookページへのオリジナルコンテンツの追加方法を整理しておきましょう。Facebookページは複数の「タブ」で構成されており、ページ内に新しい「タブ」を設けることでコンテンツを追加できます。タブを追加する方法は、（1）既存のFacebookアプリを利用する、（2）新しくFacebookアプリを作る、の2つがあります。

（1）既存のFacebookアプリを使う: 　世界中のデベロッパーが作った「Facebookアプリ」をタブとしてFacebookページへ組み込む方法です。アプリにはゲームのようなものもありますが、テキストや画像を表示するだけのシンプルなものもあり、多くは手軽に利用できます（ただし、海外製のアプリが多いので英語のUIやドキュメントを読み解く必要があります）。Facebookの仕様変更によって現在は非推奨とされている「Static FBML」によるカスタマイズも、Facebookが用意した「Static FBMLアプリ」によって実現されています。
（2）新しくFacebookアプリを作る: 　デベロッパーとしてオリジナルのFacebookアプリを作成し、Facebookページに組み込む方法です。既存のアプリを使う方法に比べて自由度が高い分、難易度も高くなります。前回紹介した「iframeを使ったウェルカムページの作成」はこの方法です。

　Facebookページをカスタマイズするときには、自分のFacebookページに必要な機能やデザインの自由度を考えて（1）（2）のいずれかを選択しましょう。本連載では、（2）の方法を基本として取り上げていますが、（1）の方法についてもこの後のコラムで紹介していますのであわせて参考にしてください。

involver社のStatic HTMLを使ったウェルカムページの作成方法

　2011年3月、Facebookページの仕様変更によって、従来のStatic FBMLによる新しいタブの追加ができなくなりました。すでに設置されているタブについては現在のところ編集は可能ですが、Facebookは早急に他の方法に切り替えるよう呼びかけています。

　とはいえ、前回紹介したiframeによるカスタマイズは、Static FBMLに比べて難易度が高く、HTMLファイルを設置するサーバーの選定やFTPなどの知識が必要です。そこで、Static FBMLに代わる簡易的なタブ追加の方法として、米involver社の「Static HTML」やWild fire社の「iframes app」など、いくつかのサードパーティー製アプリが登場しています。ここでは、「Static HTML」を使ったウェルカムページ作成方法を紹介しましょう。

　involver社のアプリケーションリストへアクセスし、Static HTMLの紹介文の下にある［Install］ボタンを押します（1）。自分が管理しているFacebookページの一覧が表示されるので、Static HTMLページを追加したいページを選択し［Static HTML for Pagesを追加する］を押します。