Встраивание страницы Facebook, если фрейм не заполняет ширину контейнера

Question

Я добавил iframe википедии, чтобы продемонстрировать мою проблему.
Iframe Wiki отображается правильно, как и предполагалось, но iframe facebook не отображается.

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 iframe с шириной 450px и в прикрепленных изображениях ширина эмулятора 375px , но fra iframe этого не делает заполнить его контейнер, как делает iframe Википедии.

Как мне сделать fb iframe, чтобы заполнить его контейнером?

Answer 1

Facebook сообщает на сайте Page Plugin

Плагин по умолчанию адаптируется к ширине родительского контейнера при загрузке страницы (мин. 180px / макс. 500px), полезно для изменения макета

и

Без динамического изменения размера Плагин Page работает с адаптивным, плавным и статическим макетами.Вы можете использовать медиа-запросы или другие методы, чтобы установить ширину родительского элемента, но: Плагин будет определять его ширину при загрузке страницы. Он не будет реагировать на изменения в блочной модели после загрузки страницы.Если вы хотите настроить ширину плагина при изменении размера окна, вам нужно вручную перерисовать плагин.

Так что я думаю, что вашим лучшим вариантом будет заполнить ширину родительского элемента как можно больше (до предела 500px), а затем отцентрируйте его в родительском элементе.Если вы попытаетесь использовать CSS, установленный Facebook, он начнет отображаться некорректно, например сообщения, не заполняющие временную шкалу.

Answer 2

Нельзя сделать это 100% обычным способом.

Это ваш iframe src:

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>

Обратите внимание, что есть параметр: width=450px.

Он устанавливает ширину содержимого iframe равным 450px.

Согласно Документация к плагину Facebook :

The pixel width of the plugin. Min. is 180 & Max. is 500.

Такмаксимальная ширина, которую может получить Facebook - 500.

Answer 3

После запроса на платформе facebook я получил от них ответ, который помог решить эту проблему раз и навсегда:

Как уже отвечали другие люди в 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;
}

Надеюсь, этот ответ кому-нибудь поможет в будущем:)

Answer 4

Поскольку _2p3a и uiScaledImageContainer _2zfr принимают ширину: 450 пикселей; вот почему фрейм Facebook не отображается правильно.

Answer 5

Facebook Page Plugin он не работает как адаптивный контейнер, вы должны добавить ширину от минимум 180px до максимум 500px согласно документации .

Вы также можете посмотреть другие ответы, надеюсь, это поможет вам.Спасибо

Отзывчивая ширина плагин для страницы Facebook

Answer 6

Пожалуйста, укажите ширину фрейма 100%. :)

iframe{
  width: 100% !important  //important if not working without it..
}