Question

I need to generate div via jquery append method and then add google +1 badge with number of likes to this div. In every source I found, this div is already generated in html, but I need generate it dynamically via jquery.

I tried this code(liveReady is jquery plugin which combines document ready method with jquery.live method and .g-plusone is div, which is created via jquery append.). But function $.getScript ends with error(Uncaught TypeError: Cannot read property ‘redirect’ of undefined )

$('#lbExif').append('<div class="g-plusone"></div>');    
$.liveReady('.g-plusone',function addG(){
        $(".g-plusone").html("<g:plusone width=\"55\" height=\"20\" href=\"http://blog.2k1y.com\"></g:plusone>");
        $.getScript("https://apis.google.com/js/plusone.js");
    });

Any help will be greatly appreciated.

Answer 1

The following code will generate the button dynamically using javascript asynchronously without waiting for the page to finish loading:

<script type="text/javascript">
  (function() {
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;

    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
  })();
</script>

Just execute it whenever you want using the library of your choice (ie: jQuery)

If you would like to set script tag parameters, use the following syntax:

  window.___gcfg = {
    lang: 'zh-CN',
    parsetags: 'onload'
  };

A full example is included in the following URL:

https://developers.google.com/+/plugins/+1button/#example-async-load