CODEWITHSUNDEEP
javascriptjquerygoogle-plus-one
ido
ido

Reputation: 811

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?

Upvotes: 17

Views: 6689

Answers (5)

Renkuei
Renkuei

Reputation: 286

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

Upvotes: 0

hereandnow78
hereandnow78

Reputation: 14434

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

Upvotes: 1

YKS
YKS

Reputation: 355

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

Upvotes: 3

user32826
user32826

Reputation:

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

Upvotes: 4

djd
djd

Reputation: 5178

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

Upvotes: 14

Related Questions