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?
Source: Tips4all, CCNA FINAL EXAM
You can use the JavaScript API to retrieve the +1 callback.
ReplyDeletegapi.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".
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.
ReplyDeleteThat way both your handler and the original handler will be called, and hopefully no one would be any the wiser :)
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).
ReplyDelete<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).