Question

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

事情是......它无法正常工作。在IE9中，只要点击“喜欢”，“喜欢”按钮就会变成一个小文本框，经过仔细检查，实际上是一个试图融入插槽的Facebook评论窗口！在Firefox和Safari中（每个在Windows 7上），如果单击“喜欢”，按钮会变为灰色，但有时（看似随机），如果您通过单击“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）点击“喜欢”。 2）看起来像文本框但实际上是压缩的FB注释框的东西出现。 3）出现灰显的“喜欢”按钮。如果单击以断开连接，则会发生相反的情况。我开始认为这可能是Facebook的一个错误，而不是我的错误。）

Answer 1

好吧，我发现如何在Internet Exploder端解决这个问题，至少！

问题实际上是Facebook如何呈现Like按钮。据我所知，这是发生的事情： 1）用户点击“喜欢”。 2）用户可能必须登录Facebook并“确认”喜欢。 3）Facebook将用户登录并将用户标记为“喜欢” - 页面。 4）Facebook天桥出现。 5）“喜欢”按钮变为灰色。

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

现在，我发现，似乎第4步和第5步似乎是在争夺哪个步骤可以先完成！如果第一步发生，那么渲染的最后一件事是灰色的“喜欢”按钮 - 这就是我想要的。但是如果第一步发生第一步，那么呈现的最后一件事就是注释框，其中一部分现在可见，我需要使用灰色的“赞”按钮。我想如果我真的强迫整个Facebook框（通过div标签）消失，然后让它回来，渲染将重置，我会得到我想要的。并且它可以工作 - 只要我延迟至少1毫秒，否则步骤5将在步骤4完成之前完成。这似乎解决了IE存在的问题。唯一的问题是，对于非常非常小的一秒钟，人们实际上可以看到Facebook按钮消失，我们左侧的Twitter按钮向右滑动，然后当FB按钮到来时返回左侧回来。

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

这不是一个100％的解决方案，但它比我以前的地方有了很大的改进！

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

1 个答案: