如何使 Facebook 评论小部件具有流体宽度？

Question

是否可以使 Facebook 的评论小部件具有流动宽度？他们的文档显示了fb:comments xfbml或iframe的宽度字段指定为：

• width - 插件的宽度（以像素为单位）。建议的最小宽度：400px。

所以也许这是不可能的...

Answer 1

艾伦，你的解决方案正在工作，但看起来 Facebook 更新了他们的插件并打破了风格。我使用通用选择器让它再次工作：

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

Answer 2

我找到了一个使用CSS的解决方案。灵感来自于这篇文章
http://css-tricks.com/2708-override-inline-样式与 css/

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

Answer 3

可能是 FB 的下一次更改，这次效果更好：

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

Answer 4

截至 2014 年 3 月，没有一个 CSS 解决方案对我有用。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

Answer 5

我想我有一个解决方案，可以对 Ryan 3 月 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();
}

Answer 6

Facebook 已经解决了这个问题。您现在可以添加 data-width="100%" 或将宽度选项设置为 100% 并根据需要删除任何疯狂的 js hack！

Answer 7

我通常希望避免使用通用选择器以获得更好的性能。 如果您检查 facebook 选择器，您应该能够得到相同的结果，

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

可能会得到更多改进...

Answer 8

在初始化 Facebook 插件之前插入此代码，您将获得流畅的 Facebook 评论:):):)

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

Answer 9

看起来 facebook 更新了他们的文档..你现在可以使用 data-width="100%" 或 width="100%"

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

Answer 10

我还不能发表评论，因为我的声誉还不够高，但是截至 2014 年 12 月 21 日，有一个解决方案

可以在 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。这就是我的工作。

Answer 11

这对我有用，但我需要添加 span 标签才能正常工作：

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

Answer 12

我认为这对每个人都有效。 2013 年 12 月 26 日在 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 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 评论流畅

Answer 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 修改。

Answer 15

在解决这个问题相当长一段时间后，我发现了一个花絮，它应该可以帮助您弄清楚此页面上的哪些 CSS 技巧将有助于您的 Facebook 评论插件的特定站点/版本/年份。在浏览器中查看您的网站并检查 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>

Answer 16

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

Answer 17

如果您的 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 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);
}

Answer 19

无需覆盖CSS，使用data-width="100%"

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