Facebookの「Likebox」を自由にカスタマイズ

こちらの記事で紹介しているカスタマイズ方法ですが、Facebook側の仕様変更のためか、表示されたりされなかったりを繰り返す不安定な状態です。現在は利用できていないようです。当記事ご参照の際はお気をつけください。

—

【2013年2月6日追記】
1月25日から表示がきかなくなっていましたが、再度表示されるようになりました。仕様変更の情報など追っているわけではありませんので今後どうなるかわかりませんが…。

【2013年1月25日追記】
2013年1月25日の朝から表示が効かなくなりました…。Facebook仕様変わったのかもしれません。（明確な情報持っていません）
現在、当該記事で紹介しているTipsが適用されない状態になっておりますのであしからずご了承ください。解決法が見つかればいいのですが…。

—————ここから本文—————

Facebookの「Likebox」は、ソーシャルプラグインページで簡単にソースを取得して自分のサイトに貼付けたりできる便利な機能ですが、提供しているパラメータの設定の範囲でしか変更ができず、デザインも「light」か「dark」かが選べるだけです。
このサイトでも、フッターにLikeboxを配置してみたものの、配色が微妙だなぁなんとかしたいなぁと思っていたところ、下記の記事を見つけてカスタマイズに挑戦してみました。

FacebookのLikebox(いいね！ボックス)を結構カスタマイズしちゃいたい。 (wald-grun/blog)
How To Add a Custom Facebook Like Box to Your Site

そこそこ手順を踏まないといけないのですが、これをやれば手持ちのCSSで設定できるので、プラグインページではできなかったような、背景の色を変えたり、画像入れたり、サムネールのサイズを変えたりできて一度覚えたら重宝するかもです。

【1】FacebookページのIDを調べておく
（例：ウルトラエルFacebookページの場合）
https://www.facebook.com/UltraL.net/182165358470028

【2】APIキーの取得
使用するサイトのドメインを正確に入力する必要があります。
http://developers.facebook.com/setup/

【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" connections="アイコン表示数" width="幅" height="高さ"></fb:fan>

【4】CSSのURLをパラメータとして追加
css=”http://XXXXXX.com/XXXX/style.css?1″
CSSはフルパスです。ドメインはAPIキーを取得する際に登録したドメインと同一でなければいけません。

<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” connections=”アイコン表示数” width=”幅” height=”高さ” css=”http://XXXXXX.com/XXXX/style.css?1″></fb:fan>

※CSSを変更して確認する場合、Facebookのキャッシュが残ってしまうため、「?1」の数字の部分を変更しながら確認します。

—-

【2012年7月17日追記】
おや？表示部分の仕様かわった？？対処方法を探してみたら、以下の記事で解決策が。

FeatureLoader.js.phpの仕様変更？と対策 | Archiveproducts : Webデザインや広告写真のご相談は是非アーカイブプロダクツへ

▼というわけで最新のコードはこちら。stream=”0″のパラメータが追加されています。

<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=”アイコン表示数” width=”幅” height=”高さ” css=”http://XXXXXX.com/XXXX/style.css?1″></fb:fan>

—-

【2012年7月19日追記】
あら、IEで表示されてない…。

下記記事「Loading」部分を参照して対処したら直りました。記述不足だったようです。
JavaScript SDK : Facebook開発者向けドキュメントの日本語訳とTips

というわけで、下記記述も必要っぽいです。

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : ‘APP ID入れる‘,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>