Как сделать фейсбук комментария шириной 100% и отзывчивым?

Ответ 1

Этот был ошибкой в ​​facebook, проверьте здесь: https://developers.facebook.com/x/bugs/256568534516879/

Единственное доступное обходное решение - это просто использование javascript.

Позднее редактирование: Исправлена ​​ошибка: вам нужно написать: data-width="100%"

Ширина плагина. Либо значение пикселя, либо буква 100% для жидкость ширина. Мобильная версия плагина комментариев игнорирует ширины, а ширина жидкости составляет 100%. https://developers.facebook.com/docs/plugins/comments

Ответ 2

Со ссылкой на https://developers.facebook.com/support/bugs/173395380238318/

Плагин комментариев Facebook, они продолжают обновлять новые материалы, но иногда это приводит к новой ошибке.

Такой простой CSS решит проблему ширины.

/*Fb Comments Width Fix*/
.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {
            max-width: 100% !important;
            width: 100% !important;
 }

Примечание. Убедитесь, что вы используете! Без важного он не будет работать так, как исключено.

Если вы нашли это полезным, нажмите кнопку upvote. Спасибо

Ответ 3

 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
        $(window).on('resize', function () {
            resizeiframe();
        });

    function resizeiframe() {
        var src = $('.fb-comments iframe').attr('src').split('width='),
            width = $(".fb-comments").parent().width();

        $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
    }

Обходное решение JQuery,

Источник: https://developers.facebook.com/x/bugs/256568534516879/ Комментарий от: Milap Bhojak

Ответ 4

Facebook добавил еще одну ширину 550 пикселей на .pluginSkinLight > div

добавить это в свой css .pluginSkinLight > div {ширина: 100%! important;}

Ответ 5

Я отправил решение в ответ на тот же вопрос: fooobar.com/questions/79355/...

Проблема в том, что в iframe Facebook может изменять CSS, классы, добавлять фиксированную ширину и т.д. Но если вы используете JS разумным способом, манипулируя тегом в своем HTML, прежде чем он будет разбираться с Facebook, я считаю, что это действительно уменьшает вероятность его сломания снова, если Facebook что-то изменит в конце.

Ответ 6

facebook изменил fb-comments plug in, и теперь вы можете использовать data-width = "100%"

вам не нужен какой-либо код стиля или js.

    <div class="fb-comments" data-href="http://example.com" 
data-width="100%" data-numposts="5" data-colorscheme="light"></div>

Ответ 7

Если вы ищете самый простой способ без программирования. Нет осложнений.

Вы просто делаете это, как всегда (с полем кода facebook), затем откройте Inspect Element в браузере (щелкните правой кнопкой мыши любой элемент на странице и выберите этот параметр) и нажмите на поле типа <iframe></iframe> и скопируйте его на ваш код (только iframe!). Он работает точно так же, как и другой код.

Теперь удалите ширину iframe или напишите width:100% на нем.

Точно так же:

<iframe name="f15e6cf8a8" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/yourentirepage" style="border:none;visibility:visible;height:541px" class=""></iframe>

Это отлично работает для меня.

Ответ 8

Для решения этой проблемы удалите "data-width" из <div class="fb-comments"...

FB автоматически поставит 100%

или удалить data-mobile="auto"

Ответ 9

Простой обходной путь JS

1) Добавьте id ( "fb_chat" в этом примере) в комментарии FB div:

<div id="fb_chat" class="fb-comments" data-href="http://your_url" data-numposts="30" data-colorscheme="light"></div>

2) Используйте этот блок JS (замените "chat_body" на родительский контейнер комментариев):

<script type="text/javascript"> var fb_chat = document.getElementById('fb_chat'); var container_width = document.getElementById('chat_body').clientWidth * 0.985; var attr = document.createAttribute('data-width'); attr.nodeValue = container_width.toString(); fb_chat.attributes.setNamedItem(attr); </script>

Ответ 10

Добавление data-width="100%" делает комментарии 100% ширины, но все еще не совсем текучими, как вы ожидали. Они будут заполнять контейнер, но только при загрузке и не будут изменять размер при изменении размера окна. Чтобы сделать это, добавьте это в свой css:

.fb_iframe_widget_fluid span, iframe.fb_ltr { width: 100% !important; }