Facebook Like 按钮 (<fb:like>) 高度始终为 80 像素答案

【问题标题】：Facebook Like Button (<fb:like>) Height Always 80pxFacebook Like 按钮 (<fb:like>) 高度始终为 80 像素
【发布时间】：2010-05-05 22:26:04
【问题描述】：

为什么我的 Facebook Like 按钮（技术上是生成的 iframe）的高度总是设置为 80 像素？示例页面在这里：http://www.davidkasper.net/test.html 我正在使用 javascript sdk，并且已经让它在其他页面上工作，但由于某种原因，高度不会在这个页面上动态变化！我什至可以做类似的事情 <fb:like style="height:40px"> 这确实会设置可见高度，但 iframe 仍然是 80px，而我可以在 http://developers.facebook.com/docs/reference/plugins/like 的演示中看到它的变化@

【问题讨论】：

标签： facebook button facebook-like

【解决方案1】：

正在生成的 iframe 允许显示 facebook 个人资料图片的空间。添加 show-faces="false" 属性，它会折叠高度。

<fb:like show-faces="false"></fb:like>

【讨论】：

【解决方案2】：

我用 css 解决了这个问题

#fb-bar iframe{min-height:80px !important;}

#fb-bar 是的包装器。在 html 中

<div id="fb-bar">
  <fb:like href="link"></fb:like>
</div>

【讨论】：

【解决方案3】：

我终于找到了答案！！

问题是为我在 FB.init javascript 中指定的应用设置了错误的基域。

  window.fbAsyncInit = function() {
    FB.init({appId: '**131226520233112**', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());

查看http://davidkasper.net/test.html 与http://davidkasper.net/test2.html 之间的区别

顺便说一句，如果没有来自 Facebook http://developers.facebook.com/tools/lint/ 的 URL Linter，我永远不会发现这一点清除它检测到的所有错误解决了问题！

【讨论】：

【解决方案4】：

大卫，

我也遇到了同样的问题。我只是将 fb:like 标签放在 ID 为“facebook-like”的 DIV 中。然后我设置了一个 CSS 规则来限制存在于“facebook-like”DIV 中的任何 iframe 的高度和/或宽度。为我工作！

【讨论】：

【解决方案5】：

从它说的参考文献中

最重要的社交插件是 Like 按钮，它使用户能够将您网站上的页面发布回一键点击他们的 Facebook 个人资料。您可以在任何页面上添加一个赞按钮带有 iframe 标记：

<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>

有多种选择喜欢按钮，包括选项包括姓名和个人资料图片的用户的朋友也有喜欢这个页面。这是一个赞按钮对于 Facebook 开发者网站...

对我来说，这表明您应该只使用 iframe 并在样式标签中设置宽度/高度属性...

<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
        scrolling="no" frameborder="0"
        style="border:none; width:300px; height:25px"></iframe>

【讨论】：

问题是我需要使用XFBML版本，因为它需要根据是否有人脸来动态调整大小。

【解决方案6】：

转到http://developers.facebook.com/docs/reference/plugins/like

取消选中“显示面孔”复选框。这会将高度降低到 35 像素。

【讨论】：