公開した当ブログのスマートフォン版デザイン。
このデザインを作成するにあたって、ちょっとカスタマイズしたのが、Facebookのソーシャルプラグイン「Like Box」です。

デフォルトだと固定幅レイアウトになるので、スマートフォンサイトでは可変幅になるようCSSで調整しました。その実装方法をご紹介します。

Page Pluginでは不要です

追記
「Like Box」が取下げられ、その代替として「Page Plugin」というソーシャルプラグインが登場しました。

こちらのプラグインは、最大幅が500pxしかありませんが、自動的にデバイスに合わせて幅が可変されるようになっており、本記事で紹介しているカスタマイズが不要になります。

「Like Box」は今後一切使えなくなりますので、速やかに新しいコードへ移行することをオススメします。

実装するとこんな感じになります!

Like Box

まずは縦向きで表示させた場合。
これは固定レイアウトでも同じように表示できますよね。

Likebox width customize 02

で、さっきのを横向きにしてみると、このように横幅ピッタリに可変します。

固定幅レイアウトのままだと、Like Boxは縦向き表示のときと幅は変わらず、デザイン上意図しない余白ができて、なんだか不恰好・・・。
しかし可変幅レイアウトにしてしまえば、そんな心配ありません。

CSSだけで可変レイアウトに

というわけで、可変幅レイアウトにするCSSがこちら。

.fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
    width: 100% !important;
}

たった8行のコードを加えるだけで、Like Boxが可変幅レイアウトになります。

ただ、ひとつだけ注意しないといけないのが、上記のコードのまま実装してしまうと、Like Boxのみならず、サイト全体に配置しているその他のソーシャルプラグイン「Like Button」や「Facebook Comments」といったものも影響を受けること。

そこで、実装する際には、限定的にCSSが働くようにしなければなりません。

<div id="likebox_container">
<div class="fb-like-box" data-href="http://www.facebook.com/platform" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
<!-- #likebox_container --></div>

HTML側で、このようにLike Boxの外側を別のidclassで指定したブロック要素で囲むようにします。その上で、先程のCSSをほんの少し変えてやればOKです。

div#likebox_container .fbcomments,
div#likebox_container .fb_iframe_widget,
div#likebox_container .fb_iframe_widget[style],
div#likebox_container .fb_iframe_widget iframe[style],
div#likebox_container .fbcomments iframe[style],
div#likebox_container .fb_iframe_widget span{
    width: 100% !important;
}

これで問題なく限定的にLike Boxのか可変幅レイアウトを実現できます。
もちろんこの方法は他のソーシャルプラグインに限定して可変幅にする場合にも使えますよ。

スマートフォンサイトだけでなく、レスポンシブデザインのサイトにソーシャルプラグインを設置するときにも便利なんじゃないでしょうか。

以前書いた、ツイートの埋め込みを可変幅レイアウトにする方法と合わせて実装すると、よりいいんじゃないかと思います。

Commentsコメントしてもらえると励みになります