CSS 如何使 Facebook Like Box 响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10656038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the Facebook Like Box responsive?
提问by Rick Smith
I am using the Facebook like box code in my side barby pasting the Facebook code into a text widget. My theme is responsive, and I'd like to get the like box to resize correctly. I found this tutorialbut he says the way he is doing it, isn't "fully responsive" so I didn't know if there was a better way to do it.
我通过将 Facebook 代码粘贴到文本小部件中，在我的侧边栏中使用 Facebook like 框代码。我的主题是响应式的，我想让喜欢的框正确调整大小。我找到了这个教程，但他说他这样做的方式并不是“完全响应”，所以我不知道是否有更好的方法来做到这一点。
回答by Colin Johnston
NOTE: this answer is obsolete. See the community wiki answer belowfor an up-to-date solution.
注意：此答案已过时。有关最新解决方案，请参阅下面的社区 wiki 答案。
I found this Gist today and it works perfectly: https://gist.github.com/2571173
我今天找到了这个 Gist，它运行良好：https: //gist.github.com/2571173
(Many thanks to https://gist.github.com/smeranda)
（非常感谢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;
}
回答by stevenw00
Colin's example for me clashed with the like button. So I adapted it to only target the Like Box.
科林给我的例子与喜欢按钮发生冲突。因此，我将其调整为仅针对 Like Box。
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }
Tested in most modern browsers.
在大多数现代浏览器中测试。
回答by amirnissim
NOTE: Colin's solution didn't work for me. Facebook may have changed their markup. Using *should be more future-proof.
注意：Colin 的解决方案对我不起作用。Facebook 可能已经更改了他们的标记。使用*应该更具前瞻性。
Wrap the Like box with a div:
用 div 包裹 Like 框：
<div id="likebox-wrapper">
<iframe src="..."></iframe> <!-- likebox code -->
</div>
and add this to your css file:
并将其添加到您的 css 文件中：
#likebox-wrapper * {
width: 100% !important;
}
回答by Clain Dsilva
As of August 4 2015, the native facebook like box have a responsive code snippet available at Facebook Developers page.
截至 2015 年 8 月 4 日，本机 facebook like box 在 Facebook 开发人员页面上提供了一个响应代码片段。
You can generate your responsive Facebook likebox here
您可以在此处生成响应式 Facebook 点赞框
https://developers.facebook.com/docs/plugins/page-plugin
https://developers.facebook.com/docs/plugins/page-plugin
This is the best solution ever rather than hacking CSS.
这是最好的解决方案，而不是破解 CSS。
回答by Ryan H
The answer you're looking for as of June, 2013 can be found here:
您在 2013 年 6 月寻找的答案可以在这里找到：
https://gist.github.com/dineshcooper/2111366
https://gist.github.com/dineshcooper/2111366
It's accomplished using jQuery to rewrite the inner HTML of the parent container that holds the facebook widget.
它是使用 jQuery 重写包含 facebook 小部件的父容器的内部 HTML 完成的。
Hope this helps!
希望这可以帮助！
回答by morleman
I was trying to do this on Drupal 7 with the " fb_likebox" module (https://drupal.org/project/fb_likebox). To get it to be responsive. Turns out I had to write my own Contrib module Variation and stripe out the width setting option. (the default height option didn't matter for me). Once I removed the width, I added the <div id="likebox-wrapper">in the fb_likebox.tpl.php.
我试图在 Drupal 7 上使用“fb_likebox”模块（https://drupal.org/project/fb_likebox）来做到这一点。让它响应。结果我不得不编写自己的 Contrib 模块 Variation 并去掉宽度设置选项。（默认高度选项对我来说无关紧要）。删除宽度后，我<div id="likebox-wrapper">在 fb_likebox.tpl.php 中添加了。
Here's my CSS to style it:
这是我的 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;}`
回答by Vlad
None of the css trick worked for me (in my case the fb-like box was pulled right with "float:right"). However, what worked without any additional tricks is an IFRAME version of the button code. I.e.:
没有任何 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>
(Note custom width in style, and no need to include additional javascript.)
（注意样式中的自定义宽度，不需要包含额外的 javascript。）
