FacebookのLikebox(いいね!ボックス)を結構カスタマイズしちゃいたい。

※ご注意(2013/02/01追記)
こちらのエントリーは2011年2月に書いたもので、現在は使えなくなっているようです。正直facebookにはもうあまり興味がありませんので、追っての検証等は行っておりません。情報を探してたどり着いた方には大変申し訳ございません・・・。

非表示にすることも考えたのですが、このページにリンクを張ってくださっている方もいらっしゃるので、残したままで注意書きする形にさせていただきました。

以下、以前からの本文です。————-+

まだまだ海の物とも山の物ともという雰囲気は残しつつ、それでも業界内では来るんじゃないかと盛り上がってる風のFacebookですが、弊社でもお客様のサイトのソーシャル対応として「いいね!」をつけたり、「◯人がいいねと言っています」のボックスをつけたりしています。

そのボックスタイプのやつ、likeboxというらしいのですが、その設置の仕方と比較的簡単な方のカスタマイズ方法はざっくり割愛。ググったらわりと出てきますものね。

設置はこんな感じで、カスタマイズはこんな感じで調べたら結構でてきますね。

さて、これらのコード、設置後実行されるとiframeでソースが提供されるため、もともとパラメータが設定されている項目以外のカスタマイズができません。でも、サイトの雰囲気に合わせてもう少しなんとかしたいと思うことは多いはず。そこでCSSを使用可能にする設置方法をご紹介します。

英語だったので半分も理解できていないとは思うのですが、以下のサイトを参考にしました。

How To Add a Custom Facebook Like Box to Your Site View the article

超抜粋しながら、手順だけを説明していきます。コンセプトは「動けば正義」です。細かいところは違うんでしょうけど、気にしません。ちっちゃいことーは気にすんなっの心意気です。

FacebookのページIDを把握

ファンページのURLの末尾についている数値がそのページのIDとなります。例えば弊社がテスト的に作成しているファンページのURLは以下の通りですが、これの赤くした部分がページIDです。

http://www.facebook.com/pages/Ligco/151284414928781

APIキーの取得

設置の際に用いられるJavascriptの動作にAPIキーが必要となります。こちらのページから取得できます。各項目に入力して「Create APP」を押してください。

この際に注意が必要なのは、ここで入力するドメイン名はAPIキーと対になっており、登録したドメインでしか使えません。使用予定のサイトのドメインを正確に入力してください。

以下のような画面が出れば取得完了です。

これの「アプリの秘訣」ってのが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="高さ"></fb:fan>

貼付けたHTMLを開いて、Likeboxが普通に表示されたらひとまず成功です。

CSSの設定

表示したボックス用のCSSを同一ドメイン化にアップし、先ほど挿入したコードに以下のような感じでCSSのURLをパラメータとして追加します。

css="http://XXXXXX.com/XXXX/style.css?1"

この際、記述するパスは必ずフルパスです。また、そのドメインはAPIキーを取得する際に登録したドメインと同一である必要があります。

URL末尾の?1は、キャッシュ対策です。英語なのでよく理解できていないのですが、Facebook側でキャッシュを持つらしく、cssを変更した場合には、この数値を変更して、以前のものとは違うurlとして読み込ませる必要があるようです。

cssのパスを挿入したソースは以下の通りです。

<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からiframeの中のソースにスタイルを適用することができるようになるので、思う存分カスタマイズすればよいのではないかと。

追記:
これ実はまだ検証が十分ではありませんで、先述のキャッシュが思いの他強力なため、マメにCSSを変えながらのちゃんとしたデザイン検証はできていない状態です。表示されることと、こちらで用意したCSSが適用されることまでは確認済みですが、検証次第では後ほど内容を変更する可能性があることをあらかじめご了承ください。誤記や勘違いなどありましたら教えてくださると助かります。