Facebook“赞”按钮（HTML5）无法正常工作

Question

因此...在我正在处理的网站上，有一个Facebook“Like”按钮，点击后应该变成灰色，并且不喜欢你点击灰色“Like”按钮中的“X”。

事情是......它无法正常工作。在IE9中，只要您点击“赞”，“喜欢”按钮就会变成一个小文本框，经过仔细检查后，它实际上是一个Facebook评论窗口，它试图适应插槽！在Firefox和Safari中（每个都在Windows 7上），如果单击“Like”按钮，该按钮会变为灰色，但有时（看似随机），如果您尝试单击“X”来“不像”，则会变成在我的FB个人资料照片的顶部，并且似乎试图将Facebook窗口塞进该插槽。

我不想要Facebook评论窗口或任何 - 我只想让FB“赞”按钮切换。

按照该FB的开发人员信息，我的JavaScript之前有这样的：

<div id="fb-root"></div> 

从那之后，我有：

(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 

周围的按钮的代码，再次按该FB开发者页面，是：

<div class="fb-like" data-href="http://www.facebook.com/(page to be liked)" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div> 

该网站还没有在线，所以我不能提供一个链接，所以你不能呃，我现在也不可能把它放在网上。

此外，原始代码具有上述Javascript，但在js.src任务结束时是一个appid。删除，没有区别。

还有一个链接到Twitter使用类似的变量，但我试图一起去除所有无济于事;也许这是干扰。

我还应该寻找什么？我不能在Chrome或Opera中重现问题，事实上，在Opera中，渲染速度很慢，看起来像这样：1）点击“Like”。 2）看起来像一个文本框，但实际上是一个压缩的FB注释框的东西出现。 3）显示灰色的“赞”按钮。如果您单击断开连接，则相反的情况会发生。我开始认为这可能是Facebook的一端，而不是我的一个bug）。

Answer 1

嗯，我发现如何解决这个问题至少在互联网爆炸者结束！

问题实际上是Facebook如何渲染Like按钮。从我可以告诉，这是发生了什么： 1）用户点击“喜欢”。 2）用户可能需要登录Facebook并“确认”Like。 3）Facebook将用户登录并将用户标记为“喜欢” - 即页面。 4）Facebook天桥出现。 5）“Like”按钮变成灰色。

这就是问题的第四步，部分原因是因为我们嵌入了“Like”按钮的div标签。我们专门设置了CSS的溢出为“隐藏”，这意味着任何不适合“Like”按钮空间的东西都会被阻挡。所以从理论上讲，天桥不应该是可见的，因为它超出了“喜欢”按钮的范围。然而，似乎有些浏览器基本上呈现所有内容（包括天桥），那么推送内容div标签的尽头（换句话说，在评论框的右下角），并作为结果，“Like”按钮被完全推出，并且THAT被视为溢出并因此被隐藏。

现在，我发现的是，它似乎步骤4和5往往是一个竞赛，看看哪一步能得到第一完成！如果第4步发生，那么呈现的最后一个东西是灰色的“赞”按钮 - 这正是我想要的。但是，如果第5步中首先发生，呈现的最后一件事是在评论框，在这里我需要有变灰的“Like”按钮其中一部分是现在可见。我想如果我真的强迫整个Facebook框（通过div标签）消失，然后让它回来，渲染会重置，我会得到我想要的。它能够工作 - 只要我至少延迟1毫秒，否则第5步将在完成第4步之前完成。这似乎解决了IE中存在的问题。唯一的一点是，对于第二个非常，非常小的一部分，一个实际上可以看到Facebook的按钮消失，Twitter的按钮，我们要其左飞奔到右侧，然后回左边时，FB按钮来背部。

此外，此修复程序不会真的做很多工作来解决Firefox中的上述问题：在Firefox中，用户仍然可以通过点击按钮处于中呈现的中间。 （需要一秒钟。）如果用户在按钮完成渲染之前尝试取消“喜欢”，用户将获得该评论框的该部分。这看起来完全在Facebook的结尾，不幸的是意味着它超出了我的控制范围。我所能做的就是希望普通用户不会对鼠标按钮感到满意！

这是不是100％的解决方案，但它是在我原来所在之处一个巨大的进步！