FacebookのLike Boxを常に横幅100％で表示されるようにしました

2013年5月29日
サイト制作

例年よりも早く梅雨入りした関東。かかとに穴が開いている靴が多いので、早く新しい靴を買わないと、浸水した靴で歩かなければなりません。特に右足のかかとが擦れやすい「たしろだいすけ（[my_twitter]）」でございます。

このブログの記事の下に、FacebookのLike Boxを設置しました。いいね！お待ちしております。

さて、そのFacebookのLike Boxを設置する際に、ちょこちょこっとCSSに書き足して、横幅が常に100％になるようにしましたので、その方法をご紹介。

せっかくTwitter Bootstrapを使い、レスポンシブ対応したのに、FacebookのLike Boxの横幅がおかしいとなんだかな〜、な感じですからね。

書き足すCSS

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

これでFacebookのLike Boxが常に横幅100％となります。

ただし、ちょっと問題も…。

このままではLike Box以外のLike Buttonなども横幅が100％となってしまうのです。

ということで、それを回避するために、横幅を100％にしたいLike Boxを.fbfluidで囲みました。

HTML

<div class="fbfluid">
<div class="fb-like-box" data-href="https://www.facebook.com/daisuke.tashiro" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>
</div>

CSS

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

これにて一件落着！

参考にしたサイト

Facebook Like Boxを可変レイアウトにして横幅ピッタリにするカスタマイズCSS | [M] mbdb
Facebook Like Boxを幅100%にする（レスポンシブWebデザイン対応）

ということで、いいね！お待ちしております。

サイト制作