如何使脸书评论框宽度为100%

How to make facebook comment box width 100%?

本文关键字：100% 何使脸 评论      更新时间：2023-09-26

>我正在使用此代码将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% 的页面。

您可以通过

在 HTML 页面的样式表中将 CSS 类添加为：

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

Zeeshan 您的解决方案似乎已经过时了，看起来 Facebook 更新了他们的插件，这打破了风格。

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

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

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

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

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

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

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

阅读 fb 文档，我发现已经支持宽度 100%，将属性数据宽度="100%"添加到标签中：

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

它

现在正在工作，根据它的文档 en 移动设备 此设置是自动设置的。

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

然后，您的最后一个选择可能是在页面加载后动态修改该参数，并且您可以读出以像素为单位的精算宽度，并且仅在之后解析 XFBML（在加载脚本时将 xfbml 参数设置为 false，并调用 FB。XFBML.parse 设置数据宽度参数后）。当然，这仍然对您没有帮助，如果用户稍后调整浏览器窗口的大小修改了宽度，否则......

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

这对我有用

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

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

附言您可以用您希望注释框匹配的任何其他元素替换"body"。

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

这相当简单在您的代码上

添加以下代码段数据宽度="100%"

<div class="fb-comments" data-href="{{ post.build_absolute_uri }}"data-width="100%" data-numposts="5"></div>

相关文章：