如何创建可调整大小的“like”框？

问题描述：

我为nbglive.com创建的likebox无法调整大小，无论使用什么方法，因此，如何将它与我们的网站集成而不会与广播播放器重叠，这会造成很大的麻烦。如何创建可调整大小的“like”框？

当页面大小调整时，是否可以调整相似框的大小？我正在使用twitter-bootstrap。

答

我把FB部件（likebox和注释）为引导的网格是这样的：

<div class="span4"> 
    <div style="text-align: center;"> 
    <div class="fb-like-box" data-href="{url}" data-width="234" data-show-faces="true" data-stream="false" data-border-color="#007Db7" data-header="false"></div> 
    </div> 
</div>

其中url是包含的网页URL的变量FB页面。

与CSS：

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

Facebook的异步加载它的组件具有根据width数据属性设置样式。我将它设置为一些安全值：看起来很糟糕，但不会溢出到不同视图端口的其他元素。我的CSS覆盖了调整窗口小部件所需的所有FB的宽度设置（我设置了100%，因此它调整为包含div）。它没有记录，并可能会停止工作，当FB更改他们的设计，所以明智地选择您的默认宽度（234px）;）

Example LikeBox的在右侧面板的底部和侧边栏。请注意当您更改浏览器窗口大小时的响应行为。

答

这里有一个简单的方法：

$(".fb-like-box").attr("data-width", $(document).width());

这似乎并不工作给出：“（ – RolandiXor 2013-03-18 02:49:38

它不会工作，因为它是在将小部件下载到'iframe'时被FB init脚本读取的，并且以后不会使用。要获得响应的小部件，必须在加载的'iframe'中更改样式。 – 2013-03-18 08:44:19

答

根据您的CSS如下

<div class="comment-box"> 
     <div class="fb-comments" data-href="site_url" data-width="100%" data-numposts="5" data-colorscheme="light" data-mobile="auto-detected"></div> 

</div><!--comment-box-->

切做你的盘带和复制Java的脚本FB里叫头

如何创建可调整大小的“like”框？

相关推荐