如何使 facebook 评论框宽度 100%？答案

【问题标题】：How to make facebook comment box width 100%?如何使 facebook 评论框宽度 100%？
【发布时间】：2012-06-02 12:15:41
【问题描述】：

我正在使用此代码在我的页面上放置一个 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%。

【问题讨论】：

标签： javascript html css facebook

【解决方案1】：

您可以通过在 HTML 页面的样式表中添加 CSS 类来做到这一点：

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

【讨论】：

我还是用了这个但还是一样是。 div 宽度为 100%，但评论框仍然在 550px 左右
这不适用于<iframe> Facebook 评论框。

【解决方案2】：

zeeshan 你的解决方案似乎过时了，看起来 facebook 更新了他们的插件并且打破了风格。

到目前为止，这可能对我来说效果更好，我相信当 facebook 更新其插件的工作方式时，这种风格将再次被打破。

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

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

【讨论】：

其他解决方案对我不起作用，但这个解决方案对我有用！
“iframe[style]”有什么作用？这与最后一行中的“iframe”有何不同？感谢您提供此解决方案。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

我尝试了其他解决方案，但没有一个适合我。

阅读 fb 文档我发现已经支持宽度 100% 添加属性 data-width="100%" 到标签：

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

它现在可以正常工作，根据它在移动设备上的文档，这个设置是自动设置的。

【讨论】：

【解决方案5】：

尝试添加参数data-width="{pixels}"，当您获得在此页面上创建的代码时，您会得到https://developers.facebook.com/docs/reference/plugins/comments/ - 也就是说，如果您知道页面的宽度（以像素为单位）。我不知道它是否也适用于百分比，但不知何故怀疑它。

那么您的最后一个选择可能是添加相应的。页面加载后动态修改该参数，您可以读出以像素为单位的实际宽度，然后仅解析 XFBML（在加载脚本时将 xfbml 参数设置为 false，并在设置 data-width 参数后调用FB.XFBML.parse） .当然，如果稍后用户调整浏览器窗口的大小或其他方式修改了宽度，这仍然对您没有帮助......

【讨论】：

【解决方案6】：

.fb_iframe_widget,
.fb_iframe_widget > span,
.fb_iframe_widget iframe {
    width: 100% !important;
}

这对我有用

【讨论】：

【解决方案7】：

使用 jQuery，您可以在加载 Facebook 评论框之前覆盖硬编码的宽度。

$('document').ready(function(){
    $('.fb-comments').attr('data-width',$('body').width());
});

附言。您可以将“body”替换为您希望评论框匹配的任何其他元素。

【讨论】：

【解决方案8】：

setTimeout(function run() {
    if ($('.fb-comments span:first-child, .fb-comments span iframe').length == 0)
        setTimeout(run, 1000);
    else
        $('.fb-comments span:first-child, .fb-comments span iframe')[1].style.width = "100%";
}, 1000);

【讨论】：

【解决方案9】：

这很简单 在你的代码上

添加以下代码data-width="100%"

&lt;div class="fb-comments" data-href="{{ post.build_absolute_uri }}"data-width="100%" data-numposts="5"&gt;&lt;/div&gt;

【讨论】：