如何使Facebook评论框宽度100%？

Question

我正在使用此代码将facebook评论框放入我的页面,

<script type="text/javascript">
 (function(d, s, id) 
 {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=397337283630353";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
 </script>


<div class="fb-comments" data-href="https://apps.facebook.com/driftee/" data-num-posts="5" data-width="470" data-colorscheme="dark" style="width: 100% !important;"></div>

但我不能使评论框填写100%的页面.

Answer 1

您可以通过在HTML页面的样式表中添加CSS类来实现此目的:

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

Answer 2

zeeshan您的解决方案似乎过时了,看起来Facebook更新了他们的插件,这打破了风格.

可能这对我来说效果更好,我相信当facebook更新插件的工作方式时,这种风格会再次爆发.

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

我鼓励其他贡献者在时机成熟时为这个问题添加更新的解决方案.

Answer 3

好吧，我想我设法解决了这个问题，我分析了评论框，发现fb-comments div默认包含一个宽度为470px的跨度，在这个跨度内我发现了一个相同宽度的iframe，所以解决方案是使用 jquery 更改窗口大小调整时的跨度和 iframe 宽度，如下所示：

$(window).resize(function(){$('.fb-comments iframe,.fb-comments span:first-child').css({'width':$('#commentboxcontainer').width()});});

所以现在在窗口调整大小时，整个评论框采用容器宽度（通过其他方式，它是 100% 宽度）。