blocks|key|637671|text|这些方法都不起作用，但使用这个想法，以下方法对我有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|637672|.fb-comments,+.fb-comments+span,+.fb-comments.fb_iframe_widget+span+iframe+{
++++width:+100%25+!important;
}|code-block|syntax|javascript|637673|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>none of these methods worked but using this idea, the following worked for me:</p>

<pre><code>.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
    width: 100% !important;
}
</code></pre>


blocks|key|853764|text|我找到了一个使用css的解决方案。灵感来自这篇文章http://css-tricks.com/2708-override-inline-styles-with-css/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|853765|.fb-comments,+.fb-comments+iframe[style]+{width:+100%25+!important;}|code-block|syntax|javascript|853766|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/2708-override-inline-styles-with-css/^0|P|1N|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>I found a solution using css. Inspiration came from this article
<a href="http://css-tricks.com/2708-override-inline-styles-with-css/">http://css-tricks.com/2708-override-inline-styles-with-css/</a></p>

<pre><code>.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
</code></pre>


blocks|key|854195|text|我设法让它工作，使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|854196|.fb-like,+.fb-like+span,+.fb-like.fb_iframe_widget+span+iframe+{
++++width:+100%25+!important;

}|code-block|syntax|javascript|854197|因为在我的html文件中有：|854198|<div+class="fb-like"+data-href="http://www.yourwebsite.yourdomain"+data-send="true"++data-show-faces="false"+data-colorscheme="light"+data-font="verdana"></div>|854199|提示:您应该根据div类的不同来更改css。|854200|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I managed to make it work by using this code: </p>

<pre><code>.fb-like, .fb-like span, .fb-like.fb_iframe_widget span iframe {
    width: 100% !important;

}
</code></pre>

<p>because in my html file I have this:</p>

<pre><code>&lt;div class="fb-like" data-href="http://www.yourwebsite.yourdomain" data-send="true"  data-show-faces="false" data-colorscheme="light" data-font="verdana"&gt;&lt;/div&gt;
</code></pre>

<p>Tip: You should change your css depending of the div class.</p>


blocks|key|638136|text|它肯定只会在style中添加.fb-comments+span。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|638137|.fb-comments,+.fb-comments+span,+.fb-comments+iframe[style]+{width:+100%25+!important;}|code-block|syntax|javascript|638138|entityMap^0|E|H|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>It will definitely work just for adding <code>.fb-comments span</code> in style.</p>

<pre><code>.fb-comments, .fb-comments span, .fb-comments iframe[style] {width: 100% !important;}
</code></pre>


blocks|key|637998|text|被接受的答案对我不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|637999|我在这里的评论中发现了Craig+Bailey写的这篇文章：|638000|http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress|offset|length|638001|它是完全流畅的(在osx+ff+&+safari，ios6中测试过)。|638002|.fb-comments,+.fb-comments+iframe[style],+.fb-comments+span+{
width:+100%25+!important;
}|code-block|syntax|javascript|638003|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|26|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$F|Y|G|Z|1|10]]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|12|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|E]]]]

<p>Accepted answer did not work for me.</p>

<p>I found this by Craig Bailey in the comments here: </p>

<p><a href="http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress" rel="nofollow">http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress</a> </p>

<p>which is perfectly fluid (tested in osx ff &amp; safari, ios6).</p>

<pre><code>.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
</code></pre>


blocks|key|853838|text|看起来这篇文章不是很老，但是答案对我不起作用。我不得不把这个添加到我的样式表中...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|853839|#fbcomments,+.fb_iframe_widget,+.fb_iframe_widget[style],+.fb_iframe_widget+iframe[style],+#fbcomments+iframe[style]+{width:+100%25+!important;}|code-block|syntax|javascript|853840|.fb_iframe_widget和.fb_iframe_widgetstyle似乎都很重要。|853841|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Looks like this post is not very old but the answer wasn't working for me. I had to add this to my stylesheet...</p>

<pre><code>#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}
</code></pre>

<p>The .fb_iframe_widget and .fb_iframe_widget[style] both seemed to be important.</p>


blocks|key|637581|text|我使用这个简单的脚本(参见链接中的代码)实现了这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|637582|https://gist.github.com/2111366|offset|length|637583|您必须对信息进行一些更改，以便使用您的Facebook应用程序ID和页面URL。|637584|这个解决方案使用的是jQuery，所以您必须了解它是如何工作的，但是一旦您让脚本执行，您的响应式设计将在页面加载或调整页面大小时工作。|637585|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|V|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|C]]]]

<p>I've got this working using this simple script (see code in link).</p>

<p><a href="https://gist.github.com/2111366" rel="nofollow">https://gist.github.com/2111366</a></p>

<p>You have to make a few changes to the information so that you are using your Facebook App ID and your page URL.</p>

<p>This solution is using jQuery so you'll have to understand how that work but once you get the script to execute your responsive design will work on page load or when resizing the page.</p>


blocks|key|855201|text|关于这个调整大小的东西有一个重要的注意事项:如果Facebook评论脚本检测到你在移动设备上，它就会破坏这一点。但是，如果你让<fb:comments>标签包含属性值mobile="false"，那么(现在)Facebook的脚本将会尊重你的CSS。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|855202|entityMap^0|1R|D|2B|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>An important note about this resize stuff: If the Facebook comment script detects that you're on a mobile device it breaks this. But, if you make the <code>&lt;fb:comments&gt;</code> tag contain the attribute value <code>mobile="false"</code> then (for now) Facebook's scripts will respect your CSS.</p>


blocks|key|638174|text|只需将其放入您的CSS文件或带有style标签的html代码中！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|638175|<style>
.fb-comments,+.fb-comments+iframe[style],+.fb-like-box,+.fb-like-box+iframe[style]{width:100%25+!important;}
.fb-comments+span,+.fb-comments+iframe+span[style],+.fb-like-box+span,+.fb-like-box+iframe+++++span[style]{width:+100%25+!important;}
</style>|code-block|syntax|javascript|638176|参考：http://dwij.co.in/making-facebook-comments-responsive|offset|length|638177|entityMap|0|LINK|mutability|MUTABLE|url|http://dwij.co.in/making-facebook-comments-responsive^0|0|0|3|1H|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Just put this either in your CSS file or in your html code with style tags !!!</p>

<pre><code>&lt;style&gt;
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style]{width:100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe     span[style]{width: 100% !important;}
&lt;/style&gt;
</code></pre>

<p>Ref: <a href="http://dwij.co.in/making-facebook-comments-responsive" rel="nofollow">http://dwij.co.in/making-facebook-comments-responsive</a></p>


blocks|key|637255|text|这是JQuery，可能是您问题答案的一部分。我使用的是like按钮的HTML5版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|637256|<div+class="fb-like"+data-href="my.domain.com"+data-layout="standard"+data-send="false"+data-width="255"+data-show-faces="false"+data-action="recommend"+data-font="verdana"></div>|code-block|syntax|javascript|637257|"div.main-content“元素是like按钮在我的设计中必须适合的元素。调整大小直到div变得非常小，以至于类div.fb中的数据布局属性需要从“标准”更改为占用较少水平空间的替代属性。我是新手，所以我不确定这是否是使like按钮响应式的最优雅的解决方案。我希望看到在这个问题上更有专家的人对这个问题的回答。|637258|$(window).resize(function()+{
++var+computed_width+=+$('div.main-content').width();++++
++$('div.fb-like+iframe').attr('style',+'border:+medium+none;+overflow:+hidden;+height:++24px;+width:+'+%2B+computed_width+%2B+'px');
});|637259|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This is JQuery and might be part of the answer to your question. I am using the HTML5 version of the like button:</p>

<pre><code>&lt;div class="fb-like" data-href="my.domain.com" data-layout="standard" data-send="false" data-width="255" data-show-faces="false" data-action="recommend" data-font="verdana"&gt;&lt;/div&gt;
</code></pre>

<p>The "div.main-content" element is the element that the like button must fit into in my design. The resizing works until to the div gets so small that the data-layout attribute in the div.fb-like needs to be changed from "standard" to an alternative that takes up less horizontal space. I am new at this, so I am not sure if this is the most elegant solution to making the like button repsonsive. I would like to see an answer to this question from somebody that is more of an expert on this subject. </p>

<pre><code>$(window).resize(function() {
  var computed_width = $('div.main-content').width();    
  $('div.fb-like iframe').attr('style', 'border: medium none; overflow: hidden; height:  24px; width: ' + computed_width + 'px');
});
</code></pre>


blocks|key|637528|text|使用inspect元素查看正在生成的代码。在某些情况下，如Wordpress+Facebook插件，它们使用不同的“id”，一旦您发现正在使用的id添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|637529|+#fbSEOComments,+#fbSEOComments+iframe[style]+{width:+100%25+!important;}|code-block|syntax|javascript|637530|这并不总是能达到我学习的目的。虽然你可以改变颜色和大小，但让它具有响应性仍然是一个很大的问题。它似乎不喜欢百分比，也看不到它所在的盒子的大小，所以这不起作用。我正在尝试执行@media查询，以根据浏览器窗口的大小调整其大小。|637531|如果它能识别宽度就好了，但@media似乎是唯一的方法。|637532|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Use the inspect element to see what code is being generated. In some cases like Wordpress Facebook plugins they use different "ids" and once you find the id being used adding</p>

<pre><code> #fbSEOComments, #fbSEOComments iframe[style] {width: 100% !important;}
</code></pre>

<p>This doesnt always do the trick im learning. While you can change colors and some sizing making it responsive is still very buggy. It doesnt seem to like percentages and doesnt see the size of the box it's in so this isnt working. im toying with doing @media queries to resize it depending on the size of browser window. </p>

<p>It would be nice if it recognized the width but the @media seems to be the only way.</p>


blocks|key|637630|text|Facebook对评论插件输出的标记做了一些修改。我使用的是HTML5版本。从上面分享的内容修改的CSS确实起到了作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|637631|.fb-comments,+.fb_iframe_widget+iframe[style],+.fb_iframe_widget+span[style]+{width:+100%25+!important;}|code-block|syntax|javascript|637632|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Facebook made some changes to the outputted markup from the comments plugin.  I am using the HTML5 version.  This amended CSS from what was shared above did the trick.</p>

<pre><code>.fb-comments, .fb_iframe_widget iframe[style], .fb_iframe_widget span[style] {width: 100% !important;}
</code></pre>


blocks|key|854227|text|下面是一些jquery，这些jquery在更改输出标记时应该保持不变，因为它使用正则表达式仅重写宽度，而不使用style标记的其余部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|854228|您需要指定正确的容器id或选择器，替换我的示例：#footer-last。根据容器宽度的变化调整iframe的大小，这将需要设置为响应式。|854229|//+Resize+facebook+window+width
container_width+=+$('#footer-last').width();
$fb_iframe+=+$('.fb-social-like-plugin+iframe');
fb_style+=+$fb_iframe.attr('style').replace(/width:\s*\d%2Bpx/i,+'width:+'+%2B+container_width+%2B+'px');
$fb_iframe.attr('style',+fb_style);|code-block|syntax|javascript|854230|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here is some jquery that should persist across changes to the output markup as it uses a regex expression to rewrite the width only, leaving the rest of the style tag alone.</p>

<p>You need to specify the correct container id or selector, replacing my example of: #footer-last.  The iframe is resized based on the changes in width to the container, which will need to be set up as responsive.</p>

<pre><code>// Resize facebook window width
container_width = $('#footer-last').width();
$fb_iframe = $('.fb-social-like-plugin iframe');
fb_style = $fb_iframe.attr('style').replace(/width:\s*\d+px/i, 'width: ' + container_width + 'px');
$fb_iframe.attr('style', fb_style);
</code></pre>


blocks|key|637833|text|我不知道评论，但是使用链接框，你所要做的就是直接使用Facebook的iframe选项，并按百分比切换出像素宽度，它会根据所在列的宽度而变化。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|637834|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I don't know about the comments, but with the link box, all you have to do is use the iframe option direct from Facebook and switch out the width in pixels with a percentage, and it'll change depending on the width of the column it's in.</p>


blocks|key|855363|text|这里有一个小工作，它将HTML5+Facebook+LikeBox插件附加到DOM中，并提供响应高度或宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|855364|++++++++$(document).ready(function(){++++++
++++++++++++var+height+=+$(window).height();
++++++++++++var+width+=+$(window).width();

++++++++++++var+widget_height+=+parseInt((height)*0.9);
++++++++++++var+widget_width+=+parseInt((height)*0.3);
++++++++++++var+page_url+=+"http://www.facebook.com/Facebook";

++++++++++++$(".fb-plugin").append("<div+class='fb-like-box'+
+++++++++++++++++++++++++++++++++++++++++data-href='"%2Bpage_url%2B"'+
+++++++++++++++++++++++++++++++++++++++++data-width='"%2Bwidget_width%2B"'+
+++++++++++++++++++++++++++++++++++++++++data-height='"%2Bwidget_height%2B"'+
+++++++++++++++++++++++++++++++++++++++++data-colorscheme='dark'+
+++++++++++++++++++++++++++++++++++++++++data-show-faces='true'+
+++++++++++++++++++++++++++++++++++++++++data-border-color='#222'+
+++++++++++++++++++++++++++++++++++++++++data-stream='true'+
+++++++++++++++++++++++++++++++++++++++++data-header='true'>
++++++++++++</div></div>");
++++++++});|code-block|syntax|javascript|855365|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here's a small work around that appends the HTML5 Facebook LikeBox Plugin into the DOM with a response height or width.</p>

<pre><code>        $(document).ready(function(){      
            var height = $(window).height();
            var width = $(window).width();

            var widget_height = parseInt((height)*0.9);
            var widget_width = parseInt((height)*0.3);
            var page_url = "http://www.facebook.com/Facebook";

            $(".fb-plugin").append("&lt;div class='fb-like-box' 
                                         data-href='"+page_url+"' 
                                         data-width='"+widget_width+"' 
                                         data-height='"+widget_height+"' 
                                         data-colorscheme='dark' 
                                         data-show-faces='true' 
                                         data-border-color='#222' 
                                         data-stream='true' 
                                         data-header='true'&gt;
            &lt;/div&gt;&lt;/div&gt;");
        });
</code></pre>


blocks|key|855465|text|下面是一个完整的示例，使用jQuery，带有响应宽度和加载图像。代码中注释了Alan和Jubair的CSS代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|855466|这在Android+webview中运行良好|855467|<html>
<head>
++++<title>Title</title>
++++<script+src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
++++.fb-comments,+.fb-comments+span,+.fb-comments.fb_iframe_widget+span+iframe+{
++++++++width:+100%25;/*+!important;+To+get+the+control+with+JQuery*/
++++}
</style>

<body>
++++<div+id="fb-root"></div>
++++<script>
+++++++window.fbAsyncInit+=+function()+{
++++++++FB.init({
++++++++++++++++appId+++:+'APP_ID',
++++++++++++++++channelUrl+:+'//domain.com/channelUrl.php',
++++++++++++++++status++:+true,+
++++++++++++++++cookie++:+true,
++++++++++++++++xfbml+++:+true
++++++++++++});

++++++++//Event+fired+when+the+plugin+has+been+completely+loaded
++++++++FB.Event.subscribe('xfbml.render',
++++++++++++function(response)+{
++++++++++++++++//alert('You+liked+the+URL:+'+%2B+response);
++++++++++++++++var+w+=+(typeof+window.innerWidth+!=+'undefined')?
+++++++++++++++++++++++++++window.innerWidth
++++++++++++++++++++++++:(typeof+document.documentElement+!=+'undefined'
+++++++++++++++++++++++++&&+typeof+document.documentElement.clientWidth+!=
+++++++++++++++++++++++++'undefined'+&&+document.documentElement.clientWidth+!=+0)+?
+++++++++++++++++++++++++++document.documentElement.clientWidth
++++++++++++++++++++++++:+document.getElementsByTagName('body')[0].clientWidth;

++++++++++++++++w+*=+.950;+//95%25+for+best+fit+on+mobile+screens
++++++++++++++++//RESIZE
++++++++++++++++$(".fb-comments").css("width",w);
++++++++++++++++$(".fb-comments+>+span").css("width",w);
++++++++++++++++//Some+days+ago+the+next+line+would+be+sufficient+++++++++++++++++++++++
++++++++++++++++$(".fb_ltr").css("width",w);
++++++++++++++++//Now+the+modify+of+the+span+width+is+necessary+to+do+the+work

++++++++++++++++$("#div_loading_gif").remove();



++++++++++++}
++++++++);

++++++};

++++++//cargando+SDK+Asíncronamente
++++++(function(d){
++++++++++++var+js,+id+=+'facebook-jssdk',+ref+=+d.getElementsByTagName('script')[0];
++++++++++++if+(d.getElementById(id))+{return;}
++++++++++++js+=+d.createElement('script');+js.id+=+id;+js.async+=+true;
++++++++++++js.src+=+"//connect.facebook.net/en_US/all.js";
++++++++++++ref.parentNode.insertBefore(js,+ref);
++++++}(document));



++++</script>

++++<div+id="div_loading_gif"+style="width:100%25;++height:100%25;+text-align:center;+background:url(../img/loading.gif)+no-repeat+center+center;"+>

++++</div>

++++
++++<div+class="fb-comments"
++++++++style="padding:0+auto;"
++++++++data-href="http://domain.com/comments.html"+
++++++++data-width="100px"+
++++++++data-num-posts="5"
++++++++data-mobile="false"
++++++++>
++++</div>



</body>|code-block|syntax|javascript|855468|​|855469|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Here's a complete example, using jQuery, with a response width and a loading image.
The CSS code of Alan and Jubair is commented in the code.</p>

<p>That's works fine in an Android webview</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;style&gt;
    .fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
        width: 100%;/* !important; To get the control with JQuery*/
    }
&lt;/style&gt;

&lt;body&gt;
    &lt;div id="fb-root"&gt;&lt;/div&gt;
    &lt;script&gt;
       window.fbAsyncInit = function() {
        FB.init({
                appId   : 'APP_ID',
                channelUrl : '//domain.com/channelUrl.php',
                status  : true, 
                cookie  : true,
                xfbml   : true
            });

        //Event fired when the plugin has been completely loaded
        FB.Event.subscribe('xfbml.render',
            function(response) {
                //alert('You liked the URL: ' + response);
                var w = (typeof window.innerWidth != 'undefined')?
                           window.innerWidth
                        :(typeof document.documentElement != 'undefined'
                         &amp;&amp; typeof document.documentElement.clientWidth !=
                         'undefined' &amp;&amp; document.documentElement.clientWidth != 0) ?
                           document.documentElement.clientWidth
                        : document.getElementsByTagName('body')[0].clientWidth;

                w *= .950; //95% for best fit on mobile screens
                //RESIZE
                $(".fb-comments").css("width",w);
                $(".fb-comments &gt; span").css("width",w);
                //Some days ago the next line would be sufficient                       
                $(".fb_ltr").css("width",w);
                //Now the modify of the span width is necessary to do the work

                $("#div_loading_gif").remove();



            }
        );

      };

      //cargando SDK Asíncronamente
      (function(d){
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
      }(document));



    &lt;/script&gt;

    &lt;div id="div_loading_gif" style="width:100%;  height:100%; text-align:center; background:url(../img/loading.gif) no-repeat center center;" &gt;

    &lt;/div&gt;

    &lt;!--Usando jquery modificar el style de el div de clase fb_ltr
    cambiar el ancho por el de la pantalla--&gt;
    &lt;div class="fb-comments"
        style="padding:0 auto;"
        data-href="http://domain.com/comments.html" 
        data-width="100px" 
        data-num-posts="5"
        data-mobile="false"
        &gt;
    &lt;/div&gt;



&lt;/body&gt;
</code></pre>

<p></p>


blocks|key|855638|text|我认为在这种情况下，max-width比width更好，它对我来说是有效的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|855639|.fb-comments,+.fb-comments+iframe[style],+.fb-comments+span+{
++width:+100%25+!important;
}|code-block|syntax|javascript|855640|entityMap^0|A|9|K|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>I think <code>max-width</code> is better than <code>width</code> in this case, and it works for me:</p>

<pre><code>.fb-comments, .fb-comments iframe[style], .fb-comments span {
  width: 100% !important;
}
</code></pre>


blocks|key|638239|text|这对我很管用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|638240|/*+Set+inline+instead+of+inline-block+*/
.fb-comments.fb_iframe_widget{
++++display:+inline+!important;
}

.fb-comments.fb_iframe_widget+span,
.fb_iframe_widget+iframe+{
++++width:+100%25+!important;
}|code-block|syntax|javascript|638241|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works for me </p>

<pre><code>/* Set inline instead of inline-block */
.fb-comments.fb_iframe_widget{
    display: inline !important;
}

.fb-comments.fb_iframe_widget span,
.fb_iframe_widget iframe {
    width: 100% !important;
}
</code></pre>


blocks|key|855690|text|我刚刚试过了，现在在iframe中似乎有一个固定宽度的<div>，这意味着你现在实际上需要用javascript删除style标签来使它流畅。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|855691|编辑:您无法使用JS访问iframe内容，因为它来自另一个域|855692|entityMap^0|A|6|R|5|1M|5|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

<p>I've just tried this and it appears there is now a <code>&lt;div&gt;</code> within the <code>iframe</code> that has a fixed width, meaning you now actually need to remove the <code>style</code> tag with javascript to make it fluid.</p>

<p>EDIT: You can't access the iframe content with JS because it's coming from another domain</p>


blocks|key|638303|text|这对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|638304|+$('.fb-comments').attr('data-width',+'100%25');|code-block|syntax|javascript|638305|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works for me:</p>

<pre><code> $('.fb-comments').attr('data-width', '100%');
</code></pre>


blocks|key|638348|text|我使用了一个小jQuery，并在页面加载和调整窗口大小时设置了"data-width“属性。我遇到的所有CSS方法的问题是，一些注释和按钮隐藏在容器的边距之外或溢出。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|638349|这是我的0.02美元，希望能有所帮助。同样，只需将#content选择器设置为您希望注释框匹配的任何内容，例如容器div...|638350|函数(文档).ready(jQuery(){|638351|//check+for+device+width+and+reformat+facebook+comments
function+fbCommentWidth()+{
++++jQuery('.fb-comments').attr('data-width',jQuery('#content').width());

}
//run+on+resize,+and+reparse+FB+comments+box++++
jQuery(window).on('resize',function()+{
++++fbCommentWidth();
++++FB.XFBML.parse();
});
//run+on+document+ready
fbCommentWidth();|code-block|syntax|javascript|638352|})；|638353|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I got it working using a little jQuery and setting the "data-width" attribute when the page loads and on window resizing.  Problem I ran into with all the CSS approaches is that some of the comments and buttons were hidden outside the container's margins or overflowing.</p>

<p>Here's my $0.02, hope it helps.  Also, just set the #content selector to whatever you want the comment box to match such as a container div...</p>

<p>jQuery(document).ready(function() {</p>

<pre><code>//check for device width and reformat facebook comments
function fbCommentWidth() {
    jQuery('.fb-comments').attr('data-width',jQuery('#content').width());

}
//run on resize, and reparse FB comments box    
jQuery(window).on('resize',function() {
    fbCommentWidth();
    FB.XFBML.parse();
});
//run on document ready
fbCommentWidth();
</code></pre>

<p>});</p>


blocks|key|855793|text|这就是它的工作方式:只需添加这个data-width="100%25“，下面是一个示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|855794|<div+class="fb-comments"+data-href="<?php+the_permalink();+?>"+data-numposts="5"+data-colorscheme="light"+data-width="100%25"></div>|code-block|syntax|javascript|855795|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>That's how it works: just add this data-width="100%"
Here is an example:</p>

<pre><code>&lt;div class="fb-comments" data-href="&lt;?php the_permalink(); ?&gt;" data-numposts="5" data-colorscheme="light" data-width="100%"&gt;&lt;/div&gt;
</code></pre>


blocks|key|855803|text|这是我最终得到的结论：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|855804|(function()+{
++++window.addEventListener('load',+updateWidth);
++++window.addEventListener('resize',+debounce(function+()+{
++++++++updateWidth();
++++++++if+(window.FB+&&+FB.XFBML+&&+FB.XFBML.parse)+{
++++++++++++FB.XFBML.parse();
++++++++}
++++},+1000));

++++function+updateWidth()+{
++++++++$('.fb-like,+.fb-comments').each(function+()+{
++++++++++++var+el+=+$(this);
++++++++++++var+width+=+el.parent().width();
++++++++++++el.attr('data-width',+width);
++++++++})
++++}

++++function+debounce(func,+wait,+immediate)+{
++++++++var+timeout;
++++++++return+function()+{
++++++++++++var+context+=+this,+args+=+arguments;
++++++++++++var+later+=+function()+{
++++++++++++++++timeout+=+null;
++++++++++++++++if+(!immediate)+func.apply(context,+args);
++++++++++++};
++++++++++++var+callNow+=+immediate+&&+!timeout;
++++++++++++clearTimeout(timeout);
++++++++++++timeout+=+setTimeout(later,+wait);
++++++++++++if+(callNow)+func.apply(context,+args);
++++++++};
++++}
})();|code-block|syntax|javascript|855805|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is what I ended up with:</p>

<pre><code>(function() {
    window.addEventListener('load', updateWidth);
    window.addEventListener('resize', debounce(function () {
        updateWidth();
        if (window.FB &amp;&amp; FB.XFBML &amp;&amp; FB.XFBML.parse) {
            FB.XFBML.parse();
        }
    }, 1000));

    function updateWidth() {
        $('.fb-like, .fb-comments').each(function () {
            var el = $(this);
            var width = el.parent().width();
            el.attr('data-width', width);
        })
    }

    function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate &amp;&amp; !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }
})();
</code></pre>


<p>I'm developing a site around the "responsive design" concept, but the facebook social plugins are static width and "break" the layout when it's re-sized.</p>

<p>Using media queries, I've set the plugins to hide on low-res browsers (mobile, etc...). However, on desktop browsers, when the browser window is re-sized smaller, but not so small to hide the plugins, they break out of the layout.</p>

<p>Any way to set a fluid width for the Facebook social plugins?</p>


Is it possible to set a fluid width for Facebook's social plugins?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在开发一个围绕“响应式设计”概念的网站，但是facebook的社交插件是静态宽度的，并且在调整大小时会“破坏”布局。使用媒体查询，我已经将插件设置为在低分辨率浏览器(移动设备等)上隐藏。然而，在桌面浏览器上，当浏览器窗口被重新调整为更小，但又不是太小以隐藏插件时，它们就会打破布局。有没有办法为Facebook的社交插件设置一个流畅的宽度？

问有没有可能为Facebook的社交插件设置一个流畅的宽度？
EN

回答 23

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有可能为Facebook的社交插件设置一个流畅的宽度？EN

回答 23

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有可能为Facebook的社交插件设置一个流畅的宽度？
EN