Возможно ли сделать виджет комментариев Facebook в виде ширины жидкости? В их документации показано поле ширины для fb:comments xfbml или iframe, которое указано как:
Так что, возможно, это невозможно...
Я нашел решение, использующее css. Вдохновение пришло из этой статьи http://css-tricks.com/2708-override-inline-styles-with-css/
.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
Алан ваше решение работает, но похоже, что 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: это решение заставляет кнопку "Назад" сломаться. Я сейчас тестирую это решение, и мне кажется, что это лучше: fooobar.com/questions/79369/...
Я думаю, что у меня есть решение, которое немного улучшает ответ Райана с 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();
}
Эта проблема была решена Facebook. Теперь вы можете добавить data-width="100%" или установить параметр ширины 100% и удалить любые сумасшедшие js-хаки по мере необходимости!
Я вообще хочу избежать использования универсального селектора для лучшей производительности. Вы должны получить тот же результат с помощью
.fb-comments, .fb-comments span, .fb-comments iframe {width: 100% !important;}
Возможно, улучшится больше, если вы проверите селекторами facebook...
вставьте этот код перед инициализацией плагина 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);
}
выглядит как facebook обновил свою документацию. Теперь вы можете использовать data-width = "100%" или width = "100%"
Я еще не могу прокомментировать, потому что моя репутация еще не достаточно высока, однако есть решение для этого по состоянию на 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,
Я знаю, что это старый вопрос, но это может помочь кому-то.
Вы можете использовать следующий код, чтобы сделать ваши комментарии текущими.
.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-функция здесь удаляет некоторые вещи. Я здесь новенький. Отношения
потратил некоторое время на изучение этой проблемы. Хотя 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-виджета, который выглядит примерно так:
<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 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;
}
Это единственное, что сработало правильно для меня!
$(".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>