Css 如何使Facebook评论小部件具有流畅的宽度？

有没有可能让Facebook的评论小部件变得流畅？它们为

fb:comments

xfbml或iframe显示一个宽度字段，指定为：

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

---

所以也许这是不可能的…

我找到了一个使用css的解决方案。灵感来自这篇文章

---

Alan你的解决方案是可行的，但是看起来facebook更新了他们的插件并打破了这种风格。我使用通用选择器使其再次工作：

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

---

我通常希望避免使用通用选择器以获得更好的性能。你应该能够得到同样的结果

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

---

如果您查看facebook选择器，可能会有更多改进…

可能是FB的下一个变化，这次效果更好：

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

---

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

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

---

如果您的Facebook评论插件的代码类似（XFBML）：

---

我认为这对每个人都适用。为我工作2013年12月26日在

下面这些都不适合我，但我还是把它放在那里了

.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;} .fb comments、.fb comments iframe[style]、.fb like box、.fb like box iframe[style]{宽度：100%！重要；} .fb注释span、.fb注释iframe span[style]、.fb like box span、.fb like box iframe span[style]{宽度：100%！重要；} 可以检查这里的代码，因为这里的前置函数删除了一些东西。我是新来的。问候

---

截至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后我无法启动它。在此方面的任何帮助都将不胜感激，但超时完成了任务

---

编辑：此解决方案导致“后退”按钮断开。我现在正在尝试这个解决方案，它似乎更好：

我想我有一个解决方案，它比Ryan 3月5日的答案稍微改进了一点

您可以执行以下操作，而不是在延迟后重新加载Facebook iframe

插入一个常规的Facebook评论标签，但是在类中附加一个额外的位，这样Facebook就不会检测到它，但是你可以

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

---

在初始化facebook插件之前插入此代码，您将得到fluid fb注释：）：）

---

Facebook已经解决了这个问题。您现在可以添加

data width=“100%”

或将width选项设置为

100%

，并根据需要删除任何疯狂的js黑客

这是唯一对我有效的东西

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

---

看起来facebook更新了他们的文档。您现在可以使用data width=“100%”或width=“100%”

---

花了一些时间调查这个问题。虽然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修改。

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

要在CSS中工作，请执行以下操作：

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

在FB插件代码中，必须将data width=“”部分设置为100%，即

<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插件设置为iframe的100%。这是我的工作。

经过一段时间的努力，我发现了一个小贴士，可以帮助您找出此页面上的哪些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>"

class=“”

这是您想要使用的类-因此在我上面的示例中，您需要添加以下样式：

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

.fb_iframe_小部件，
.fb_iframe_小部件iframe[style]，
.fb_iframe_小部件span[style]，
.fb_iframe_小部件*{
宽度：100%！重要；
}

无需覆盖css，使用

数据宽度=“100%”

漂亮！工作得很好@在你应该认真地接受这个答案为确保此CSS有效，不得指定宽度（

数据宽度

属性）。移动评论如何。CSS在台式机上运行良好，但在iPhone或手机上不起作用，因为Facebook会自动切换回手机评论。我还必须添加

.fb\u iframe\u widget>span[style]

。这对我有效->.fb comments、.fb comments iframe[style]、.fb comments span[style]{宽度：100%！重要；}我们是2013年2月22日，这是唯一一个适用于当前版本的fb:comments的版本。截至2014年2月6日仍然有效。这一版本对我有效，选择的关于这个问题的答案没有。这应该继续有效，因为它针对div、嵌套跨度和iframe，以及FaceBook将来可能添加的任何其他元素，并覆盖内联样式属性。好东西。下面是关于FB的错误报告：非常好的解决方案！而不是$（'#container'）。宽度

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

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

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

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

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

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