1

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

事情是......它不能正常工作。在 IE9 中，只要您单击“Like”，“Like”按钮就会变成一个小文本框，仔细检查后，它实际上是一个 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）单击“Like”。2）那个看起来像文本框但实际上是压缩的FB评论框的东西出现了。3) 出现灰色的“喜欢”按钮。如果您单击断开连接，同样的事情会反过来发生。我开始认为这可能是 Facebook 的错误，而不是我的错误。）

4

1 回答 1

2

好吧，我至少在 Internet Exploder 端找到了解决这个问题的方法！

问题实际上是 Facebook 如何呈现 Like 按钮。据我所知，情况如下： 1) 用户点击“喜欢”。2) 用户可能需要登录 Facebook 并“确认”点赞。3) Facebook 登录用户并将用户标记为“喜欢”页面。4) Facebook 天桥出现。5）“喜欢”按钮变为灰色。

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

现在，我发现似乎第 4 步和第 5 步似乎在竞争，看哪一步可以先完成！如果第 4 步首先发生，那么最后呈现的是灰色的“Like”按钮——这就是我想要的。但如果第 5 步首先发生，最后呈现的是评论框，其中一部分现在可见，我需要灰色的“喜欢”按钮。我想如果我真的强制整个 Facebook 框（通过 div 标签）消失，然后让它回来，渲染会重置，我会得到我想要的。它确实有效 - 只要我延迟至少 1 毫秒，否则第 5 步将在第 4 步完成之前完成。这似乎解决了 IE 存在的问题。唯一的事情是，在非常非常微小的一秒钟内，

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

这不是一个 100% 的解决方案，但它比我以前的位置有了巨大的改进！

于 2013-05-13T20:03:57.483 回答