Issue Loading Google +1 Widget Asynchronously

K

7

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!

Kinghood answered 1/6, 2011 at 21:16 Comment(0)

K

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.

Kinghood answered 4/6, 2011 at 16:28 Comment(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. – Winola 7/6, 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. – Kinghood 11/6, 2011 at 5:50

I figured out. See my answer below. – Winola 14/6, 2011 at 20:51

T

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>

Trebuchet answered 2/6, 2011 at 17:26 Comment(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. – Kinghood 4/6, 2011 at 16:26

W

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

Winola answered 14/6, 2011 at 20:50 Comment(0)

R

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

Rundgren answered 7/8, 2011 at 9:16 Comment(0)

M

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>

Mord answered 1/12, 2011 at 4:18 Comment(0)

M

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

Mallissa answered 3/6, 2011 at 1:30 Comment(0)

K

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.

Kinghood answered 4/6, 2011 at 16:28 Comment(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. – Winola 7/6, 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. – Kinghood 11/6, 2011 at 5:50

I figured out. See my answer below. – Winola 14/6, 2011 at 20:51

R

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

Roentgenograph answered 27/8, 2011 at 13:46 Comment(0)

Recommended topics

Hot tags