click to load Google plus javascript to show comments

Question

Hi i want to load comments from google plus. what people are posted on google plus from my website. i actually just installed this code in WordPress blog post. if a user wants to reply to post by clicking on Google+ button to load code from Google plus and load comments.

<button onClick="showGoogle();">Google+</button>

<div style="max-width:100%" id="loading">
<div id="gpcomments" style="max-width:100%"></div>
</div>

<script>
gapi.comments.render('gpcomments', {
    href:'http://findsgood.com/?p=43224',
    width: '682',
    first_party_property:'BLOGGER',
    view_type: 'FILTERED_POSTMOD','callback' : function showGoogle() {src='https://apis.google.com/js/plusone.js';}});
</script>

Answer 1

plusone.js is being loaded asynchronously but gapi is being called synchronously. gapi isn't available until plusone.js is finished loading. You can use an onload event to wait until gapi is ready for use.

<button onClick="showGoogle();">Google+</button>

<div style="max-width:100%" id="loading"><div id="gpcomments" style="max-width:100%"></div></div>

<script>
function showGoogle() {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://apis.google.com/js/plusone.js';
    script.onload = function() {
        gapi.comments.render('gpcomments', {
            href:'http://findsgood.com/?p=43224',
            width: '682',
            first_party_property:'BLOGGER',
            view_type: 'FILTERED_POSTMOD'
        });
    }
    head.appendChild(script);
}
</script>