FacebookのLikeBoxをオリジナルデザインにカスタマイズする方法をメモ

1.APIキーを取得

まずは、APIキーを取得するために、Facebookアプリを新規で作成します。
取得には、
https://developers.facebook.com/apps/
こちらから、『新しいアプリを作成』ボタンを押し、
表示されるウインドウに従って、アプリ名の入力やセキュリティチェックをします。

そして作成されたアプリの
・アプリID / APIキー
○○○○○
・アプリのシークレットキー
○○○○○

という部分があると思うので、そのアプリID / APIキーの部分が必要となるAPIキーです。

2.FaceBookページIDの取得

次に、LikeBoxに表示させるフェイスブックページのページIDを取得します。
これは、
http://graph.facebook.com/[ユーザーネーム(ユニークURL)]
で調べることができます。
※詳しくはFacebookページIDを簡単に確認する方法
こちらのサイト様を参考にしてください。

3.サイトへの組み込み

あとは、表示させたい場所に

<div id="fb-root"></div> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript">FB.init("ここにAPIキー");</script> <fb:fan profile_id="ここにページID" stream="0" connections="12" width="220" height="500" css="ここにCSSまでのパス(http://www.○○○.com/css/style.css?1)"></fb:fan>

このソースの
・APIキー
・ページID
・CSSまでのパス
を入れればOK。

stream=””は0がOFF 1がONです。
connections=””はLikeBoxに表示させるいいねを押してくれた人の顔の数です。

これでCSSをいじってオリジナルデザインにすることが可能ですが、
CSSを編集するために、iframeの中身を見ないといけないので、FirefoxのFirebugなどのアドオンを使いソースを確認しながらCSSを編集してください。
また、キャッシュが強力なのでCSSを編集して確認する際は、CSSまでのパスの末尾に?1~等をいれて確認してください。

最後に、

<script src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'ここにアプリID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

このソースを記述すればOK。

※フェイスブックのLikeBoxは、
個人ページでは使えず、フェイスブックページ(企業やお店のページ)でしか使えません。
フェイスブックページの作り方は、個人ページの一番下らへんに「ページ作成」というのがあるので、そちらをクリックし、あとは画面の指示に従っていけば作れます。