Question

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

HTML加载
喜欢按钮加载
按钮展开高度，将其下方的内容推下来
按钮看到它没有喜欢
按钮可降低高度，将内容移动到低于预备状态

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

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

这是显示行为的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为的子div，如，显示 none ， 35px 的高度和隐藏的溢出。

使用jQuery，引用之类的 div并延迟淡入。完成淡入后，将css属性（高度和溢出）重置为继承。 / p>

从理论上讲，它允许类似按钮在幕后制作它的小怪物然后优雅地将其打印到页面中。

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

Answer 2

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

但这可能过于复杂。

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

2 个答案: