plusone.js sometimes is "pending" on chrome? - google-plus

Question

Using Chrome (22.0....), sometimes, when I try to take :
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
it fails. I mean, if I check the Network console, it says "Pending...", and my .load() events are stuck.
Why? And how can I fix it?
Also tried with :
<script type="text/javascript">
(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>
but it is the same...

Answer 1

I don't see the HTML container for the +1 button defined anywhere in the source of the page that you linked. I see the first script that you referenced on the page, but your page appears to be missing:
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
The second snippet of script is intended for asynchronous loading (preferred) that you reference also would require you to insert the same type HTML container.
You can generate the code to include in your page using the +1 button configuration tool.
[UPDATE]
The g-plusone element apparently is being injected dynamically by jQuery, which has a different onload timing than the +1 button's own onload handler, which explains why sometimes it might display. In this case, you need to use the parseTags: explicit option:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{parsetags: 'explicit'}
</script>
And then after your own JavaScript injects the g-plusone div, you must call:
gapi.plusone.go();
Which will explicitly render all +1 buttons on the page when initiated.