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

thumb_fb

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


※これは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の部分を置き換えてください。その他のパラメターはこちらを参照してください。

<!-- http://www.youtube.com/watch?v=-0jCWkM15ag のYoutube動画を挿入 -->

<fb:swf swfbgcolor="000000" imgstyle="border-width:3px;
border-color:white;" 
swfsrc='http://www.youtube.com/v/-0jCWkM15ag';
imgsrc='http://img.youtube.com/vi/-0jCWkM15ag/2.jpg';
width='480' height='385' />
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月版」をご覧ください。

シェアする

コメント

ニュースレター

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