Facebookページを自由にカスタマイズする方法
最近会社でFacebookページを作成する事があり、楽しくてすっかりハマってしまったManaです。そのノリでここWebクリエイターボックスのFacebookページも作ってみました。そこで、Facebookページ作成中に役にたったコードやプラグイン・サイトを紹介します。
↑私が10年以上利用している会計ソフト!
※これは2010年に書かれた古い記事です。更新記事「Facebookページの作り方 2012年1月版」をご覧ください。
Facebookページのカスタマイズ概要
Facebookページの基本的な作成手順についてはかちびと.netさんが詳しく解説しています。なので、ここではFacebookページをHTMLやCSSでカスタマイズできるFBMLというアプリケーションやその他のプラグインを使った、もう少し踏み込んだFacebookページのカスタマイズ方法について説明します。以下のリンクをクリックでジャンプします。
- FBMLを使ったベーシックなページを作成
- URLを変更する
- 動画を挿入する
- コメント欄を挿入する
- Google Analyticsでトラッキングする
- RSSフィードを追加する
- Facebookページデザインギャラリー
Facebookページの仕様・注意点
- Facebookが100人以上になるとFacebookページの名前の変更不可
<style type="text/css">
でスタイリングするとIEでは表示されない為、CSSは全てインラインに- 幅は520px
<body>
はないので、全体を囲うDivを使用- JavaScript、Flashはクリックしないと動作しない
ちなみにこちらがWebクリエイターボックスのFacebookページです。お気軽に「いいね!」押してやってください。また今回紹介するために作成したサンプルタブも確認できます。合わせてみてみてくださいね。
1. FBMLを使ったベーシックなページを作成
Facebookページの作成画面から作成・基本設定をします。詳しい流れは「Facebookの「ファンページ」にオリジナルデザインのコンテンツを加える方法」を御覧ください。
520gridでFacebookページ用の520px幅のグリッド付PSD、HTMLファイルがダウンロードできます。デザインやコーディングがより早くできるかも?
2. URLを変更する
Facebookページを作成したのはいいものの、http://www.facebook.com/webcreatorbox#!/pages/Webkurieitabokkusu/171334186212026?v=wall
←こんな感じの長いURLだと覚えにくいし見た目もアレですよね。ということでURLも素敵に変更しちゃいましょう!ただし問題は25人以上ファンがいないと独自のユーザーネームがつけられないという点です。こちらからURLの変更設定ができます。
独自ユーザーネームを設定する時の注意点
- 使える文字は英数字とピリオドのみ
- 大文字・小文字の区別なし
- 「ドメイン名.com」のように.comを使ったユーザーネームは使えない
人気のドメインは争奪戦となります。覚えやすいURLを設定してくださいね。
3. 動画を挿入する
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' />
4. コメント欄を挿入する
Facebookページにコメント欄を挿入するには、ソーシャルプラグインを使用します。ここから設定開始。図のように設置したいページのURLを入力するだけです!生成されたコードをFBML内に貼りつければ設置完了です。
5. Google Analyticsでトラッキングする
どんなユーザーがFacebookページを利用しているのか計測してみましょう!まずはGoogle Analyticsのページの右上セレクトメニューから、新たにFacebook用のアカウントを作成します。
Facebookページ用のオンラインジェネレーターを使って、トラッキング画像を生成します。
6. RSSフィードを追加する
Involverからニュースフィードを流すプラグインが配布されています。このプラグインを使えばNewsというタブが作成され、フィードを流す事ができます。まずはトップページのにRSSフィード欄にある「Install」をクリック。
7. Facebookページデザインギャラリー
見ごたえのあるFacebookページを集めてみました!デザインや機能の参考にしてみてください!
Smartbcn
Cocacola
Levi’s
Aflac Duck
Marlo Schalesky
Porsche
Yummie Tummie
Okanagan Spring Brewery
Okanagan Spring BreweryのFacebookページ
1-800-Flowers.com
Daddy Design
Nine West
Purplest
McDonald’s
Social Mavens
To Save a Life
日本ではまだまだこれからというFacebookですが、続々とマーケティングツールとしてFacebookを活用し始めている企業が増えてきています。素敵なFacebookページを作成してファンを増やしてみてくださいね!
※これは2010年に書かれた古い記事です。更新記事「Facebookページの作り方 2012年1月版」をご覧ください。
facebook周りは気になっていた所でしたので、記事を参考にさせていただこうと思います!
細部まで紹介されていて、とても分かりやすかったです。
ありがとうございます!お役に立てて何よりです!
[…] ファンページの作り方はFacebookのファンページを自由にカスタマイズする方法が詳しいです。 […]
[…] […]
[…] […]
[…] Facebookのファンページを自由にカスタマイズする方法 […]
Facebookいいですねー、
僕もつくろ~、Mana師匠いつもありがとうございます。その前にWordpress page作成して
アップしないと・・・・。師匠これからもよろしくです。
し、師匠…w
なんだか不思議な響きです。Facebookでいろいろ遊んでみてください!
実はたった今ファンページを作成しようと思って調べていたらジャストミートの記事でした。
感謝感激雨嵐!
[…] Facebookファンページのカスタマイズ概要 […]
いつも参考にさせてもらってます!
ひとつ質問なのですが、デザインカスタマイズに使用する画像は、どうやってアップロードするのでしょうか?
外部サーバに置いておいても問題なく使えるようではあるのですが、いくつか見たファンページでは、「http://platform.ak.fbcdn.net」で始まるURLに置いてあるので、何か方法があるのでは無いかと思いまして……。
お答えいただけるとありがたいです。
@monanomiさん
タイムリー!よかったっす!
@studioNoiRさん
うーん、そのURLは初めて聞きました。私の知る限りは別サーバーに自分でアップロードして、そのURLを記述する、というやり方です。もしかしたらPicasaや http://min.us/ のような画像を保存できるサービスを使っているのかもしれませんね。
facebookにファンページを作成してみました…
新年のご挨拶もせずに更新をサボっていました。 本年もよろしくお願いいたします。 昨年の後半辺りからfacebookの話題を耳にする機会が増えたり、ネットの海で海賊団の親分をやっている方から年末にレクチャーを受けたりして、いろいろ気になっていたfacebook。 触っている内に徐々に理解して来たので、ここらで勉強や実験を兼ねてファンページを作成してみました。 まずは、ファンページの開設自体はかちびと.netさんの記事を参考にさせて頂きました。STEP2まで記事通りに進めてゆけば、簡単にファンページが開…
[…] […]
[…] […]
[…] […]
[…] […]
[…] Facebookのファンページを自由にカスタマイズする方法 | Webクリエイターボックス via webcreatorbox.com […]
[…] […]
[…] Facebookページを自由にカスタマイズする方法 | Webクリエイターボックス […]
[…] webクリエイターボックス〔link〕 Facebookページを自由にカスタマイズする方法 […]
[…] Facebookページを自由にカスタマイズする方法 […]
[…] Facebookページを自由にカスタマイズする方法 […]
大変参考になりました!いろいろ研究してみたいと思います!
[…] Facebookページを自由にカスタマイズする方法 Webクリエイターボックス 動画マニュアル.com – Facebook – フェイスブック 使い方 […]
[…] Shared Facebookページを自由にカスタマイズする方法 | Webクリエイターボックス. […]
Facebookページを自由にカスタマイズする方法…
日本でもだいぶ普及してきた感があるFacebookですが、カスタマイズ可能だという。あまり馴染みのないFacebookのカスタマイズに触れている貴重な記事。Facebookをやってる人には必見です。……
今後、Facebookのデザインの需要が増えてくると思っていた所で、とても参考になりました。
はじめまして、WEB制作をしているSERI@GadgetShopと申します。
先日、お客様から相談されたので今自社のファンページを作ってます。個人用ページもうまく使えてなかったので、参考にさせて頂きたい情報ばかりで大変助かってます。今後もちょくちょく遊びにきます。どうぞよろしくm(- -)m
サーバーいらずで自由にカスタマイズできる
Facebookページ用アプリFacmo
http://apps.facebook.com/lig_facmo/
[…] ※「クリエイターボックス」のこの記事を参考にさせてもらいました。 […]
[…] Facebookページを自由にカスタマイズする方法 | Webクリエイターボックス […]
素晴らしい! 情報ありがとうございます。これからがんばります。
[…] Facebookページを自由にカスタマイズする方法/Webクリエイターボックス […]
Manaさんはじめまして、yumidutiといいます。
僕は最近Facebookを始めて、今は会社のFacebookページを勉強しながら作っています。
それなので、いつもとても参考になっています。
これからもちょくちょく見にきます。
どうぞ、よろしくおねがいします!
[…] 一年ちょっと前に「Facebookページを自由にカスタマイズする方法」という記事でFacebookページの作成方法を説明したのですが、Facebookはコロコロ仕様を変更するため、その記事を読んでもF […]
[…] カスタマイズするのに参考になる記事:かちびと.net:Facebookの「ファンページ」にオリジナルデザインのコンテンツを加える方法クリエイターボックス:Facebookページを自由にカスタマイズする方法 […]