通过将Facebook代码粘贴到文本小部件中,我在侧边栏中使用了类似Facebook的框代码。我的主题是响应式的,我希望获得一个喜欢的框来正确调整其大小。我找到了本教程,但是他说他做的方式并不“完全响应”,所以我不知道是否有更好的方法来做。
Answers:
注意:此答案已过时。请参阅下面的社区Wiki答案,以获取最新的解决方案。
我今天发现了这个要点,它运行良好: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-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }
在大多数现代浏览器中经过测试。
max-height
各种断点处的一些预设值的媒体查询配合使用效果很好。
iframe[style]
仅将iframe
具有style
属性集的任何元素作为目标(空白或其他)。即它将忽略 <iframe src="..."></iframe>
但将成功定位<iframe src="..." style=""></iframe>
。
注意:Colin的解决方案对我不起作用。Facebook可能已更改其标记。使用*
应该更具前瞻性。
用div包装Like框:
<div id="likebox-wrapper">
<iframe src="..."></iframe> <!-- likebox code -->
</div>
并将其添加到您的css文件中:
#likebox-wrapper * {
width: 100% !important;
}
截至2015年8月4日,原生的Facebook like box的Facebook开发者页面上提供了响应代码段。
您可以在此处生成您的自适应Facebook赞框
https://developers.facebook.com/docs/plugins/page-plugin
这是有史以来最好的解决方案,而不是入侵CSS。
截至2013年6月,您正在寻找的答案可以在这里找到:
https://gist.github.com/dineshcooper/2111366
使用jQuery重写保存Facebook小部件的父容器的内部HTML即可完成。
希望这可以帮助!
width="xxxpx"
在iframe中添加了硬编码样式,这打破了这种方法。
没有一个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。)
我试图在Drupal 7上使用“ fb_likebox”模块(https://drupal.org/project/fb_likebox)执行此操作。要使其具有响应能力。原来,我不得不编写自己的Contrib模块Variation并去除了width设置选项。(默认高度选项对我来说并不重要)。删除宽度后,我<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;}`