67

我通过将 Facebook 代码粘贴到文本小部件中来使用侧边栏中的 Facebook 类似框代码。我的主题是响应式的，我想让喜欢的框正确调整大小。我找到了这个教程，但他说他这样做的方式不是“完全响应”，所以我不知道是否有更好的方法来做到这一点。

4

7 回答 7

121

注意：此答案已过时。有关最新解决方案，请参阅下面的社区 wiki 答案。

我今天找到了这个 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;
}
于 2012-05-23T19:23:20.810 回答
28

Colin's example for me clashed with the like button. So I adapted it to only target the Like Box.

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

Tested in most modern browsers.

于 2012-10-08T06:16:21.817 回答
26

注意：科林的解决方案对我不起作用。Facebook 可能已经改变了他们的标记。使用*应该更具前瞻性。

用 div 包裹 Like 框：

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

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

#likebox-wrapper * {
   width: 100% !important;
}
于 2013-02-27T16:18:33.620 回答
7

截至 2015 年 8 月 4 日，本机 facebook like 框在 Facebook 开发人员页面上提供了一个响应式代码片段。

您可以在此处生成响应式 Facebook likebox

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

这是有史以来最好的解决方案，而不是破解 CSS。

于 2015-08-04T12:22:13.393 回答
3

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

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

它是使用 jQuery 重写包含 facebook 小部件的父容器的内部 HTML 来完成的。

希望这可以帮助！

于 2013-06-12T16:49:40.797 回答
0

我试图在 Drupal 7 上使用“fb_likebox”模块（https://drupal.org/project/fb_likebox）来做到这一点。让它响应。原来我必须编写自己的 Contrib 模块 Variation 并删除宽度设置选项。（默认高度选项对我来说并不重要）。删除宽度后，我将其添加<div id="likebox-wrapper">到 fb_likebox.tpl.php 中。

这是我的 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;}`
于 2014-01-03T04:20:24.113 回答
0

没有一个 css 技巧对我有用（在我的情况下，类似 fb 的框是用“float:right”拉到右边的）。然而，没有任何额外技巧的工作是 IFRAME 版本的按钮代码。IE：

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

于 2013-05-30T21:56:06.770 回答