5

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!

7 Answers 7

2

What browser are you using? The following full page example works for me:

<html>
  <head>
    <title>jQuery Dynamic load test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $.getScript('https://apis.google.com/js/plusone.js');
        $('.sharebox').append('<div class="widget"><div class="g-plusone" data-size="tall" data-count="true"></div></div>');
      });
    </script>
  </head>
  <body>
    Hello world!
    <div class="sharebox"></div>
  </body>
</html>
1
  • Good news. My code started working perfectly about a day or two later. I didn't change a think, in fact I gave up trying and just left if as is after this thread. I think Google was still pushing out changes for +1 during that time. After all, the whole service is just a few days old. Jun 4, 2011 at 16:26
2

I ended up doing something like this to support parameter passing to the +1 script:

var hd = document.getElementsByTagName('head')[0];
var scr = document.createElement('script');
scr.type ='text/javascript';
scr.async = true;
scr.innerHTML = "{lang: 'es-419'}"; // Magic! :)
scr.src = "https://apis.google.com/js/plusone.js";
hd.appendChild(scr);
2

As showed on http://code.google.com/intl/pt-BR/apis/+1button/#plusonetag-parameters

you can do an explicid load using

$(document).ready(function() { gapi.plusone.go('content'); });
2

Another solution for async loading. Works perfectly for me, especially if you're using php and want to dynamically assign the language.

<script type="text/javascript">
    window.___gcfg = {
<? if ($lang!= 'en'){    ?>
     lang: '<?=$lang?>', 
<? } ?>
     parsetags: 'explicit',
     annotation: 'inline',
     size: 'medium'
    };
    $(document).ready(function() { 
        $.getScript('https://apis.google.com/js/plusone.js',function(){
            gapi.plusone.render("plusone-div");
        });
    });
</script>
1

If you use getScript (or any asynchronous loading method), you end up with a blank page on unsupported browsers. plusone.js replaces your whole page on iphone/ipad/android etc..

I'm also looking for a solution to be able to use 'parsetags: "explicit"' with getScript..

0
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.

3
  • Any word on how to pass parameters to it? I'm trying to pass {"lang":"es-419"} but I couldn't find how yet.
    – Danita
    Jun 7, 2011 at 16:37
  • No clue. I just got lucky since the default settings were the ones I wanted. I will let you know if I find a solution for that. Jun 11, 2011 at 5:50
  • 1
    I figured out. See my answer below.
    – Danita
    Jun 14, 2011 at 20:51
1

Now, I also did some research on this - and I LOVE $.getScript - (not in a creepy way, but only because it speeds up the initial display of my all pages). If you've ever built a website that contains references to Twitter, Facebook, Plusone, OpenX, etc, you know what I'm talking about :)

Anyway, what I recently figured out is that "plusone.js" can be loaded async (using jQuery $.getScript) and at the same time be instructed to use a certain language:

<script type="text/javascript">
  window.___gcfg = { lang: 'sv-SE' };
  $(document).ready(function() { 
     $.getScript("https://apis.google.com/js/plusone.js");
  });
</script>

<body>
   <g:plusone size="medium"></g:plusone>
</body>

Hope this helps anyone :)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.