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

Question

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

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

无论 Javascript SDK 如何发生，都会发生这种情况加载(标准或异步)，如果启用/禁用“显示面孔”。

有没有办法防止这种分散注意力的自动调整大小发生？

这是一个 test page显示行为。

Answer 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 的高度和 hidden 的溢出。

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

从理论上讲，这允许点赞按钮在幕后有点怪异，然后优雅地将其放入页面。

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