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

Алан ваше решение работало, однако похоже, что facebook обновил свой плагин и сломал стиль. Я снова заставил его работать с помощью универсального селектора:

.fb-comments, .fb-comments * {
    width:100% !important;
}

вероятно, следующее изменение от FB, и на этот раз это работает лучше:

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

ни одно из решений CSS не работало для меня по состоянию на март 2014 года. Похоже, что Facebook изменил плагин, чтобы теперь установить ширину контейнера в iFrame, который вы не можете переопределить с помощью CSS.

после небольшого копания я заметил, что ширина комментариев фактически контролируется последним параметром iframe src width=XXX. Имея это в виду, вот как я решил это:

// ON PAGE LOAD
setTimeout(function(){
  resizeFacebookComments();
}, 1000);

// ON PAGE RESIZE
$(window).on('resize', function(){
  resizeFacebookComments();
});

function resizeFacebookComments(){
  var src   = $('.fb-comments iframe').attr('src').split('width='),
      width = $('#container').width();

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

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

Я использую тайм-аут, потому что я не смог заставить его работать после загрузки iframe. Любая помощь в этом будет оценена, но тайм-аут выполняет эту работу.

EDIT: это решение приводит к разрыву кнопки "Назад". Я пробую это решение сейчас, и, кажется, лучше:https://stackoverflow.com/a/22257586/394788

Я думаю, что у меня есть решение, которое немного улучшает ответ Райана от 5 марта.

вместо повторной загрузки iframe Facebook после задержки вы можете сделать следующее.

вставьте обычный тег комментариев Facebook, но добавьте дополнительный бит в класс, чтобы Facebook не обнаружил его, но вы можете.

<div class="fb-comments-unloaded" data-href="..." data-numposts="10" data-colorscheme="light"></div>

затем добавьте JS, который выбирает этот div, изменяет его с нужной шириной, а затем запускает парсер Facebook.

var foundFBComs = false;

$('.fb-comments-unloaded').each(function(){

    var $fbCom = $(this),
        contWidth = $fbCom.parent().width();

    $fbCom.attr('data-width', contWidth)
          .removeClass('fb-comments-unloaded')
          .addClass('fb-comments');

    foundFBComs = true;

});

if (foundFBComs && typeof FB !== 'undefined') {
    FB.XFBML.parse();
}

эта проблема была решена Facebook. Теперь вы можете добавить data-width="100%" или установите параметр width в100% и удалите любые сумасшедшие хаки js по мере необходимости!

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

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

возможно, будет улучшено больше, если вы проверите селекторы facebook...

вставьте этот код перед инициализацией плагина facebook, и у вас будут комментарии fluid fb:):):)

 $(".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").parent().width();

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

похоже, facebook обновил свою документацию..теперь вы можете использовать data-width= " 100%"или width="100%"

https://developers.facebook.com/docs/plugins/comments/

Я пока не могу комментировать, потому что моя репутация еще недостаточно высока, однако есть решение этого по состоянию на 21 декабря 2014 года

для этого, чтобы работать в CSS:

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

у вас должен быть раздел data-width="", установленный на 100% в коде плагина FB i.e

<div class="fb-comments" data-href="your site here" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

работая пример с жидким движением: http:www.unitedbiker.org

надеюсь, это поможет всем, идея состоит в том, чтобы переопределить стиль iframe на 100% от родительского элемента и установите фактический плагин FB на 100% от iframe. Это была моя работа.

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

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

Я думаю, что это будет работать для всех. Работает для меня Дек 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,

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

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

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

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

Facebook Комментарии Жидкости

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

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

Да да, это легко, никаких onresize обратных вызовов нет изменений iframe src.

после борьбы с этим в течение некоторого времени я нашел лакомый кусочек, который должен помочь вам выяснить, какой из трюков 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>

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

Если ваш 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;
}

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

$(".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);
}

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

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