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

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

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

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)
  • (`・ω・´) 役に立った (1)