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

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?

Answers:

Answer

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

Answer

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

Answer

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

Answer

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

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"
});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.