Вопрос по html, css, javascript, facebook – Как сделать ширину комментария в фейсбуке 100%?

7

я использую этот код, чтобы разместить на своей странице поле для комментариев на Facebook,

<script type="text/javascript">
 (function(d, s, id) 
 {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=397337283630353";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
 </script>


<div class="fb-comments" data-href="https://apps.facebook.com/driftee/" data-num-posts="5" data-width="470" data-colorscheme="dark" style="width: 100% !important;"></div>

но я не могу сделать поле для комментариев заполнить 100% страницы.

Ваш Ответ

8   ответов
1
.fb_iframe_widget,
.fb_iframe_widget > span,
.fb_iframe_widget iframe {
    width: 100% !important;
}

3

ну, я думаю, мне удалось решить это, Я проанализировал поле для комментариев и увидел, что div fb-comments по умолчанию содержит диапазон шириной 470 пикселей, и внутри этого диапазона я нашел iframe такой же ширины, поэтому решение состоит в том, чтобы изменить ширину span и iframe на изменить размер окна с помощью jquery, как это:

$(window).resize(function(){$('.fb-comments iframe,.fb-comments span:first-child').css({'width':$('#commentboxcontainer').width()});});

так что теперь при изменении размера окна весь блок комментариев принимает ширину контейнера (другими словами, он составляет 100% ширины).

этот не работает для меня, первый ответ
1

ину перед загрузкой поля комментариев Facebook.

$('document').ready(function(){
    $('.fb-comments').attr('data-width',$('body').width());
});

p.s. you can replace 'body' with any other element you want the comment box to match.

9

Zeeshan ваше решение кажется устаревшим, и похоже, что Facebook обновил свой плагин, и это нарушило стиль.

Вероятно, это работает лучше для меня на данный момент, и я верю, что этот стиль снова сломается, когда Facebook обновит работу своих плагинов.

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]  {width: 100% !important;}

Я призываю других участников добавить более свежее решение этого вопроса, когда придет время.

Другие решения не сработали для меня, но это сработало!
Что значит "iframe [style]" делать? Чем это отличается от просто "iframe"? в вашем последнем ряду? Спасибо за это решение.
18

добавив класс CSS в таблицу стилей вашей HTML-страницы следующим образом:

.fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; }
все еще то же самое я использовал этот & lt; style type = & quot; text / css & quot; & gt; .fb-comments, .fb-comments iframe {ширина: 100%! важный;} & lt; / style & gt; но то же самое. ширина div составляет 100%, но поле для комментариев все еще около 550px medo ampir
Это не будет работать для<iframe> Facebook поле для комментариев.
круто .. у меня сработало
1

Попробуйте добавить параметрdata-width="{pixels}"как вы получаете, когда получаете код, созданный на этой странице,https://developers.facebook.com/docs/reference/plugins/comments/ & # X2013; то есть, если вы знаете ширину страницы в пикселях. Я не знаю, работает ли он и с процентами, но почему-то сомневаюсь в этом.

Тогда ваш последний вариант может быть добавить соотв. динамически измените этот параметр, как только ваша страница загрузится, и вы сможете считывать действительную ширину в пикселях, после чего XFBML будет анализироваться только после этого (установка для параметра xfbml значения false во время загрузки сценария и вызовFB.XFBML.parse после установки параметра data-width). Конечно, это все равно не поможет вам, если ширина будет изменена позже пользователем, изменившим размер окна браузера или еще & # x2026;

0

This is fairly simple В вашем коде

Add следующий кусок кодаdata-width="100%"

<div class="fb-comments" data-href="{{ post.build_absolute_uri }}"data-width="100%" data-numposts="5"></div>

2

Я пробую другие решения, и ни одно из них не работает для меня.

Читая документацию fb, я обнаружил, что ширина 100% уже поддерживается, добавив атрибут data-width = & quot; 100% & quot; к тегу:

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

Он работает прямо сейчас, и в соответствии с его документацией на мобильных устройствах этот параметр устанавливается автоматически.

Похожие вопросы