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

我试图使用Facebook Like按钮的XFBML版本。在零个喜欢的网页，主要的问题是事件的顺序加载页面时：Facebook Like按钮 - 防止XFBML版本调整高度

HTML负载
按钮载入像
按钮展开高度，推它下面的内容下来
按钮看它有没有喜欢
按钮降低高度，移动内容如下备份

出现这种情况，无论怎么Javascript SDK已加载（标准或异步），并且“显示面孔”已启用/禁用。

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

这是test page显示的行为。

来源

2011-03-17 Ryan

我一直在想这一段时间。我没有一个满意的答案，除了可以“双重存储”喜欢和Facebook用户标识符（但这可能过于复杂）。 – 2011-04-05 16:49:33

我已经沮丧了很多次。我终于在jQuery中做了一个破解。它适用于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，然后创建子div与像，显示无，高度35px和溢出的隐藏。

使用jQuery，引用等 DIV和延迟在衰落。当的完成淡入，的CSS属性（高度和溢出）复位到继承。

从理论上讲，这可以让类似的按钮在背后变得不那么怪异，然后优雅地将它带入页面。

希望这会有所帮助，或者Facebook只是修复此问题。

来源

2011-03-31 14:54:48

虽然，如果按钮显示面孔，我不确定这是否有效。 – 2011-04-05 16:47:43

它不会，但它会切掉像弹出式按钮一样的一半（展开和缩回），因为它只展开（用于脸部）。此外问题要求为零喜欢的网页。这是一个黑客，我希望Facebook能够解决它。 ;） – 2011-04-05 17:19:02

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

虽然这可能过于复杂。

来源

2011-04-05 16:51:33

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

回答

相关问题