大輔べ

登山・写真・チェンマイ・台湾が好きな「たしろだいすけ」のブログ

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

例年よりも早く梅雨入りした関東。かかとに穴が開いている靴が多いので、早く新しい靴を買わないと、浸水した靴で歩かなければなりません。特に右足のかかとが擦れやすい「たしろだいすけ([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デザイン対応)


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