Facebookのタイムラインを埋め込むと横幅が660px固定になる
スマホやタブレット向けの可変Webサイト、いわゆるレスポンシブデザインというものがあるが、Facebookのタイムラインが微妙にレスポンシブデザインに対応していない。
これはCSSでうまく対応できるので、紹介しておこう。
<div class=”fb-page” data-href=”https://www.facebook.com/あなたのFacebookページ” data-width=”660″ data-height=”800″ data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”false” data-show-posts=”true”><div class=”fb-xfbml-parse-ignore”><blockquote cite=”https://www.facebook.com/あなたのFacebookページ”><a href=”https://www.facebook.com/あなたのFacebookページ”>Universal Strength</a></blockquote></div></div>
これがFacebook公式からコピペした状態だ。
見ても分かる通り、data-widthが660で固定になっているように見える。何やってねんザッカーバーグ。アホか。
と思った人も少なくなかろう。
実はFacebookは自動でスマホ向けに最適化される
実は、「data-width」は660と書いてはいても。実は自動である程度サイズを合わせてくれる。
↓↓↓↓スマホ表示↓↓↓↓
これでも使えなくはない。ただし、スマホで見ると、画面横幅いっぱいいっぱいにFacebookのタイムラインが広がり、スマホ画面のフリックでスクロールしてもタイムラインのスクロールになってしまう。
結果としてWebサイト自体のスクロールがやりにくくなるわけだ。
ザッカーバーグ。アホか。
「data-width: auto;」は無効化されるので、その対策
古いバージョンのFacebookタイムライン表示だと「data-width」を任意の値や、 data-width: auto;にすることで対応できたが、現行(2015年7月時点)のバージョンではこれは自動で無効化されてしまう。
これは、下記をスタイルシートにコピペでうまく対応できる。
div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
width: 97% !important;
height: 100px !important;
}
つまり、「画面の幅の97%までにしろ。」ということで、両端(または右端)に3%の隙間ができるので、ページをスクロールさせられる。
もちろん90%でも80%でもいい。
これをスマホサイトのみに適応させるには、下記のような、メディアアンカー内に記述するといい。
@media screen and (max-width:600px){
}
メディアアンカーを使わないなら、
div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
max-width: 97% !important;
}
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
max-width: 97% !important; /*←最大値を制限に変更*/
height: 100px !important;
}
こちらをCSSにコピペの方がいいかもしれない。
関連記事：
facebookのタイムラインの div に display:none; のCSSを適用する方法を利用して、スマホでは非表示にすることも可能。
