如何使Facebook Like Box响应？

Question

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

Answer 1

注意:这个答案已经过时了.请参阅下面的社区维基解答,了解最新的解决方案.

我今天发现了这个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;
}

Answer 2

科林的例子让我跟按钮发生了冲突.所以我改编它只针对Like Box.

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

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

Answer 3

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

用div包装Like框:

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

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

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

Answer 4

截至2015年8月4日,本地facebook like box在Facebook Developers页面上提供了响应式代码段.

您可以在此处生成响应式Facebook收件箱

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

这是有史以来最好的解决方案而不是黑客攻击CSS.