是否可以使 Facebook 的 cmets 小部件具有流体宽度？他们的documentation 显示了fb:comments xfbml 或 iframe 的宽度字段，指定为：
所以也许这是不可能的......
【问题讨论】：
标签： css facebook comments facebook-social-plugins xfbml
艾伦，您的解决方案正在运行，但看起来 facebook 更新了他们的插件并打破了风格。我使用通用选择器让它再次工作：
.fb-comments, .fb-comments * {
width:100% !important;
}
【讨论】：
我找到了使用 css 的解决方案。灵感来自这篇文章 http://css-tricks.com/2708-override-inline-styles-with-css/
.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
【讨论】：
data-width 属性）。
.fb_iframe_widget > span[style]。
可能是 FB 的下一个变化，这次效果更好：
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {width: 100% !important;}
【讨论】：
截至 2014 年 3 月，没有任何 CSS 解决方案对我有用。似乎 Facebook 已更改插件，现在在 iFrame 内的容器上设置宽度，您无法用 CSS 覆盖。
经过一番挖掘，我注意到 cmets 的宽度实际上是由 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 是您希望 cmets 插件拉伸以适应容器的宽度。将其更改为您需要的任何内容，此代码应该适合您。
我正在使用超时，因为加载 iframe 后我无法触发它。对此的任何帮助将不胜感激，但超时可以完成工作。
编辑：此解决方案会导致后退按钮中断。我现在正在尝试这个解决方案，它似乎更好：https://stackoverflow.com/a/22257586/394788
【讨论】：
我认为我有一个解决方案，可以对 Ryan 3 月 5 日的回答有所改进。
您可以执行以下操作，而不是延迟后重新加载 Facebook iframe。
插入一个常规的 Facebook cmets 标签，但在类中附加一个额外的位，这样 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();
}
【讨论】：
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div> 的内容 - 这是我的 cmets 标签米指。您应该将它插入您希望 cmets 插件出现在您的页面中的任何位置。
Facebook 已解决此问题。您现在可以添加data-width="100%" 或将宽度选项设置为100% 并酌情删除任何疯狂的js hack！
【讨论】：
我通常希望避免使用通用选择器以获得更好的性能。您应该能够得到与
相同的结果.fb-comments, .fb-comments span, .fb-comments iframe {width: 100% !important;}
如果您检查 facebook 选择器，可能会得到更多改进...
【讨论】：
在初始化 facebook 插件之前插入此代码，您将拥有流畅的 fb cmets :):):)
$(".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%"
【讨论】：
我还不能发表评论，因为我的声誉还不够高，但截至 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%。这是我的工作。
【讨论】：
这对我有用，但我需要添加 span 标签才能正常工作：
.fb-comments, .fb-comments iframe[style], .fb-comments span { width: 100% !important; }
【讨论】：
我认为这对每个人都有效。为我工作，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,
【讨论】：
我知道这是个老问题，但这可能对某人有帮助。
您可以使用以下代码使您的 cmets 流畅
.fb-cmets, .fb-cmets iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;} .fb-cmets 跨度，.fb-cmets iframe 跨度 [样式]，.fb-like-box 跨度，.fb-like-box iframe 跨度 [样式] {宽度：100% ！重要；}可以查看这里的代码，因为这里的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 评论插件周围的元素。你应该找到你添加的一个 sn-p，现在被 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 评论插件的代码看起来像 (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>
【讨论】：