Question

同样的问题http://stackoverflow.com/questions/10862256/how-to-make-facebook-comment-box-width-100 我尝试了所有的答案，但它不再起作用了。看起来Facebook改变了一些东西。

Answer 1

这个是是一个facebook bug，请在这里查看： https://developers.facebook.com/x/bugs/256568534516879/

~~唯一可用的解决方法是使用javascript。~~

稍后编辑：错误修正：您必须写：data-width="100%"

插件的宽度。像素值或文字100％流体宽度。 Comments插件的移动版本忽略了宽度参数，而是具有100％的流体宽度。 https://developers.facebook.com/docs/plugins/comments

Answer 2

 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
        $(window).on('resize', function () {
            resizeiframe();
        });

    function resizeiframe() {
        var src = $('.fb-comments iframe').attr('src').split('width='),
            width = $(".fb-comments").parent().width();

        $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
    }

Jquery解决方法，

来源：https://developers.facebook.com/x/bugs/256568534516879/ 评论人：Milap Bhojak

Answer 3

参考https://developers.facebook.com/support/bugs/173395380238318/

Facebook评论插件，他们会不断更新新内容，但有时会导致新错误。

如此简单的CSS就能解决宽度问题。

/*Fb Comments Width Fix*/
.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {
            max-width: 100% !important;
            width: 100% !important;
 }

注意：确保使用！important。如果不重要，它将无法正常工作。

如果您认为有帮助，请点击“上投票”按钮。谢谢

Answer 4

Facebook在.pluginSkinLight＆gt;上添加了另一个550px的宽度。格

将此添加到您的CSS .pluginSkinLight＆gt; div {width：100％！important;}

Answer 5

我已经发布了一个解决方案来回答同一个问题：https://stackoverflow.com/a/22328835/2544386

问题是在iframe中，Facebook可以更改CSS，类，添加固定宽度等。但是如果你在Facebook解析之前通过操纵HTML中的标记以聪明的方式使用JS，我相信如果Facebook最终改变某些东西，它确实会减少再次被破坏的可能性。

Answer 6

facebook更改了fb-comments插件，现在你可以使用data-width =“100％”

你不需要任何样式或js代码。

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

Answer 7

如果您正在寻找最简单的方法而无需编程。没有并发症。

您只需像往常一样（使用Facebook的代码框），然后在浏览器上打开Inspect Element（右键单击页面上的任何元素并选择此选项），然后单击类似框<iframe></iframe>和将其复制到您的代码中（仅限iframe！）。它的工作方式与其他代码完全相同。

现在删除iframe的宽度，或在其上写上width:100%。

就像这样：

<iframe name="f15e6cf8a8" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/yourentirepage" style="border:none;visibility:visible;height:541px" class=""></iframe>

它适用于我。

Answer 8

一个简单的JS解决方法

1）在FB评论div中添加id（＆＃34; fb_chat＆＃34;在此示例中）：

<div id="fb_chat" class="fb-comments" data-href="http://your_url" data-numposts="30" data-colorscheme="light"></div>

2）使用此JS块（将＆＃39; chat_body＆＃39;替换为您的评论父容器）：

<script type="text/javascript"> var fb_chat = document.getElementById('fb_chat'); var container_width = document.getElementById('chat_body').clientWidth * 0.985; var attr = document.createAttribute('data-width'); attr.nodeValue = container_width.toString(); fb_chat.attributes.setNamedItem(attr); </script>

Answer 9

添加data-width="100%"会使评论的宽度达到100％，但仍然不像预期的那样完全流畅。它们将填充容器，但仅在加载时，并且在调整窗口大小时不会调整大小。为此，请将此添加到您的css：

.fb_iframe_widget_fluid span, iframe.fb_ltr { width: 100% !important; }

Answer 10

为解决此问题，请从<div class="fb-comments"...删除“数据宽度”

FB会自动放置100％

或删除data-mobile="auto"

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

10 个答案: