如何让 Facebook Like Box 响应式？

Posted 2023-03-06

【中文标题】如何让 Facebook Like Box 响应式？

【英文标题】：How to make the Facebook Like Box responsive?

【发布时间】：2012-05-26 05:30:02

【问题描述】：

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

【参考方案1】：

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

---

我今天找到了这个 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;

【讨论】：

不错的简单解决方案，但无需让浏览器呈现 #fb-root 元素，然后将其隐藏在 CSS 中。只需将元素全部删除即可。

请记住，墙的图片有一定的尺寸，这会导致like box的最小尺寸。

我在这里仍然看到的唯一问题是 iPhone，如果您滚动浏览新闻提要并加载更多帖子，它们会加载得更大并且超出布局。有什么想法吗？

别忘了在 FB DIV 中设置 data-

不会过时！将脚本放入 iFrame 可能不可行，这对我有用。

【参考方案2】：

Colin 为我举的例子与“赞”按钮发生了冲突。所以我将其调整为仅针对 Like Box。

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

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

【讨论】：

对我来说工作得很好，感谢@sovarn 之前一直在尝试编写一个 jquery hack。

老实说.. 非常感谢。如果可以，我会拥抱你！很好地解决了一个真正困扰我的问题。

效果很好，“iframe[style]”到底是做什么的？

+1，与在各种断点处指定一些预设 max-height 值的媒体查询结合使用非常好。

@wutzebaer, iframe[style] 只针对具有style 属性集（空白或其他）的任何iframe 元素。即它会忽略<iframe src="..."></iframe>，但会成功定位<iframe src="..." style=""></iframe>。

【参考方案3】：

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

用 div 包裹 Like 框：

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

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

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

【讨论】：

我不知道你为什么首先要使用 iFrame 来嵌入likebox？ .fb-like-boxwidth: 100% !important; 就是我所需要的。 在 内

【参考方案4】：

截至 2015 年 8 月 4 日，原生 facebook like box 在 Facebook 开发者页面上提供了响应代码 sn-p。

您可以在此处生成响应式 Facebook 类似框

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

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

【讨论】：

通过勾选“适应插件容器宽度”，点赞框只会在页面加载时改变宽度（而不是通过调整浏览器窗口的大小）。为了防止设计在调整窗口大小（或平板电脑方向更改）时搞砸，您还可以触发刷新或使用 width:100%;溢出-x：隐藏；最大宽度：500px； （在周围的 div 上）

【参考方案5】：

截至 2013 年 6 月，您正在寻找的答案可以在这里找到：

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

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

希望这会有所帮助！

【讨论】：

截至 2014 年 7 月，该要点不再适用于我。看起来 facebook 在 iframe 中添加了带有 width="xxxpx" 的硬编码样式，这破坏了这种方法。

【参考方案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。）

【讨论】：

在哪里生成这个 sn-p，或者完整的源值应该是什么样子？

【参考方案7】：

我试图在 Drupal 7 上使用“fb_likebox”模块 (https://drupal.org/project/fb_likebox) 执行此操作。让它响应。原来我必须编写自己的 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;`