• かちびと.net

    Facebookファンページにオリジナルデザインのコンテンツを加える方法をご紹介。日本ではあまり情報がないので書いてみました。Static FBMLというアプリケーションが必要です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

Facebookの「ファンページ」にオリジナルデザインのコンテンツを加える方法

スポンサーリンク

Like!ボタンが思いのほか日本でも良く
見かけるようになって、Facebookも
多少は普及し始めたかな?という印象
なので、Facebookの機能の一つで、
欧米でブランディング等にも使われて
いるファンページにオリジナリティある
デザインのコンテンツを加える方法を
ご紹介します。

Facebook仕様変更により、FBMLは廃止され、Facebookページ(旧ファンページ)はHTMLやjsで作成出来るようになりました。この情報は今後役に立ちません。
新しく書きましたのでこちらをご参照ください

日本でもちょこちょこFacebookの利用者も増え始めてる気がします。そんなFacebookの機能の一つでもあるファンページ。そのままだと若干素っ気ない印象なので、オリジナリティあるコンテンツや、そのデザインを加える方法をご紹介。

Static FBMLを使うのですが、ググッても日本語の情報は皆無なので、この記事が誰かのお役に立てれば幸いです。中にはショッピングサイトっぽくデザインして自社サイトに誘導しているファンサイトもありますよ。折角ならこれくらい作りたいところですね。

Facebookファンページの使い方

はじめに。「ファン」という言葉をが使われていますが、いわゆるコミュニティページを作成出来る、みたいな機能です。Facebookユーザーであれば誰でも作成することができますので、お気軽にチャレンジしてみてはいかがでしょう。

以下から、ファンページの作り方からオリジナルコンテンツを加える方法までの手順を書いておきます。

STEP.1 ファンページを作成

fb-fan-page08
まずはファンページを作成します。ここからスタート。対象を選択する等、詳細を入力してファンページを作成。ここでは例としてこのブログのファンページの作成をしてみますので「ウェブサイト」を選択。

STEP.2 ファンページの詳細を入力

fb-fan-page02
ファンページを作成したらロゴ画像や基本情報等の詳細を決めていきます。

STEP.3 Likeボックスを作る

fb-fan-page03
必要ないなら飛ばしていただいて構いませんが、Likeボックスが必要なら作成します。これはWebサイトやブログに貼るパーツで、サイトを訪れたユーザーにファンページがあることをアピールできるものです。Likeボックスはこちらで作成出来ますよ。

IDはあなたのファンページのURL末尾の数字の羅列です。URLを見れば「?id=」とあるのですぐに分かると思います。幅などを決めてGet Codeをクリックすればコードが発行されますのでコピペするだけ。

STEP.4 ファンページを編集

fb-fan-page05
次に、ファンページに表示させるコンテンツを決めます。左サイドバーの上部に「ファンページを編集」とあるのでそこからコンテンツを編集。いらないアプリケーションは「アプリケーション設定」→「削除」にすれば表示されなくなります。

STEP.5から、記事の表題の「オリジナルデザインのコンテンツを加えるTips」の本題になります。

STEP.5 その他のアプリケーションで「Static FBML」を追加する

fb-fan-page06
ファンページでオリジナルコンテンツを加えるようにする為には、Static FBMLというアプリを追加します。「その他のアプリケーション」から探せますよ。このアプリを加えると、ファンページでHTMLやFacebook独自のマークアップ言語であるFBML(はてな記法みたいな感じ)を使える項目が追加されます。

STEP.6 FBMLを編集

fb-fan-page09
アプリケーションをコネクトしたら「ファンページを編集」の部分にFBMLが追加されているので編集します。上記画像は既に名前を決定した後です。

STEP.7 HTMLやcssでデザインする

fb-fan-page10
タイトルはファンページのタブ名に反映されます。このように、ボックス内にcss(ベタ書きしています)やHTMLコードを加えてデザインしてください。また、HTML以外にも、先程のFacebookのマークアップ言語を使うことも出来ます。FBMLを使えば、より豊かな表現やコンテンツの実装が可能ですが、長くなるので今回は使い方は割愛します。先程のリファレンスページを見れば簡単に使えると思います。

cssをベタ書きするとIEでは表示できないそうです。僕も未確認でした。申し訳ありません。Webクリエイターボックスさんより「全てのCSSをインラインにするとうまく表示された」と教えていただきました。誤解を与えてすみません。

STEP.8 表示をチェック

fb-fan-page11
記事を書くために適当に作りましたが、こんな感じで出来上がりました。動画はFacebookマークアップ言語を使用しないと表示させることが出来ませんのでご注意ください。

FBMLを使いこなそう

このようなオリジナルページを作成するにはFBMLが必須です。記述法は極めて単純ですのでぜひ挑戦してみてください。このFacebookファンページを素敵にデザインしているユーザーのギャラリーが幾つかありますので参考にしてみるのもいいですね。以下にあげておきますのでよろしければ御覧ください。

facebookshowcase

fb-fan-page12

facebookshowcase

Custom Facebook Page Gallery

fb-fan-page13

Custom Facebook Page Gallery

Designing A Facebook Fan Page: Showcases, Tutorials, Resources

fb-fan-page15
デザイン法など、ファンページに関するまとめ記事です。

Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Free FBML Templateなんかも出回ってるのでデザイン出来ない!という方は参考にするのも手かと思います。

以上、Facebookのファンページにオリジナルデザインのコンテンツを加える方法、Tipsでした。

URL :
TRB :

Comments & Trackbacks (24)

  1. attrip

    すげええよくまとまってる!
    おもしろうだから早速作ってる。

  2. attrip

    左サイドバーの変更ができないっす。。。。。
    アプリでどうにかなたないものか。。。

    • シロ

      左サイドはちょっと調べてないですが、基本的にさほど出来ないっぽいですね。。見出しは無理そうですが、ノート機能やウィジェット機能、写真や動画コンテンツを使えばもう少し見栄えがよくなるかもです。

  3. Mana

    FB班多忙のためファンページ作成中…この記事がとっても役立ちましたー!ありがとうございます!

    • シロ

      おおー、こんな記事でも参考になってよかったですwあと、ご連絡もありがとうでしたー!感謝!

  4. waku2

    いったんつくった「FBML」ページを編集、削除する方法は?

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services