Question

I have a few widgets on the site I’m developing and I load them all asynchronously from a javascript file so it does not hold up the DOM from finishing.

For instance, I do this with the Digg and Buzz widgets and it works fine:

// Buzz Share
function buzzShare() {
    $jQ('.sharebox').append('<div class="widget"><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a></div>');
    $jQ.getScript('http://www.google.com/buzz/api/button.js');
}
// Digg Share
function diggShare() {
    $jQ('.sharebox').append('<div class="widget"><a class="DiggThisButton DiggMedium"></a></div>');
    $jQ.getScript('http://widgets.digg.com/buttons.js');
}

When it comes to the new Google +1 widget, the same logic does not work:

// PlusOne Share
function plusOneShare() {
    $jQ.getScript('http://apis.google.com/js/plusone.js');
    $jQ('.sharebox').append('<div class="widget"><div class="g-plusone" data-size="tall" data-count="true"></div></div>');
}

I tried using both the HTML5 tag and <g:plusone></g:plusone>. Neither work.

Here is the documentation for the just-launched service: http://code.google.com/apis/+1button/

I also noticed you can do the following if embedding the script directly into the HTML.

 <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>

Is there a way to use the {"parsetags": "explicit"} parameters with jQuery .getScript?

P.S. I also tried switching around the first and second lines within the plusOneShare function, that didn’t work either.

Thanks!

Answer 1

The method I described in my question works perfectly. There was merely some sort of bug on Google’s end if I am correct. I was trying to get the feature working just a few hours after they announced it. About two days later, it now works perfectly.

The .getScript method is a good way to load the +1 via AJAX.