Facebookページを自由にカスタマイズする方法

最近会社でFacebookページを作成する事があり、楽しくてすっかりハマってしまったManaです。そのノリでここWebクリエイターボックスのFacebookページも作ってみました。そこで、Facebookページ作成中に役にたったコードやプラグイン・サイトを紹介します。


↑私が10年以上利用している会計ソフト!

※これは2010年に書かれた古い記事です。更新記事「Facebookページの作り方 2012年1月版」をご覧ください。

Facebookページのカスタマイズ概要

WebクリエイターボックスのFacebookページ

Facebookページの基本的な作成手順についてはかちびと.netさんが詳しく解説しています。なので、ここではFacebookページをHTMLやCSSでカスタマイズできるFBMLというアプリケーションやその他のプラグインを使った、もう少し踏み込んだFacebookページのカスタマイズ方法について説明します。以下のリンクをクリックでジャンプします。

  1. FBMLを使ったベーシックなページを作成
  2. URLを変更する
  3. 動画を挿入する
  4. コメント欄を挿入する
  5. Google Analyticsでトラッキングする
  6. RSSフィードを追加する
  7. Facebookページデザインギャラリー

Facebookページの仕様・注意点

  • Facebookが100人以上になるとFacebookページの名前の変更不可
  • <style type="text/css"> でスタイリングするとIEでは表示されない為、CSSは全てインラインに
  • 幅は520px
  • <body> はないので、全体を囲うDivを使用
  • JavaScript、Flashはクリックしないと動作しない

ちなみにこちらがWebクリエイターボックスのFacebookページです。お気軽に「いいね!」押してやってください。また今回紹介するために作成したサンプルタブも確認できます。合わせてみてみてくださいね。

1. FBMLを使ったベーシックなページを作成

Facebookページ作成

Facebookページの作成画面から作成・基本設定をします。詳しい流れは「Facebookの「ファンページ」にオリジナルデザインのコンテンツを加える方法」を御覧ください。

Facebookページを編集

ロゴ下の「Facebookページを編集」をクリック

アプリケーションへ移動

アプリケーション>アプリケーションを追加>アプリケーションへ移動 で、FBMLでのカスタマイズができるようになります。

HTML/CSSを記述

基本的なHTML/CSSを記述していきます。CSSはインラインにしないとIEではうまく表示されないようです。

ベーシックなFacebookページ

こんな感じに表示されました!

ランディングページの設定

デフォルトではウォールが一番最初に表示されますが、権限の管理欄より作成したFBMLページをランディングページにできます。

520gridでFacebookページ用の520px幅のグリッド付PSD、HTMLファイルがダウンロードできます。デザインやコーディングがより早くできるかも?

» サンプルFacebookページを見る

Facebookページのカスタマイズ概要 目次へ。

2. URLを変更する

Facebookページを作成したのはいいものの、http://www.facebook.com/webcreatorbox#!/pages/Webkurieitabokkusu/171334186212026?v=wall ←こんな感じの長いURLだと覚えにくいし見た目もアレですよね。ということでURLも素敵に変更しちゃいましょう!ただし問題は25人以上ファンがいないと独自のユーザーネームがつけられないという点です。こちらからURLの変更設定ができます。

ファンページのURLを変更

ファンが25人以下の場合は↑このような画面が表示されます。25人のファンが集まったら、横にユーザーネームを入力するボックスが表示されますよ。

独自ユーザーネームを設定する時の注意点

  • 使える文字は英数字とピリオドのみ
  • 大文字・小文字の区別なし
  • 「ドメイン名.com」のように.comを使ったユーザーネームは使えない

人気のドメインは争奪戦となります。覚えやすいURLを設定してくださいね。

» サンプルFacebookページを見る

Facebookページのカスタマイズ概要 目次へ。

3. 動画を挿入する

Youtube動画を挿入する

Youtube動画を挿入する場合は、FBML独自のコードを使用する必要があります。上記コードのYoutubeIDの部分を置き換えてください。その他のパラメターはこちらを参照してください。

&lt;!-- http://www.youtube.com/watch?v=-0jCWkM15ag のYoutube動画を挿入 --&gt;

&lt;fb:swf swfbgcolor=&quot;000000&quot; imgstyle=&quot;border-width:3px;
border-color:white;&quot; 
swfsrc='http://www.youtube.com/v/-0jCWkM15ag';
imgsrc='http://img.youtube.com/vi/-0jCWkM15ag/2.jpg';
width='480' height='385' /&gt;
Youtube動画の表示画面

うまく表示されました!

» サンプルFacebookページを見る

Facebookページのカスタマイズ概要 目次へ。

4. コメント欄を挿入する

コメント欄を挿入

Facebookページにコメント欄を挿入するには、ソーシャルプラグインを使用します。ここから設定開始。図のように設置したいページのURLを入力するだけです!生成されたコードをFBML内に貼りつければ設置完了です。

コメント欄

用途次第でいろいろ使えそうですね。

» サンプルFacebookページを見る

Facebookページのカスタマイズ概要 目次へ。

5. Google Analyticsでトラッキングする

Google Analyticsでトラッキングする

どんなユーザーがFacebookページを利用しているのか計測してみましょう!まずはGoogle Analyticsのページの右上セレクトメニューから、新たにFacebook用のアカウントを作成します。

Google Analyticsの設定

URLはfacebook.com、アカウント名にはお好きな名前を入力します。画面の指示に従ってコードを生成。

オンラインジェネレーター

Facebookページ用のオンラインジェネレーターを使って、トラッキング画像を生成します。

FBMLにコピペして完成

表示された画像コードをFBMLにコピペして完成です!

» サンプルFacebookページを見る

Facebookページのカスタマイズ概要 目次へ。

6. RSSフィードを追加する

involver

Involverからニュースフィードを流すプラグインが配布されています。このプラグインを使えばNewsというタブが作成され、フィードを流す事ができます。まずはトップページのにRSSフィード欄にある「Install」をクリック。

プラグインを追加

クリックしてプラグインを追加

自分の情報、RSSフィードのURL等を入力

自分の情報、RSSフィードのURL等を入力して「Save Changes」をクリック。電話番号は適当でよさそう…。

「Contenue to Fan Page」をクリック

「Contenue to Fan Page」をクリックすると…

 Newsタブが設置されました。

Newsタブが設置されました!Involverのサイトでは他にもYoutubeチャンネルやFlickr、Twitter用のタブを作成するためのプラグインが用意されているので、用途にあわせて試してみてください。

» サンプルFacebookページを見る

Facebookページのカスタマイズ概要 目次へ。

7. Facebookページデザインギャラリー

見ごたえのあるFacebookページを集めてみました!デザインや機能の参考にしてみてください!

Smartbcn

SmartbcnのFacebookページ

デザインだけでなく、カルーセルギャラリーやビデオ、コメント欄、フォームなど、機能も多彩なページ。

Cocacola

CocacolaのFacebookページ

cocacola

定番の赤を基調としたシンプルで見やすいページ。スッキリとまとまっています。

Levi’s

Levi’sのFacebookページ

メモや手書き風フォントがとってもかわいいですね。

Aflac Duck

Aflac DuckのFacebookページ

スッキリとまとまったページ。動画・ギャラリー・Twitter・コメント欄あり。

Marlo Schalesky

Marlo SchaleskyのFacebookページ

MarloSchalesky

大人っぽいシックな雰囲気が漂っています。動画・フォームあり。

Porsche

PorscheのFacebookページ

車の色を選択してプレビューが見れます。見ていて楽しくなりますね。

Yummie Tummie

Yummie TummieのFacebookページ

yummietummie

ポップな色合いが見る人を惹きつけるかわいらしいページ。

Okanagan Spring Brewery

Okanagan Spring BreweryのFacebookページ

Okanagan Spring Brewery

多数あるイベントを一覧表示しています。黒×赤でデザインもかっこいいですね。

1-800-Flowers.com

1-800-Flowers.comのFacebookページ

アンケート・メルマガ用フォーム・Twitterフィードもついた機能性満点なページ。

Daddy Design

Daddy DesignのFacebookページ

Daddy Design

コンテスト用の特設ページ。大きなフォントがインパクトあります。

Nine West

Nine WestのFacebookページ

木目調であたたかみがあります。他のタブも美しくデザインされています。

Purplest

PurplestのFacebookページ

エレガントな色合いに曲線や散りばめられた写真の配置がポイントになっています。

McDonald’s

McDonald’sのFacebookページ

mcdonalds

どのタブも大きな画像でインパクトがあります。MacCafeのタブではギャラリーが出現します。

Social Mavens

Social MavensのFacebookページ

蜂のイラストがかわいらしいページ。大きな文字も特徴。

To Save a Life

To Save a LifeのFacebookページ

ダーク&グランジ感がかっこいいページ。

» サンプルFacebookページを見る

Facebookページのカスタマイズ概要 目次へ。

日本ではまだまだこれからというFacebookですが、続々とマーケティングツールとしてFacebookを活用し始めている企業が増えてきています。素敵なFacebookページを作成してファンを増やしてみてくださいね!

※これは2010年に書かれた古い記事です。更新記事「Facebookページの作り方 2012年1月版」をご覧ください。

シェアする

コメント

“Facebookページを自由にカスタマイズする方法” への37件のフィードバック

  1. たんたん より:

    facebook周りは気になっていた所でしたので、記事を参考にさせていただこうと思います!
    細部まで紹介されていて、とても分かりやすかったです。

  2. Webクリエイターボックス より:

    ありがとうございます!お役に立てて何よりです!

  3. […] ファンページの作り方はFacebookのファンページを自由にカスタマイズする方法が詳しいです。 […]

  4. ei1029 より:

    Facebookいいですねー、
    僕もつくろ~、Mana師匠いつもありがとうございます。その前にWordpress page作成して
    アップしないと・・・・。師匠これからもよろしくです。

  5. Webクリエイターボックス より:

    し、師匠…w
    なんだか不思議な響きです。Facebookでいろいろ遊んでみてください!

  6. monanomi より:

    実はたった今ファンページを作成しようと思って調べていたらジャストミートの記事でした。
    感謝感激雨嵐!

  7. studioNoiR より:

    いつも参考にさせてもらってます!
    ひとつ質問なのですが、デザインカスタマイズに使用する画像は、どうやってアップロードするのでしょうか?
    外部サーバに置いておいても問題なく使えるようではあるのですが、いくつか見たファンページでは、「http://platform.ak.fbcdn.net」で始まるURLに置いてあるので、何か方法があるのでは無いかと思いまして……。
    お答えいただけるとありがたいです。

  8. Webクリエイターボックス より:

    @monanomiさん
    タイムリー!よかったっす!

    @studioNoiRさん
    うーん、そのURLは初めて聞きました。私の知る限りは別サーバーに自分でアップロードして、そのURLを記述する、というやり方です。もしかしたらPicasaや http://min.us/ のような画像を保存できるサービスを使っているのかもしれませんね。

  9. studioNoiR より:

    facebookにファンページを作成してみました…

    新年のご挨拶もせずに更新をサボっていました。 本年もよろしくお願いいたします。 昨年の後半辺りからfacebookの話題を耳にする機会が増えたり、ネットの海で海賊団の親分をやっている方から年末にレクチャーを受けたりして、いろいろ気になっていたfacebook。 触っている内に徐々に理解して来たので、ここらで勉強や実験を兼ねてファンページを作成してみました。 まずは、ファンページの開設自体はかちびと.netさんの記事を参考にさせて頂きました。STEP2まで記事通りに進めてゆけば、簡単にファンページが開…

  10. […] Facebookのファンページを自由にカスタマイズする方法 | Webクリエイターボックス via webcreatorbox.com […]

  11. […] Facebookページを自由にカスタマイズする方法 | Webクリエイターボックス […]

  12. […] webクリエイターボックス〔link〕 Facebookページを自由にカスタマイズする方法 […]

  13. […] Facebookページを自由にカスタマイズする方法 […]

  14. […] Facebookページを自由にカスタマイズする方法 […]

  15. はんな より:

    大変参考になりました!いろいろ研究してみたいと思います!

  16. […] Facebookページを自由にカスタマイズする方法 Webクリエイターボックス 動画マニュアル.com – Facebook – フェイスブック 使い方 […]

  17. […] Shared Facebookページを自由にカスタマイズする方法 | Webクリエイターボックス. […]

  18. Facebookページを自由にカスタマイズする方法…

    日本でもだいぶ普及してきた感があるFacebookですが、カスタマイズ可能だという。あまり馴染みのないFacebookのカスタマイズに触れている貴重な記事。Facebookをやってる人には必見です。……

  19. RYO0702 より:

    今後、Facebookのデザインの需要が増えてくると思っていた所で、とても参考になりました。

  20. はじめまして、WEB制作をしているSERI@GadgetShopと申します。

    先日、お客様から相談されたので今自社のファンページを作ってます。個人用ページもうまく使えてなかったので、参考にさせて頂きたい情報ばかりで大変助かってます。今後もちょくちょく遊びにきます。どうぞよろしくm(- -)m

  21. lig develop より:

    サーバーいらずで自由にカスタマイズできる
    Facebookページ用アプリFacmo
    http://apps.facebook.com/lig_facmo/

  22. […] ※「クリエイターボックス」のこの記事を参考にさせてもらいました。 […]

  23. […] Facebookページを自由にカスタマイズする方法 | Webクリエイターボックス […]

  24. 愛野ルミエ より:

    素晴らしい! 情報ありがとうございます。これからがんばります。

  25. […] Facebookページを自由にカスタマイズする方法/Webクリエイターボックス […]

  26. yumiduti より:

    Manaさんはじめまして、yumidutiといいます。
    僕は最近Facebookを始めて、今は会社のFacebookページを勉強しながら作っています。
    それなので、いつもとても参考になっています。

    これからもちょくちょく見にきます。
    どうぞ、よろしくおねがいします!

  27. […] 一年ちょっと前に「Facebookページを自由にカスタマイズする方法」という記事でFacebookページの作成方法を説明したのですが、Facebookはコロコロ仕様を変更するため、その記事を読んでもF […]

  28. […] カスタマイズするのに参考になる記事:かちびと.net:Facebookの「ファンページ」にオリジナルデザインのコンテンツを加える方法クリエイターボックス:Facebookページを自由にカスタマイズする方法 […]

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)