このページの本文へ

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

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

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

加藤 洋・梅田恭子/TAM

  • この記事をはてなブックマークに追加
本文印刷
fb

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

[画像:ASCII.jp Web Professional の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を追加する]を押します。

[画像:Applications  Involver- The Web's Most Trusted Social Marketing Platform.png]

 設定画面に移動するので、各項目を順番に設定していきます。

[画像:FacebookのStatic HTML for Pages.png]

 最初に、追加するタブで表示するコンテンツの種類を、画像/HTML/SML(involver社が推進しているソーシャル向けに拡張したHTML)の中から選択します。今回は画像を選択します(2)。

 次に、Facebookページ編集画面の「追加済みアプリケーション」に移動し、Static HTML for Pagesの[設定を編集]を選択します。ここでタブ名を変更します(3)。

 続いて、追加するタブの公開範囲を設定します(4)。[Only Fans]を選択すると、「いいね!」してくれた人だけが見られるタブにできます。同時に、「いいね!」してくれた人以外に見せる画像も設定できます。

 最後に、[Save Changes]を押して編集を完了します。Facebookページに移動して正しく表示されているか確認してください。


 Static HTMLはすぐに導入でき、カスタマイズも比較的簡単です。HTMLの記述には一部制約もありますが、ファン/ファン以外向けのページの振り分けも手軽に設定できるので便利です。ぜひ試してみてください。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング