Google Plus One Button - How to add a callback?

Question

I have the google+ button being rendered on my site as follows:

In the JS:

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

In the html:

<g:plusone size="medium" href="https://site.com"></g:plusone>

How can I add a callback to this to detect when the user has clicked? I see the docs here: https://developers.google.com/+/plugins/+1button/#jsapi not seeing how to implement with the current render. Thanks

Answer 1

You can add a JavaScript callback using a callback attribute to your +1 button markup. Supply the name of a function that resides in the global namespace. It will be called when a user clicks on the +1 button.

Here's what your code might look like:

<script>

   function myCallback(jsonParam) {

      alert("URL: " + jsonParam.href + " state: " + jsonParam.state);

   }

</script>

<g:plusone size="medium" href="https://site.com" callback="myCallback"></g:plusone>

You can learn more about this attribute in the tag parameters section of the documentation.

Answer 2

In addition to Jenny's answer you can also use a HTML5-valid +1 tag by setting the class attribute to g-plusone, and prefixing any button attributes with data- such as callback

<div class="g-plusone" data-callback="myCallback" ></div>

From https://developers.google.com/+/web/+1button/