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

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

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

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

Ответы

Ответ 1

Я нашел решение, использующее css. Вдохновение пришло из этой статьи http://css-tricks.com/2708-override-inline-styles-with-css/

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

Ответ 2

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

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

Ответ 3

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


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

Ответ 4

Ни один из решений 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: это решение заставляет кнопку "Назад" сломаться. Я сейчас тестирую это решение, и мне кажется, что это лучше: fooobar.com/questions/79369/...

Ответ 5

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

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

Вставьте обычный тег комментариев 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();
}

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

вставьте этот код перед инициализацией плагина facebook, и у вас будут текущие комментарии 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);
}

Ответ 9

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

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

Ответ 13

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

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


.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 Fluid

Ответ 14

потратил некоторое время на изучение этой проблемы. Хотя 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.

Ответ 15

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

<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>

Ответ 16

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

Ответ 17

Если ваш код плагина Facebook Comments выглядит как (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;
}

Ответ 18

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

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

Ответ 19

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

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