Google Plus One button callback - Any way to 'subscribe' to the +1 action?

Asked 7/3, 2012 at 3:26 Answered 5/7, 2014 at 10:54

I'm looking for a way to subscribe to the plus one button.

According to the documentation here: https://developers.google.com/+/plugins/+1button/#plusonetag-parameters I could add a callback attribute to the tag, but in my case I'm not allowed to interfere. I'm building a tool ontop of the site, an embedded JS triggered on document ready. I want to add the callback live, and it mustn't interfere the original callback if one was declared.

I don't have this problem with Facebook or Twitter (like and tweet, for instance). In these cases there's the FB and twttr global variables, registered like so once they are available:

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

or twitter's twttr.events.bind ...

Am I missing anything or is Google choosing a very awkward way to do things? What's their interest in this method and what can be done around it?

Djerba answered 7/3, 2012 at 3:26 Comment(1)

What's the use case here. Site owner will use your script deliberately? Maybe he can provide information if/when he is already using some callback for +1 button? – Colubrine 15/3, 2012 at 10:58

You can use the JavaScript API to retrieve the +1 callback.

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

Or you alternatively can specify the "callback" attribute if you're using the DOM version.

In either case, the callback will be invoked with an object which has two properties: href returns the URL which was +1'd, and state is either "off" or "on".

Southeaster answered 7/3, 2012 at 3:33 Comment(1)

Thanks! But then again, it would interfere with the original callback in case one exists. I need to add mine in addition. That's why I gave fb's 'subscribe' example. – Djerba 7/3, 2012 at 3:39

You could go one further than Daves answer, and indeed inject your own callback - but take the extra step of retrieving the existing callback value beforehand and dispatching it yourself within your own handler (if there is an existing callback value) with the same values as your callback received.

That way both your handler and the original handler will be called, and hopefully no one would be any the wiser :)

Avowal answered 9/3, 2012 at 12:43 Comment(2)

Moo, how would you go about retrieving the existing callback? the <g:plusone callback:something> button is removed and an iframe is inserted at its place. – Elohim 9/3, 2012 at 16:27

I've not looked at how Google do their +1 button, but it definitely has to be passed back to the Google server somehow in a way related to that iFrame, so it might be in the URL somewhere. – Avowal 9/3, 2012 at 22:14

An aggressive but usually workable solution would be to replace the callback attribute of the G:PLUSONE tag with your own function, which can call the original callback (if one was defined) and do its own stuff, too. Google's plusone.js script replaces the G:PLUSONE tag with an iframe, so this has to be done before this script executes (probably with a DOM-ready hook). Here's a naive example (which you can see working on jsfiddle - open up a debug console and click the +1 button).

<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>

...persume that somewhere in the host page you have the +1 tag, like so:

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

As a side note, I've tried to listen for the removal of the G:PLUSONE tag using DOMNodeRemoved and replace the callback then - but that's too late and the plusone.js script is already bound to the original callback at this stage. In the real world, you should probably try injecting your script just before plusone.js (we're probably talking about a Chrome or Firefox extension here).

Unwonted answered 11/3, 2012 at 8:23 Comment(3)

Thanks. I need to test this, but it still won't work if my script loads asynchronously. – Elohim 11/3, 2012 at 10:2

Thanks, great response! Still, I'd like to know whether it's possible to accomplish this asynchronously, it's a part of my application as well. Any ideas? – Djerba 11/3, 2012 at 19:43

I don't think you can reliably achieve this asynchronously, certainly not in a reliable fashion. You must take at least one step synchronously, before the plusone.js script loads and executes: either what I describe above, or - alternatively - change the parsetags attribute of the plusone.js script tag to "explicit" (see developers.google.com/+/plugins/+1button/#script-parameters). This will prevent the +1 tags from being automatically rendered, so you can chain callbacks and render the buttons with gapi.plusone.render() or gapi.plusone.go() at your leisure, asynchronously. – Unwonted 12/3, 2012 at 7:21

it can easily be done asynchronously:

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

in your JS you have to define a a callback function and execute the async loading

// 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);
})();

Markova answered 17/7, 2012 at 10:13 Comment(0)

To subscribe to a google plus event, you can destroy the button and rebuild it:

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

Speculative answered 5/7, 2014 at 10:54 Comment(0)

Recommended topics

Hot tags