Facebook喜欢按钮在喜欢和不喜欢时表现不同

Question

我的页面上有一个Facebook“赞”按钮：

<div class="fb-like" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"/>

我还有'fb-root' div和SDK javascript（按钮功能正常）。

出于某种原因，当打开相似按钮时（当访问者连接到他的Facebook帐户并且之前已经喜欢我的页面时发生）按钮将神奇地减小其宽度（在某些最后一秒javascript中）并使其他按钮（twitter / g +）隐藏它。它对齐一段时间然后“折叠”。

我尝试禁用我的css和我网站的许多其他组件，但无济于事。 我附上了一张说明情况的图片。

编辑：我刚发现的东西。 width属性是似乎被覆盖的属性。当设置width = 2000（高度偏高）时，如果启用了“赞”按钮（用户未连接/不喜欢），则该按钮确实是2000px宽，但是当连接了以前喜欢的用户时，可以在那里看到2000px的宽度，然后它再次'崩溃'。

编辑2：我似乎找到了罪魁祸首，但我不知道为什么以及如何解决它。似乎在facebook按钮上切换生成的代码将宽度设置为72而不是100。

启用按钮的生成代码：

<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial">
<span style="height: 20px; width: 100px;">

生成喜欢（已拨打）按钮的代码：

<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://mysite.com" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial">
<span style="height: 21px; width: 72px;">

非常感谢任何帮助。 谢谢！

Answer 1

好吧，我最后把它添加到我的CSS：

div.fb-like > span {
min-width:100px;
}

可能不是最好的方式，但它现在正在运作。

Answer 2

您可以尝试使用

<div style="width: 100px;"></div>

包装你的代码。通常，插件会自动适应页面加载时其父元素的宽度。

如果父元素的宽度小于数据宽度，则可能导致Facebook按钮缩小。这可能是您的按钮大小更改的原因。