ど素人から毛を生やす。<延>

新しいFacebookのサイト貼り付けは幅100%にできるのか?

Web > Other 2015年5月8日(最終更新:2年前)

このページは2015.5.8に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
サイトちょっと改造しました。

ところで、いつの間かFacebookのサイト貼り付けが別物になっていました。
従来のライクボックスはサポートが6月で切れるとかなんとか。

え、じゃあ今までライクボックス貼り付けたサイト全部貼り直し…?

なんて恐ろしい想像が捗りますが、実際貼り直しになるかどうかはFacebookのさじ加減なので今は気にしません。

眼前の問題は、新しいPage Pluginが、

h270409

横幅を指定してきていることなんです。

280pxより小さいサイドバーにライクボックス…
今まで結構貼ってるね。
てか、幅固定ってことはレスポンシブ対応不可!?

というわけで諸々実験。

width、heightを指定せずに取得する場合、自動的に340px*500pxのボックスが表示されます。
ここで、iframeと親要素のサイズを無理やり340pxより縮めてみます。

h270409_2

oh...

ソースを見る限り、自動生成される部分にwidth、heightが自動的に設定されてしまうようです。

h270409_3

但し、280px~500pxの間であれば、親要素のサイズよりFacebookのサイズが上回る場合、自動的に親要素のサイズまで合わせられるようです。
故にスマホサイトや、レスポンシブサイトにFacebookが載せられない、なんてことはないようで。

でも、幅100%やりたいんですよ。

でも、正攻法じゃ無理っぽいんですよ。

h270409_4

僅か1箇所のdivのstyleに干渉することさえできれば!!

あとは、

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{ width: 100%!important; max-width:none !important; min-width:100px !important; }

で、大丈夫なのに!

クロスドメイン制限の壁により、相当な無茶をしないとこの先に行きつけないようです。

どうして…このようなスタイルを設けたのですかFacebookよ…orz
この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)