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を適用する方法を利用して、スマホでは非表示にすることも可能。
こんな記事も読まれています
WordPressの最も簡単なバックアップ方法。データベースと画像のバックアップ。サーバークラッシュに備えよう
WordPressのバックアップは大丈夫?データベース(記事内容)、画像…WordPressインストールしたら、とりあえずこのプラグインだけは入れておけ(2)
Akismet(アキスメット) WordPressの推奨するスパム対策プ…Twenty Twelveのスマホメニューが開かない場合の対処法
WordPressのスマホレイアウトでメニューボタンが動かない! ある特…【家電量販店アプリ比較】ケーズデンキの携帯アプリは使う意味がある?K’s電機評価
電器屋さん家電量販店が出してるアプリってどうよ?-ケーズデンキ編- 家電…投稿一覧の画面にアイキャッチ画像を表示させるプラグイン – WordPress
WordPressのダッシュボードに、アイキャッチ画像/Featured…