如何使Facebook点赞框具有响应式布局？

Question

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

- Rick Smith

Answer 1

注意: 该回答已经过时。请参考下面的社区维基回答，以获得最新的解决方案。

---

我今天发现了这个代码片段，它完美地工作：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;
}

- Colin Johnston

---

很好的简单解决方案，但没有必要让浏览器渲染 #fb-root 元素，然后在 CSS 中将其隐藏。直接删除该元素即可。 - petermarty

请注意，墙上的图片具有一定的尺寸，这会导致点赞框的最小尺寸。 - Tillito

这里唯一仍然存在的问题是，如果你在 iPhone 上滚动新闻源并加载更多帖子，它们会加载得更大并且超出布局。有什么想法吗？ - Steve de Niese

不要忘记在 FB DIV 本身中设置 data-width="100%"。 - patrick

不过时！将脚本放入iFrame可能不可行，而这对我起作用了。 - Steve Horvath

Answer 2

Colin给我的示例与“喜欢”按钮冲突。因此，我将其改为仅针对“赞”框。

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

已在大多数现代浏览器中进行了测试。

- stevenw00

---

对我很有用，谢谢@sovarn之前一直在尝试编写jQuery hack。 - tristanbailey

说实话..非常感谢。如果可以的话，我会抱抱你！这修复了一个一直困扰我的问题，真的很不错。 - Nate Uni

工作得很好，"iframe[style]" 到底是做什么用的？ - wutzebaer

+1，与在各个断点指定几个预设的 max-height 值的媒体查询结合使用效果很好。 - nickb

@wutzebaer，iframe[style] 只是针对任何设置了 style 属性的 iframe 元素。也就是说，它会忽略 <iframe src="..."></iframe>，但会成功地定位到 <iframe src="..." style=""></iframe>。 - nickb

Answer 3

注意：Colin的解决方案对我无效。Facebook可能已经更改了它们的标记。使用*应该更具有未来性。

将Like框包装在一个div中：

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

并将此添加到您的CSS文件中：

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

- Amir Nissim

---

我不确定为什么你要使用iFrame来嵌入likebox？只需要 .fb-like-box{width: 100% !important;} 就可以了。将 <div class="fb-like-box" ... </div> 放在 <div class="col-md-6"></div> 中即可。 - Bojangles

Answer 4

截至2015年8月4日，原生Facebook点赞框架在Facebook开发者页面上提供了响应式代码片段。

你可以在这里生成你的响应式Facebook点赞框架。

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

这是比CSS hack更好的解决方案。

- Clain Dsilva

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - eye-wonder

Answer 5

截止2013年6月，您所寻找的答案可以在这里找到：https://gist.github.com/dineshcooper/2111366。使用jQuery重写包含Facebook小部件的父容器的内部HTML来实现此目标。希望这能有所帮助！

- Ryan H

---

从2014年7月起，这个要点已经对我不再适用了。看起来Facebook在iframe中添加了硬编码样式 width="xxxpx", 这破坏了该方法。 - stephen.hanson

Answer 6

对我来说，所有的CSS技巧都没有起作用（在我的情况下，fb-like框被右浮动）。然而，没有任何额外的技巧可以解决问题的是按钮代码的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。）

- Vlad

---

这个片段应该在哪里生成？或者完整的源值应该是什么样子的？ - isherwood

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;}`

- morleman