Menu
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!
379
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>
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);
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'); });
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
