如何使Facebook的评论小部件stream畅的宽度？
是否有可能使Facebook的评论小部件stream畅的宽度？ 他们的文档显示了fb:comments xfbml或iframe的宽度字段，它被指定为：
- 宽度 – 以像素为单位的插件宽度。 最小build议宽度：400px。
所以也许这是不可能的
我find了一个使用CSS的解决scheme。 灵感来自这篇文章http://css-tricks.com/2708-override-inline-styles-with-css/
.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
阿伦你的解决scheme正在工作，但它看起来像Facebook更新他们的插件，打破了风格。 我再次使用通用select器工作：
.fb-comments, .fb-comments * { width:100% !important; }
可能从FB的下一个变化，这一次更好的工作：
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe[style] {width: 100% !important;}
截至2014年3月，没有任何CSS解决scheme可以为我工作。似乎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被加载，我无法启动它。 任何帮助，将不胜感激，但超时工作。
编辑：此解决scheme导致后退button中断。 我现在正在尝试这个解决scheme，它似乎更好： https : //stackoverflow.com/a/22257586/394788
我觉得我有一个解决scheme，从3月5日起Ryan的答案有所改进。
延迟之后，不要重新加载Facebook的iframe，你可以做到以下几点。
插入一个普通的Facebook评论标签，但追加额外的一点，以便Facebook不检测它，但你可以。
<div class="fb-comments-unloaded" data-href="..." data-numposts="10" data-colorscheme="light"></div>
然后添加一些JSselect这个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黑客！
我通常希望避免使用通用select器来获得更好的性能。 你应该可以得到相同的结果
.fb-comments, .fb-comments span, .fb-comments iframe {width: 100% !important;}
如果你检查Facebook的select器可能会改善更多…
在初始化facebook插件之前插入此代码，您将有stream体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更新了他们的文档..你现在可以使用数据宽度=“100％”或宽度=“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>
stream体运动的实例：http：www.unitedbiker.org
希望这有助于每个人，这个想法是覆盖iframe的风格是100％的父元素，并将实际的FB插件设置为100％的iframe。 这是我的工作。
这工作对我来说，但我需要添加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,
我知道这是一个老问题，但这也许可以帮助某人。
您可以使用下面的代码来使您的意见stream畅
.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评论stream体
花了一些时间调查这个问题。 虽然FBbuild议以像素为单位指定绝对宽度，但如果将其设置为“100％”，则看起来像是有效的。 注意下面的数据宽度。
<div class="fb-comments" data-width="100%" data-href="http://www.sample.com/" data-numposts="5" data-colorscheme="light"></div>
是的，这很容易，没有onresizecallback没有iframe src修改。
经过一段时间的努力之后，我发现了一个小技巧，它可以帮助你找出这个页面上的哪个CSS技巧可以帮助你的网站/版本/ Facebook的评论插件。 在浏览器中查看您的网站，并检查Facebook注释插件周围的元素。 你应该find一个你添加的代码片段，现在用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>
