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

Question

无论我使用什么方法，我为 nbglive.com 创建的likebox 都无法调整大小，因此，我如何将它与我们的网站集成而不让它与广播播放器重叠，这给我带来了很大的麻烦。

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

Answer 1

我将 FB 小部件（likebox 和评论）放入 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 页面的网址的变量。

使用 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 使用根据widthdata 属性设置的样式异步加载其组件。我将它设置为某个安全值：看起来很糟糕，但不会溢出到不同视口的其他元素。我的 CSS 覆盖了调整小部件大小所需的所有 FB 宽度设置（我设置了100%，因此它调整为包含的 div）。它没有记录，当FB改变他们的设计时它可能会停止工作，所以234px明智地选择你的默认宽度（对我来说）；）

右侧面板底部和边栏中的 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-->

按照 fb 在 header 中给出的方式剪切和复制 java-script

Answer 3

这是一个简单的方法：

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