Google Plus 无法在网站上运行

Question

我最初创建了一个 Google Plus One 按钮，复制了 javascript 代码并将其粘贴到我的网站中。按钮工作正常。几周后，该按钮没有出现。我在多个浏览器中尝试过，但只有空白出现在按钮应该在的位置。我尝试重新安装，无济于事。

由于我的网站使用 WordPress，因此我决定取出 HTML 和 JavaScript 代码并在主页上安装 ShareThis 并在其中添加加一按钮。它甚至没有出现在那里。您可以在http://www.wwwbuildawebsite.com/ 看到它。它应该在 Facebook Like 和 Pinterest 之间。但是，我看到它出现在我网站的另一个页面上，http://wwwbuildawebsite.com/tutorials/index.html。

在我的其余帖子中，出现了空白。您可以单击教程页面中的任何链接。分享栏出现在左侧； Google Plus One 按钮应该首先出现在 Twitter 之前。

Answer 1

问题似乎是您包含了 mootools-1.2.3，它覆盖了浏览器提供的 JSON 对象。 sharethis 库在尝试调用 JSON.parse 时失败，然后无法呈现 G+ 按钮。

你可以：

1) 升级到 mootools 2.0 或更高版本（请参阅https://mootools.lighthouseapp.com/projects/2706-mootools/tickets/741-google-friend-connect-js-api-with-mootools#ticket-741-4）

2) 在加载 mootools 后调用异步加载 plusone.js：

<script type='text/javascript' src='http://www.wwwbuildawebsite.com/wp-content/plugins/superslider/js/mootools-1.2.3-core-yc.js?ver=1.2.3'></script>

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

这将在 JSON.parse 函数被覆盖后恢复它。

3) 手动给函数起别名：

JSON.parse = JSON.decode;
JSON.stringify = JSON.encode;

Answer 2

您的页面从onLoad 事件处理程序的主体调用未定义函数appendCodeColorer。这会阻止onLoad 事件处理程序成功完成。

包含您的 Google 加一按钮的 iframe 最初使用 CSS 样式呈现：

position: absolute;
top: -10000px;

然后该按钮在onLoad 期间可见。如果onLoad 没有完成，它将保持不可见。