facebookのLike boxは「いいね」を増やしたいなら設置必須のソーシャルプラグインです。しかし、固定幅であるためレスポンシブデザインのサイトでは少々扱いづらいのです。そこで、CSSを細工して可変幅にしてみました。
とりあえず普通にLike Box作成
まず、Like Box作成ページに行きましょう。
[img-link url=”https://developers.facebook.com/docs/plugins/like-box-for-pages” title=”いいね！ボックス – ソーシャルプラグイン”]
適宜入力して、Get Codeボタンを押します。
@web_shufuは最新投稿のストリームと、ヘッダーは省き、顔写真は入れる設定にしました。
次に、指示に従って、<body>直後にJavaScript SDK、任意の場所にLikeboxのコードを貼り付けます。
このままだとデザイン崩壊
このままだと、画面やカラムの幅が狭いとき、Like boxが画面やカラムを突き破ってしまいます。
スタイルのあて方
そこで、スタイルをあてて、Like boxの幅が、画面やカラムの幅以内に収まるようにします。
スタイルシートに以下のような記述を加えればいいです。
div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
width: 100% !important;
}
すると、Like boxが画面やカラムの枠内にきちんと収まるようになります。
Like Box は使っとくに越したことはない
バズ部さんによれば「いいね」のうちかなりの部分がLike boxから行われています。
使っとくに越したことはないですね。