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，因此解决方案是更改span和iframe宽度使用jquery调整窗口大小如下：

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

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

Answer 4

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

阅读fb文档我发现已经支持宽度100％将attribut data-width =“100％”添加到标记：

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

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

Answer 5

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

然后你的最后一个选项可能是添加resp。页面加载后动态修改该参数，你可以读出实际宽度（以像素为单位），然后仅解析XFBML（在加载脚本时将xfbml参数设置为false，并在设置数据宽度后调用FB.XFBML.parse参数）。当然，如果用户稍后通过调整浏览器窗口大小来修改宽度，那么这仍然无法帮助你...

Answer 6

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

这对我有用

Answer 7

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

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

<强> P.S。您可以将“body”替换为您希望评论框匹配的任何其他元素。

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

Answer 9

这很简单 在您的代码上

添加以下代码 data-width =“ 100％”

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

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

9 个答案: