如何使Facebook Like Box响应？
我通过将Facebook代码粘贴到文本小部件中，在我的侧栏中使用Facebook代码框。 我的主题是响应式的，我想得到像框一样正确resize。 我发现这个教程，但他说他这样做的方式，不是“完全响应”，所以我不知道是否有更好的方法来做到这一点。
注意：这个答案已经过时了。 请参阅下面的社区wiki答案以获取最新的解决scheme。
今天我发现了这个Gist，它完美的工作： https ： //gist.github.com/2571173
（非常感谢https://gist.github.com/smeranda ）
/* Make the Facebook Like box responsive (fluid width) https://developers.facebook.com/docs/reference/plugins/like-box/ */ /* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */ #fb-root { display: none; } /* To fill the container and nothing else */ .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { width: 100% !important; } 科林对我的榜样与像button一样冲突。 所以我调整它只是针对Like Box。
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }
在大多数现代浏览器中testing。
注：科林的解决scheme不适合我。 Facebook可能已经改变了他们的标记。 使用*应该更具前瞻性。
用div包装Like框：
<div id="likebox-wrapper"> <iframe src="..."></iframe> <!-- likebox code --> </div>
并添加到您的CSS文件：
#likebox-wrapper * { width: 100% !important; }
截至2015年8月4日，原生Facebook的喜欢框有一个响应的代码片段可在Facebook开发者页面。
你可以在这里生成你的响应式Facebook Likebox
https://developers.facebook.com/docs/plugins/page-plugin
这是有史以来最好的解决scheme，而不是黑客入侵的CSS。
您在2013年6月find的答案可以在这里find：
https://gist.github.com/dineshcooper/2111366
它使用jQuery来重写包含Facebook小部件的父容器的内部HTML。
希望这可以帮助！
没有一个css的技巧为我工作（在我的情况下，fb-like的框被拉右“float：right”）。 然而，没有任何额外的技巧是什么工作的IFRAME版本的button代码。 即：
<iframe src="//www.facebook.com/plugins/like.php?href=..." scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:71px; height:21px;" allowTransparency="true"> </iframe>
（注意样式中的自定义宽度，不需要包含额外的javascript。）
我试图在Drupal 7上用“fb_likebox”模块（ https://drupal.org/project/fb_likebox ）来做到这一点。 为了得到它的响应。 原来，我不得不写我自己的Contrib模块变化，并划出宽度设置选项。 （默认高度选项对我来说并不重要）。 一旦我删除了宽度，我在<div id="likebox-wrapper">添加了<div id="likebox-wrapper"> 。
这是我的CSS风格：
`#likebox-wrapper * { width: 100% !important; background: url('..http://img.dovov.comblock.png') repeat 0 0; color: #fbfbfb; -webkit-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; border: 1px solid #DDD;}`
你可以看到Facebook的方式来适应宽度
据说：
- 该插件将确定页面加载时的宽度
- 在页面加载之后，它不会对盒子模型做出反应。
如果您想在窗口大小上调整插件宽度，则需要手动重新插入插件。
所以这里有一个工作的解决scheme：
HTML
<div class="fb-page"> <!-- Iframe code --> </div>
使用Javascript
(function($){ $(window).on('resize', function() { $(".fb-page").attr("data-width", $('.fb-column').width()).attr("data-height", $('.fb-column').height()); if (typeof FB !== 'undefined' ) { FB.XFBML.parse(); } }); })(jQuery);
