facebookのsocial plugin LikeBoxで独自CSSを反映させる

2011年11月30日 16時26分

会社でfacebookのLikeBoxの幅を210pxに収めてくれという依頼が来た。

※こんな感じのやつ

facebookは知人が３人だけでアイコンもデフォルトのシルエット画像というほぼ素人の私に……
登録した時の「もしかしたら友達？」のあまりにも素晴らしい精度にビビッて放置したことを今更ながらに思い出した。

話が逸れたがLikeBoxは元々、属性設定だけでサイズ変更ができるのだが見た目がよろしくない。
それもそのはず元々対応最小サイズは292pxと記載されているので当たり前である。
それを仕様外のサイズにして見た目を整形しろというお達しが来たのだ……

まぁ、思うところはあるが愚痴になるだけなので調査開始。

プラグインで展開された後のソースを調べてみるとiFrameだからこちらから手を加えるのは難しいんじゃないかなぁっと思いつつ、
API調べて1から作る時間もないので元々あるLikeBoxにcssやjava scriptを埋め込む方法はないものかとググって調べてみると本当にあった。

期待半分だったので意外や意外。

英語だけどソース部分が綺麗に分離されて書かれているのでなんとなーくわかる。
とぼちぼち考えていたら日本語の情報もあった。

上のサイト参考にタグを記述し、fb:fanに属性でstream=”true”を追加すればウォールも表示されるようになる。
後は表示されたタグを調べてcssを当てていけば好みの見た目に適応できた。

気を付ける点としては元々あるcssより先にタグが読み込まれるので優先順位が低くなってしまう。
!important辺りを駆使する必要がある。