Facebook Like 按钮 - 防止 XFBML 版本调整高度答案

【问题标题】：Facebook Like button - prevent XFBML version from resizing heightFacebook Like 按钮 - 防止 XFBML 版本调整高度
【发布时间】：2011-03-17 19:53:28
【问题描述】：

我正在尝试使用 Facebook Like 按钮的 XFBML 版本。在零赞的页面上，主要问题是页面加载时的事件顺序：

HTML 加载
喜欢按钮加载
按钮扩展高度，将其下方的内容向下推
按钮发现没有赞
按钮降低高度，将下方的内容向上移动

无论Javascript SDK 是如何加载（标准或异步）以及是否启用/禁用“显示面孔”，都会发生这种情况。

有没有办法防止这种令人分心的自动调整大小发生？

这是一个 test page 显示该行为。

【问题讨论】：

我也一直在想这个问题。我没有满意的答案，除了可能“双重存储”喜欢和 Facebook 用户 ID （但这可能过于复杂）。

标签： javascript facebook height

【解决方案1】：

我多次为此感到沮丧。我终于在 jQuery 中做了一个 hack。它适用于 Chrome、FF 和 Safari。抱歉，我不在 IE 计算机附近.. 但这个概念应该保留。

HTML

<div style="display:block;float:left;width:450px;min-height:35px;">

    <div id="like" style="display:none;float:left;width:450px;height:35px;overflow:hidden;">

        <fb:like href="" show_faces="true" width="450" font=""></fb:like>

    </div>

</div>

jQuery

$('#like').delay(500).fadeIn(500,function(){ $(this).css({'height':"inherit",'overflow':"inherit"}); });

说明

首先创建一个最小高度为35px的div，然后创建一个id为like的子div，显示为none，35px的高度和隐藏的溢出。

使用 jQuery，引用 like div 并延迟淡入。淡入完成后，将 css 属性（高度和溢出）重置为 inherit。

从理论上讲，这允许点赞按钮在幕后进行操作，然后优雅地将其带入页面。

希望这会有所帮助，或者 Facebook 只是解决了这个问题。

【讨论】：

它不会，但它会像按钮一样（扩展和收缩）减少一半的过度弹出，因为它只扩展（用于面部）。这个问题还要求一个零喜欢的页面。这是一个黑客，我希望 Facebook 能修复它。 ;)

【解决方案2】：

您可以将点赞和 Facebook 用户 ID“双重存储”（使用 FB.Event.subscribe('edge.create', function(response) { ... });），然后检查您登录的 Facebook 用户是否有喜欢您页面的朋友。

不过，这可能过于复杂。

【讨论】：