Как сделать виджет комментариев Facebook плавной по ширине?

Question

Можно ли сделать виджет комментариев Facebook изменчивой шириной?Их документация показывает поле ширины для fb:comments xfbml или iframe, которое указывается как:

• width - ширина плагина в пикселях.Минимальная рекомендуемая ширина: 400px.

Так что, возможно, это не возможно ...

Answer 1

Поработав с этим в течение довольно долгого времени, я обнаружил лакомый кусочек, который должен помочь вам выяснить, какие из хитростей CSS на этой странице помогут вашему конкретному сайту / версии / году в плагине комментариев Facebook. Посмотрите на свой сайт в браузере и осмотрите элементы вокруг плагина комментариев Facebook. Вы должны найти фрагмент, который вы добавили и теперь он украшен виджетом JavaScript на Facebook, который выглядит примерно так:

<fb:comments href="http://mywebpage.com" 
    fb-xfbml-state="rendered" class="fb_iframe_widget">

обратите внимание на часть, которая говорит:

class="<whatever class your version is using>"

это класс, который вы хотите использовать - поэтому в моем примере выше вы хотели бы добавить следующие стили:

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

Answer 2

потратил некоторое время на изучение этой проблемы.Хотя FB предлагает указать абсолютную ширину в пикселях, похоже, это работает, если вы просто установите его на «100%».Обратите внимание на ширину данных ниже.

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

Да, да, это просто, нет обратных вызовов с изменением размера, нет модификаций iframe src.

Answer 3

Я знаю, что это старый вопрос, но это может кому-то помочь.

Вы можете использовать следующий код, чтобы сделать ваши комментарии текучими

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}

Здесь можно проверить код, потому что здесь предварительно функция удаляет некоторые вещи. Я здесь новенький. Привет

Facebook Comments Fluid

Answer 4

Я думаю, что это будет работать для всех.Работает для меня 26 декабря 2013 года в http://eddie11.com/dj-eddie-talks/

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

Ничто из перечисленного не работает для меня, но я все равно оставил его там.

.fb-comments,
.fb-comments *,
.fb-comments iframe[style],
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe,
.fb_iframe_widget iframe[style],
.fb-comments span,
.fb-comments iframe,

Answer 5

Это сработало для меня, но мне нужно добавить тег span для правильной работы:

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

Answer 6

Нет необходимости переопределять CSS, используйте data-width="100%"

<div class="fb-comments" data-width="100%" data-href="yourURL"></div>

Answer 7

Это единственное, что правильно сработало для меня!

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

function resizeFacebookComments() {
var src = $('.fb-comments iframe').attr('src').split('width='),
width = $(".fb-comments").`enter code here`parent().width();

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

Answer 8

Если код вашего плагина комментариев Facebook выглядит (XFBML):

<fb:comments href="{URL_HERE}" numposts="5" colorscheme="light"></fb:comments>

Тогда следующий CSS должен выполнить работу:

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

Answer 9

.fb-comments, .fb-comments iframe[style],  .fb-comments > span {width: 100% !important;}