web-dev-qa-db-ja.com

Facebookページの埋め込みiframeがコンテナーの幅いっぱいにならない

私が抱えている問題を示すために、ウィキペディアのiframeを追加しました。
Wiki iframeは想定どおりに正しく表示されますが、Facebook iframeはそうではありません。

enter image description hereenter image description here

HTML：

   <div class="iframe-fb-container mt-4">
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
   </div>

CSS：

.iframe-fb-container {
    border: 1px solid blue;
 }

 .iframe-fb {
    width: 100%;
    }

ご覧のとおり、Facebookに幅が450pxのiframeを要求しています。添付されている画像では、エミュレータの幅は375pxですが、ウィキペディアのiframeとは異なり、fb iframeはコンテナーを満たしません。

コンテナを埋めるようにfb iframeを作成するにはどうすればよいですか？

htmlcssfacebookfacebook-like
5
Offir Pe'er

facebook bug platform で質問した後、私は彼らからこの答えを得て、この問題を一度に解決するのに役立ちました：

Stackoverflowで他の人がすでに回答しているように、ドキュメント https://developers.facebook.com/docs/plugins/page-plugin/ によると、プラグインの幅を指定できますが、 、「100％」はサポートされているものではありません。

Facebookのドキュメントからの引用は、コードのエラーに対してそれらを参照しない限り役に立たない、ドキュメントは次のように述べています：

プラグインのピクセル幅。最小最大は180です。 500です

親コンテナの100％幅をサポートしないことについては何も言っていません！
それを理解するのに近い唯一の答えはアロンのものでした、そしてそれが彼が賞金を得た理由です。

結局これは私が最終的に終わったコードです：

HTML：

 <div class="iframe-fb-container">
   <iframe class="iframe-fb border" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FGringo.co.il%2F&tabs=timeline&width=400&height=700&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>
 </div>

CSS：

.iframe-fb-container {
    text-align: center;
    width:400px;
    height:700px;
    display:inline-block;
}

.iframe-fb {
    width: 400px;
    height: 700px;
    overflow: hidden;
}

この答えが将来誰かを助けることを願っています:)

0
Offir Pe'er

Facebookは Page Plugin site について述べています

プラグインはデフォルトで、ページの読み込み時に親コンテナの幅に適合します（最小180ピクセル/最大500ピクセル）。これは、レイアウトの変更に役立ちます

そして

動的なサイズ変更なしPageプラグインは、レスポンシブで流動的な静的レイアウトで動作します。メディアクエリまたは他のメソッドを使用して親要素の幅を設定できますが、プラグインはページの読み込み時にその幅を決定します。ページの読み込み後のボックスモデルへの変更には反応しません。ウィンドウのサイズ変更時にプラグインの幅を調整する場合は、プラグインを手動で再レンダリングする必要があります。

だから、私はあなたの最良の選択肢は親の幅を可能な限りいっぱいにして（最大500pxの制限まで）、それを親の中央に置くことだと思います。 facebookで設定されたCSSを試してみると、投稿がタイムラインを満たさないなど、正しく表示されなくなります。

1
Samuel Cooper

_ 2p3aおよびiScaledImageContainer _2zfrが幅をとっているので：450px;そのため、Facebookのiframeが正しく表示されません。

0
Mayank Gupta

Facebookのページプラグインレスポンシブコンテナとして機能していないため、最小180px〜最大500pxドキュメント に従って。

enter image description here

他のいくつかの回答もご覧いただけます。お役に立てば幸いです。ありがとう

レスポンシブ幅Facebookページプラグイン

0
Hassan Siddiqui