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

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

35 голосов
/ 16 сентября 2011

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

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

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

Ответы [ 19 ]

54 голосов
/ 18 апреля 2012

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

.fb-comments, .fb-comments * {
    width:100% !important;
}
43 голосов
/ 17 октября 2011

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

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
31 голосов
/ 31 октября 2012

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


.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]  {width: 100% !important;}
16 голосов
/ 05 марта 2014

Ни одно из 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.Любая помощь по этому вопросу будет принята, но тайм-аут делает свою работу.

РЕДАКТИРОВАТЬ: Это решение приводит к поломке кнопки назад.Я сейчас пробую это решение, и оно кажется лучше: https://stackoverflow.com/a/22257586/394788

16 голосов
/ 11 марта 2014

Думаю, у меня есть решение, которое немного улучшит ответ Райана с 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();
}
11 голосов
/ 16 мая 2014

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

4 голосов
/ 14 марта 2014

вставьте этот код перед инициализацией плагина 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);
}
4 голосов
/ 30 мая 2012

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

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

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

2 голосов
/ 21 декабря 2014

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

, чтобы это работало в CSS: 

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

вы ДОЛЖНЫ иметь раздел data-width = "", установленный на 100% в коде плагина FB, т.е. 

<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.Это была моя работа вокруг.

2 голосов
/ 29 мая 2014

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

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

Страница:
...