2015年1月14日

Facebook貼付をレスポンシブに


Facebookの貼付コードはLike Boxから取得します。
通常はサイズ固定になりますが、以下のようにすればレスポンシブに対応できます。


Like Box
https://developers.facebook.com/docs/plugins/like-box-for-pages?locale=ja_JP

iframe版を使う場合には、「Width」項目に 100% を入力することで可変になります。
<div class="fb_wrap">か何かで括ってやって、以下のように指定するやり方もあります。
   
.fb-likebox-wrap iframe{
    width: 100%!important;
}


HTML5の場合は以下のCSSを追加します。

.fb-like-box,
.fb-like-box span,
.fb-like-box iframe {
    width: 100% !important;
}

XFBMLの場合は以下のCSSを追加しすればいいようです。(未検証)

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


0 件のコメント:

コメントを投稿