8

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

4

9 回答 9

21

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

.fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; }
于 2012-06-02T14:13:22.180 回答
9

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

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

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

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

于 2013-07-24T20:08:53.040 回答
3

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

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

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

于 2012-06-03T05:38:03.447 回答
2

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

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

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

它现在正在运行，并且根据它的移动设备文档，此设置是自动设置的。

于 2015-04-04T18:05:55.540 回答
1

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

那么你的最后一个选择可能是添加相应的。页面加载后动态修改该参数，您可以读出以像素为单位的实际宽度，然后仅解析 XFBML（在加载脚本时将 xfbml 参数设置为 false，并在设置数据宽度后调用FB.XFBML.parse范围）。当然，如果稍后用户调整浏览器窗口的大小或其他方式修改了宽度获取，那仍然无济于事......</p>

于 2012-06-02T15:26:29.093 回答
1 
.fb_iframe_widget,
.fb_iframe_widget > span,
.fb_iframe_widget iframe {
    width: 100% !important;
}

这对我有用

于 2014-01-21T11:05:17.640 回答
1

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

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

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

于 2014-03-31T07:27:14.283 回答
1 
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);
于 2019-04-27T21:44:25.087 回答
0

这在您的代码上相当简单

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

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

于 2018-06-23T12:52:43.487 回答