web-dev-qa-db-fra.com

La page Facebook embarquée iframe ne remplit pas la largeur du conteneur

J'ai ajouté un iframe de wikipedia pour démontrer le problème que j'ai.
L'iframe Wiki s'affiche correctement comme il le suppose, mais l'iframe facebook ne l'est pas.

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%;
    }

Comme vous pouvez le voir, je demande à facebook un iframe avec une largeur de 450px et dans les images jointes, la largeur de l'émulateur est 375px , mais le fb iframe ne le remplit pas comme le fait le wikipedia iframe.

Comment puis-je faire fb iframe pour le remplir de conteneur?

htmlcssfacebookfacebook-like
5
Offir Pe'er

Après avoir demandé dans la plateforme de bogues facebook j'ai obtenu cette réponse d'eux qui a aidé à résoudre ce problème une fois pour toutes:

Comme déjà répondu par d'autres personnes dans stackoverflow, selon la documentation, https://developers.facebook.com/docs/plugins/page-plugin/ , vous pouvez spécifier la largeur du plugin, cependant , "100%" n'est pas pris en charge.

Les citations de la documentation facebook ne sont d'aucune utilité, sauf si vous les référez à une erreur dans le code, la documentation dit ce qui suit:

La largeur en pixels du plugin. Min. est 180 & Max. est de 500

Cela ne dit rien de ne pas prendre en charge la largeur de 100% du conteneur parent!
La seule réponse qui était proche de le découvrir était celle d'Alon et c'est pourquoi il a obtenu la prime.

Donc finalement c'est le code avec lequel je me suis retrouvé:

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;
}

J'espère que cette réponse aidera quelqu'un à l'avenir :)

0
Offir Pe'er

Facebook déclare sur le site du plugin de page

Le plugin s'adaptera par défaut à la largeur de son conteneur parent au chargement de la page (min. 180px/max. 500px), utile pour changer la disposition

et

Pas de redimensionnement dynamique Le plugin Page fonctionne avec des mises en page réactives, fluides et statiques. Vous pouvez utiliser des requêtes multimédias ou d'autres méthodes pour définir la largeur de l'élément parent, mais: Le plugin déterminera sa largeur au chargement de la page Il ne réagira pas aux modifications du modèle de boîte après le chargement de la page. Si vous souhaitez ajuster la largeur du plugin lors du redimensionnement de la fenêtre, vous devez manuellement restituer le plugin.

Je pense donc que votre meilleure option serait de remplir la largeur du parent autant que possible (jusqu'à la limite de 500 pixels), puis de la centrer dans le parent. Si vous essayez de chevaucher le CSS défini par Facebook, il commence à s'afficher incorrectement, comme les publications qui ne remplissent pas la chronologie.

1
Samuel Cooper

Parce que _ 2p3a et iScaledImageContainer _2zfr prennent de la largeur: 450px; c'est pourquoi facebook iframe ne s'affiche pas correctement.

0
Mayank Gupta

Le plugin de page de Facebook il ne fonctionne pas comme un conteneur réactif, vous devez ajouter une largeur de minimum 180px à maximum 500px selon documentation .

enter image description here

Vous pouvez également consulter d'autres réponses, j'espère que cela vous aidera. Merci

Plugin de page Facebook responsive width

0
Hassan Siddiqui