jQuery 如何使 facebook 评论框宽度为 100% 并具有响应性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22243233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make facebook comment box width 100% and responsive?
提问by whitesiroi
The same question http://stackoverflow.com/questions/10862256/how-to-make-facebook-comment-box-width-100I tried all the answers, but it doesn't work anymore. Looks like Facebook changed some stuff a little bit.
同样的问题http://stackoverflow.com/questions/10862256/how-to-make-facebook-comment-box-width-100我尝试了所有答案，但它不再起作用了。看起来 Facebook 改变了一些东西。
回答by Romeo Onisim
This iswas a facebook bug, check it out here:
https://developers.facebook.com/x/bugs/256568534516879/
这是一个 facebook 错误，请在此处查看：https:
//developers.facebook.com/x/bugs/256568534516879/
The only available workaround is just using javascript.
唯一可用的解决方法就是使用 javascript。
Later edit: Bug fixed: You have to write: data-width="100%"
后来编辑：错误修复：你必须写： data-width="100%"
The width of the plugin. Either a pixel value or the literal 100% for fluid width. The mobile version of the Comments plugin ignores the width parameter, and instead has a fluid width of 100%. https://developers.facebook.com/docs/plugins/comments
插件的宽度。像素值或流体宽度的文字 100%。移动版的 Comments 插件忽略了宽度参数，而是具有 100% 的流体宽度。 https://developers.facebook.com/docs/plugins/comments
回答by mukesh krishnan
With reference to https://developers.facebook.com/support/bugs/173395380238318/
参考https://developers.facebook.com/support/bugs/173395380238318/
Facebook comment plugin, they keep on updating new stuff but sometimes it ends up to a new bug.
Facebook 评论插件，他们不断更新新内容，但有时最终会出现新错误。
So simple CSS will resolve the width issues.
如此简单的 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;
}
Note: Make sure you use !important. Without important, it will not work as excepted.
注意：确保使用 !important。如果没有重要，它将无法正常工作。
回答by Dasith
$(".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 Workaround,
Jquery 解决方法，
Source : https://developers.facebook.com/x/bugs/256568534516879/Comment by : Milap Bhojak
来源：https: //developers.facebook.com/x/bugs/256568534516879/评论人：Milap Bhojak
回答by vitralyoz
facebook changed fb-comments plug in and now you can use data-width="100%"
facebook 更改了 fb-comments 插件，现在您可以使用 data-width="100%"
you dont need any of style or js code.
您不需要任何样式或 js 代码。
<div class="fb-comments" data-href="http://example.com"
data-width="100%" data-numposts="5" data-colorscheme="light"></div>
回答by bey23
If you are looking for the simplest way without programming. No complications.
如果您正在寻找无需编程的最简单方法。没有并发症。
You just do it like always (with the facebook's code box), then open Inspect Element on the browser (right-click any element on the page and select this option) and click on the like box <iframe></iframe>and copy it on your code (only the iframe!). It works exactly like the other code.
您就像往常一样（使用 facebook 的代码框），然后在浏览器上打开 Inspect Element（右键单击页面上的任何元素并选择此选项），然后单击喜欢的框<iframe></iframe>并将其复制到您的代码上（仅iframe！）。它的工作原理与其他代码完全一样。
Now remove the width of the iframe, or write width:100%on it.
现在移除 iframe 的宽度，或者width:100%在上面写字。
Just like this:
像这样：
<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>
It works fine for me.
这对我来说可以。
回答by Anton R
Facebook added another width 550px on .pluginSkinLight > div
Facebook 在 .pluginSkinLight > div 上添加了另一个宽度 550px
add this to your css .pluginSkinLight > div {width: 100% !important;}
将此添加到您的 css .pluginSkinLight > div {width: 100% !important;}
回答by Gav
I have posted a solution in response to the same question here: https://stackoverflow.com/a/22328835/2544386
我在此处发布了针对同一问题的解决方案：https: //stackoverflow.com/a/22328835/2544386
The issue is that within the iframe, Facebook can change the CSS, classes, add fixed widths etc. But if you use JS in a smart way by manipulating the tag in your HTML before it is parsed by Facebook, I believe it really reduces the chances of it being broken again if Facebook change something at their end.
问题在于，在 iframe 中，Facebook 可以更改 CSS、类、添加固定宽度等。但是如果您通过在 HTML 中的标签被 Facebook 解析之前以巧妙的方式使用 JS，我相信它确实减少了如果 Facebook 最终做出改变，它就有可能再次被打破。
回答by varsize
A simple JS workaround
一个简单的 JS 解决方法
1) Add id ("fb_chat" in this sample) to the FB comments div:
1) 将 id（本示例中的“fb_chat”）添加到 FB 评论 div：
<div id="fb_chat" class="fb-comments" data-href="http://your_url" data-numposts="30" data-colorscheme="light"></div>
<div id="fb_chat" class="fb-comments" data-href="http://your_url" data-numposts="30" data-colorscheme="light"></div>
2) Use this JS block (replace 'chat_body' to your comments parent container):
2) 使用这个 JS 块（将 'chat_body' 替换为您的评论父容器）：
<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>
<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>
回答by drspaceman
Adding data-width="100%"does make the comments 100% width, but still not exactly fluid like you would expect. They will fill a container, but only on load and will not resize when the window is resized. In order to do that add this to your css:
添加data-width="100%"确实会使注释 100% 宽度，但仍然不像您期望的那样完全流畅。它们将填充一个容器，但仅在加载时才会填充，并且在调整窗口大小时不会调整大小。为此，请将其添加到您的 css 中：
.fb_iframe_widget_fluid span, iframe.fb_ltr {
width: 100% !important;
}
.fb_iframe_widget_fluid span, iframe.fb_ltr {
width: 100% !important;
}
回答by Vitalicus
For solve this problem remove "data-width" from <div class="fb-comments"...
为了解决这个问题，从 <div class="fb-comments"...
FB automaticly will put 100%
FB会自动放100%
or delete data-mobile="auto"
或删除 data-mobile="auto"
