Google +1, breaks every time I click it. Using Google's code. Why's it breaking

Question

I'm just starting to integrate some Social media "sharing" into a website, the first being the Google +1 button.

I've taken the code straight out of Google's webmasters dashboard, put it in following all the instructions, and it's breaking when ever I try to click the +1

I've got it 'live' at:

http://www.techonline.co.nz/modules/navigator/navto.php?unique_ID=16

The button itself is here:

<td style="width: 33%; text-align: center;">
    <div class="g-plusone" data-annotation="inline" data-width="130" data-href="#">Google +1</div>
</td>

And the Javascript form Google at the bottom of the '

<script type="text/javascript">// <![CDATA[
  (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);
  })();
// ]]></script>

The CDATA thing is an autotidy from TinyMCE. No idea what it does either, but It has not stopped any other Javascripts from working on my site. And the code in this instance still executes because the button's display.

Can anyone tell me why it's breaking, like have I got the wrong

Answer 1

The data-href setting might be the problem. See the documentation on setting the URL . Ideally, you would add the canonical metadata to your page, which in your case should be helpful because it appears that you are composing dynamic pages where the URLs could be slightly different, but still refer to the same resource.

Another tip, test your page using the Webmaster rich snippets tool .

Answer 2

You must have a validateable document, google reaches your page, finds it is invalid - and shuts down the plugin. Just a hunch - but do

Try validator.w3.org