Like!ボタンが思いのほか日本でも良く
見かけるようになって、Facebookも
多少は普及し始めたかな？という印象
なので、Facebookの機能の一つで、
欧米でブランディング等にも使われて
いるファンページにオリジナリティある
デザインのコンテンツを加える方法を
ご紹介します。
[note]Facebook仕様変更により、FBMLは廃止され、Facebookページ（旧ファンページ）はHTMLやjsで作成出来るようになりました。この情報は今後役に立ちません。
新しく書きましたのでこちらをご参照ください[/note]
日本でもちょこちょこFacebookの利用者も増え始めてる気がします。そんなFacebookの機能の一つでもあるファンページ。そのままだと若干素っ気ない印象なので、オリジナリティあるコンテンツや、そのデザインを加える方法をご紹介。
Static FBMLを使うのですが、ググッても日本語の情報は皆無なので、この記事が誰かのお役に立てれば幸いです。中にはショッピングサイトっぽくデザインして自社サイトに誘導しているファンサイトもありますよ。折角ならこれくらい作りたいところですね。
Facebookファンページの使い方
はじめに。「ファン」という言葉をが使われていますが、いわゆるコミュニティページを作成出来る、みたいな機能です。Facebookユーザーであれば誰でも作成することができますので、お気軽にチャレンジしてみてはいかがでしょう。
以下から、ファンページの作り方からオリジナルコンテンツを加える方法までの手順を書いておきます。
STEP.1 ファンページを作成
まずはファンページを作成します。ここからスタート。対象を選択する等、詳細を入力してファンページを作成。ここでは例としてこのブログのファンページの作成をしてみますので「ウェブサイト」を選択。
STEP.2 ファンページの詳細を入力
ファンページを作成したらロゴ画像や基本情報等の詳細を決めていきます。
STEP.3 Likeボックスを作る
必要ないなら飛ばしていただいて構いませんが、Likeボックスが必要なら作成します。これはWebサイトやブログに貼るパーツで、サイトを訪れたユーザーにファンページがあることをアピールできるものです。Likeボックスはこちらで作成出来ますよ。
IDはあなたのファンページのURL末尾の数字の羅列です。URLを見れば「?id=」とあるのですぐに分かると思います。幅などを決めてGet Codeをクリックすればコードが発行されますのでコピペするだけ。
STEP.4 ファンページを編集
次に、ファンページに表示させるコンテンツを決めます。左サイドバーの上部に「ファンページを編集」とあるのでそこからコンテンツを編集。いらないアプリケーションは「アプリケーション設定」→「削除」にすれば表示されなくなります。
[note]STEP.5から、記事の表題の「オリジナルデザインのコンテンツを加えるTips」の本題になります。[/note]
STEP.5 その他のアプリケーションで「Static FBML」を追加する
ファンページでオリジナルコンテンツを加えるようにする為には、Static FBMLというアプリを追加します。「その他のアプリケーション」から探せますよ。このアプリを加えると、ファンページでHTMLやFacebook独自のマークアップ言語であるFBML（はてな記法みたいな感じ）を使える項目が追加されます。
STEP.6 FBMLを編集
アプリケーションをコネクトしたら「ファンページを編集」の部分にFBMLが追加されているので編集します。上記画像は既に名前を決定した後です。
STEP.7 HTMLやcssでデザインする
タイトルはファンページのタブ名に反映されます。このように、ボックス内にcss（ベタ書きしています）やHTMLコードを加えてデザインしてください。また、HTML以外にも、先程のFacebookのマークアップ言語を使うことも出来ます。FBMLを使えば、より豊かな表現やコンテンツの実装が可能ですが、長くなるので今回は使い方は割愛します。先程のリファレンスページを見れば簡単に使えると思います。
[note]cssをベタ書きするとIEでは表示できないそうです。僕も未確認でした。申し訳ありません。Webクリエイターボックスさんより「全てのCSSをインラインにするとうまく表示された」と教えていただきました。誤解を与えてすみません。[/note]
STEP.8 表示をチェック
記事を書くために適当に作りましたが、こんな感じで出来上がりました。動画はFacebookマークアップ言語を使用しないと表示させることが出来ませんのでご注意ください。
FBMLを使いこなそう
このようなオリジナルページを作成するにはFBMLが必須です。記述法は極めて単純ですのでぜひ挑戦してみてください。このFacebookファンページを素敵にデザインしているユーザーのギャラリーが幾つかありますので参考にしてみるのもいいですね。以下にあげておきますのでよろしければ御覧ください。
facebookshowcase
Custom Facebook Page Gallery
Designing A Facebook Fan Page: Showcases, Tutorials, Resources
デザイン法など、ファンページに関するまとめ記事です。
Designing A Facebook Fan Page: Showcases, Tutorials, Resources
Free FBML Templateなんかも出回ってるのでデザイン出来ない！という方は参考にするのも手かと思います。
以上、Facebookのファンページにオリジナルデザインのコンテンツを加える方法、Tipsでした。
