Geek Answers Handbook

Error loading Google +1 widget asynchronously

I have several widgets on the site that I am developing, and I load them asynchronously from the javascript file so that it does not delay the DOM from completing.

For example, I do this using Digg and Buzz widgets, and it works great:

// 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 doesn't 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 the HTML5 and tag <g:plusone></g:plusone>. None of them work.

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

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

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

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

P.S. plusOneShare, .

!

+5
7

, , . , - Google. , . .

.getScript - +1 AJAX.

+1

? :

<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>
+2

- , +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

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

explicid

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

. , php .

<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>
+2

getScript ( ), . plusone.js iphone/ipad/android ..

, 'parsetags: "" getScript..

+1

Now I have also worked a bit on this - and I LOVE $ .getScript - (not in the creepy sense, but only because it speeds up the initial display of all my pages). If you have ever built a site containing links to Twitter, Facebook, Plusone, OpenX, etc., you know what I'm talking about :)

In any case, I recently realized that "plusone.js" can be downloaded async (using jQuery $ .getScript) and at the same time be instructed to use a specific 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 :)

+1
source

More articles:


All Articles