Question

我通过将Facebook代码粘贴到文本小部件中，在side bar中使用类似Facebook的框代码。我的主题是响应式的，我想让类似的框正确调整大小。我发现这个tutorial但是他说他做的方式不是“完全响应”，所以我不知道是否有更好的方法来做到这一点。

Answer 1

注意：这个答案已经过时了。有关最新的解决方案，请参阅the community wiki answer below。

我今天发现了这个要点并且完美无缺：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;
}

Answer 2

科林的例子让我与喜欢的按钮发生了冲突。所以我改编它只针对Like Box。

.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }

在大多数现代浏览器中测试过。

Answer 3

注意：科林的解决方案对我不起作用。 Facebook可能已经改变了他们的标记。使用*应该更适合面向未来。

用div包裹Like框：

<div id="likebox-wrapper">
    <iframe src="..."></iframe> <!-- likebox code -->
</div>

并将其添加到您的css文件中：

#likebox-wrapper * {
   width: 100% !important;
}

Answer 4

截至2015年8月4日，本地脸谱版盒子在Facebook开发者页面上提供了响应式代码段。

您可以在此处生成响应式Facebook收藏夹

https://developers.facebook.com/docs/plugins/page-plugin

这是有史以来最好的解决方案，而不是黑客攻击。

Answer 5

您可以在此处找到截至2013年6月的答案：

https://gist.github.com/dineshcooper/2111366

使用jQuery重写包含facebook小部件的父容器的内部HTML。

希望这有帮助！

Answer 6

没有一个css技巧对我有效（在我的情况下，类似fb的盒子被拉上“float：right”）。但是，没有任何额外技巧的工作是按钮代码的IFRAME版本。即：

<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。）

Answer 7

我尝试使用“fb_likebox”模块（https://drupal.org/project/fb_likebox）在Drupal 7上执行此操作。让它变得敏感。事实证明我必须编写自己的Contrib模块Variation并对宽度设置选项进行条带化。（默认高度选项对我来说无关紧要）。删除宽度后，我在fb_likebox.tpl.php中添加了<div id="likebox-wrapper">。

这是我的CSS样式：

 `#likebox-wrapper * {
  width: 100% !important;
  background: url('../images/block.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 Like Box响应？

7 个答案: