Question

我为nbglive.com创建的likebox无法调整大小，无论我使用何种方法，因此，如何将其与我们的网站集成而不会与广播播放器重叠，这会造成很大的麻烦。 / p>

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

Answer 1

我将FB小部件（likebox和comments）放入Bootstrap的网格中，如下所示：

<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是包含FB页面的Web URL的变量。

使用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。请注意更改浏览器窗口大小时的响应行为。

Answer 2

根据您的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在headder中给出的

Answer 3

这是一个简单的方法：

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

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

3 个答案: