Google Plus One 按钮回调 - 有什么方法可以“订阅”+1 操作？答案

【问题标题】：Google Plus One button callback - Any way to 'subscribe' to the +1 action?Google Plus One 按钮回调 - 有什么方法可以“订阅”+1 操作？
【发布时间】：2012-03-07 03:26:50
【问题描述】：

我正在寻找一种订阅加号按钮的方法。

根据此处的文档：https://developers.google.com/+/plugins/+1button/#plusonetag-parameters 我可以为标签添加一个回调属性，但在我的情况下，我不允许干涉。我正在网站上构建一个工具，一个嵌入式 JS 在文档就绪时触发。我想实时添加回调，如果声明了回调，它不能干扰原始回调。

我对 Facebook 或 Twitter 没有这个问题（例如喜欢和推特）。在这些情况下，有 FB 和 twttr 全局变量，一旦它们可用就这样注册：

FB.Event.subscribe("edge.create", function(e) {
  console.log(e);
})

或推特的twttr.events.bind ...

是我遗漏了什么，还是 Google 选择了一种非常尴尬的做事方式？他们对这种方法有什么兴趣以及可以围绕它做些什么？

【问题讨论】：

这里的用例是什么。网站所有者会故意使用您的脚本吗？如果/何时他已经为 +1 按钮使用了一些回调，也许他可以提供信息？

标签： javascript jquery google-plus-one

【解决方案1】：

您可以使用JavaScript API 检索 +1 回调。

gapi.plusone.render(
    myDomNode,
    { "callback": myCallbackFunction });

或者，如果您使用的是 DOM 版本，您也可以指定 "callback" 属性。

在任何一种情况下，都会使用具有两个属性的对象调用回调：href 返回 +1 的 URL，state 是 "off" 或 "on"。

【讨论】：

谢谢！但是话又说回来，如果存在一个回调，它会干扰原始回调。我需要在 addition 中添加我的。这就是为什么我给出了 fb 的“订阅”示例。

【解决方案2】：

您可以比 Daves 的回答更进一步，并且确实注入您自己的回调 - 但采取额外的步骤，预先检索现有的回调值并在您自己的处理程序中自己调度它（如果有现有的回调值）与您收到的回调相同的值。

这样你的处理程序和原始处理程序都会被调用，希望没有人会更聪明:)

【讨论】：

Moo，你将如何检索现有的回调？ <g:plusone callback:something> 按钮被移除，并在其位置插入 iframe。
我还没有研究过 Google 如何制作他们的 +1 按钮，但它肯定必须以某种与 iFrame 相关的方式传递回 Google 服务器，因此它可能在 URL 中某处。

【解决方案3】：

一个激进但通常可行的解决方案是将 G:PLUSONE 标签的回调属性替换为您自己的函数，该函数可以调用原始回调（如果已定义）并执行自己的操作。 Google 的 plusone.js 脚本将 G:PLUSONE 标记替换为 iframe，因此这必须在此脚本执行之前完成（可能使用 DOM-ready 挂钩）。这是一个简单的示例（您可以 see working on jsfiddle - 打开调试控制台并单击 +1 按钮）。

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var originalCallback = function(o) {
    console.log('original callback - ' + o.state);
};
// on DOM ready
$(function() {
    var plusoneTag = $('G\\:PLUSONE');
    var originalCallbackName = $(plusoneTag).attr('callback');
    // global function
    hijackerCallback = function(o) {
        console.log('hijacking callback - ' + o.state);
        window[originalCallbackName](o);  
    };
    plusoneTag.attr('callback', 'hijackerCallback');
});
</script>    
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

...假设在主机页面的某处您有 +1 标签，如下所示：

<g:plusone annotation="inline" callback="originalCallback"></g:plusone>

作为旁注，我尝试使用 DOMNodeRemoved 监听 G:PLUSONE 标记的删除，然后替换回调 - 但为时已晚，并且 plusone.js 脚本已经绑定到原始回调阶段。在现实世界中，您可能应该尝试在 plusone.js 之前注入您的脚本（我们可能在这里讨论的是 Chrome 或 Firefox 扩展）。

【讨论】：

谢谢。我需要对此进行测试，但如果我的脚本异步加载，它仍然无法正常工作。
谢谢，很好的回应！不过，我想知道是否可以异步完成此操作，它也是我应用程序的一部分。有什么想法吗？
我认为您不能可靠地异步实现这一点，当然不能以可靠的方式实现。在 plusone.js 脚本加载和执行之前，您必须至少同步执行一个步骤：或者我上面描述的，或者 - 或者 - 将 plusone.js 脚本标签的 parsetags 属性更改为“显式”（参见developers.google.com/+/plugins/+1button/#script-parameters） .这将防止 +1 标签被自动渲染，因此您可以在闲暇时链接回调并使用 gapi.plusone.render() 或 gapi.plusone.go() 异步渲染按钮。

【解决方案4】：

它可以很容易地异步完成：

<!-- add the callback to your html as data-attribute: -->
<div class="g-plusone" data-callback="plusOneClick" data-annotation="inline" data-width="300"></div>

在你的 JS 中你必须定义一个回调函数并执行异步加载

// define your callback function
function plusOneClick(response) {
  ...
}

// load your google+ stuff async
(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);
})();

【讨论】：

【解决方案5】：

要订阅 google plus 事件，您可以销毁按钮并重建它：

$('#gPlusContainer').html("<div id='gPlusBtn'></div>");
gapi.plusone.render("gPlusBtn", {
    "callback": plus_Puzzle,
    "size": "tall"
});

【讨论】：