如何使Facebook Like Box响应?


67

通过将Facebook代码粘贴到文本小部件中,我在侧边栏中使用了类似Facebook的框代码。我的主题是响应式的,我希望获得一个喜欢的框来正确调整其大小。我找到了本教程,但是他说他做的方式并不“完全响应”,所以我不知道是否有更好的方法来做。

Answers:


120

注意:此答案已过时。请参阅下面的社区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;
}

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

1
请记住,墙上的图片具有一定的尺寸,这导致类似盒子的尺寸最小。
Tillito

我仍然在这里看到的唯一问题是iPhone,如果您滚动浏览新闻提要并加载更多帖子,则它们加载得更大,并且脱离了版面。有任何想法吗?
史蒂夫·德尼斯

2
别忘了在FB DIV本身中设置data-width =“ 100%”
patrick

不落伍!将脚本放入iFrame可能不可行,这对我有用。
史蒂夫·霍瓦斯

28

对我来说,科林的榜样与“赞”按钮发生冲突。因此,我将其调整为仅针对“赞”框。

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

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


对我来说很好,谢谢@sovarn之前一直尝试编写一个jQuery hack。
tristanbailey13年

1
老实说..非常感谢。如果可以的话,我会拥抱你!很好地解决了一个困扰我的问题。
Nate Uni

效果很好,“ iframe [style]”到底能做什么?
wutzebaer 2013年

1
+1与指定max-height各种断点处的一些预设值的媒体查询配合使用效果很好。
nickb 2014年

@wutzebaer,iframe[style]仅将iframe具有style属性集的任何元素作为目标(空白或其他)。即它将忽略 <iframe src="..."></iframe>但将成功定位<iframe src="..." style=""></iframe>
尼克

26

注意:Colin的解决方案对我不起作用。Facebook可能已更改其标记。使用*应该更具前瞻性。

用div包装Like框:

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

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

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

我不确定为什么首先要使用iFrame嵌入likebox?我只需要.fb-like-box {width:100%!important;}。<div class =“ col-md-6”> </ div>内的<div class =“ fb-like-box” ... </ div>
Bojangles 2014年

7

截至2015年8月4日,原生的Facebook like box的Facebook开发者页面上提供了响应代码段。

您可以在此处生成您的自适应Facebook赞框

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

这是有史以来最好的解决方案,而不是入侵CSS。


2
通过勾选“适应插件容器的宽度”,类似框将仅在页面加载时改变宽度(而不是通过调整浏览器窗口的大小)。为了防止设计弄乱窗口调整大小(或更改平板电脑方向),您还可以触发刷新或使用width:100%; 溢出-x:隐藏; max-width:500px; (在周围的div上)
令人


0

没有一个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。)


这个代码段是在哪里生成的,或者完整的源代码应该是什么样的?
isherwood 2015年

0

我试图在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;}`
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.