CODEWITHSUNDEEP
javascriptwordpresshtmlgoogle-plusblogger
Srinivas Reddy
Srinivas Reddy

Reputation: 33

click to load Google plus javascript to show comments

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>

Upvotes: 2

Views: 202

Answers (3)

abraham
abraham

Reputation: 47833

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>

Upvotes: 1

Lukasz Formela
Lukasz Formela

Reputation: 447

First click generates an error in the console, for the sake of testing try to include plusone.js in theme header manually. (this feels more like a comment, just can't add them yet).

Upvotes: 0

Srinivas Reddy
Srinivas Reddy

Reputation: 33

finally found code working but i have to click button twice. i don't know why i need to click two times?. please someone help? 

<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';
      head.appendChild(script);
gapi.comments.render('gpcomments', {
    href:'http://findsgood.com/?p=43224',
    width: '682',
    first_party_property:'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});}
</script>

you can run test here a on blog post http://findsgood.com/?p=43224

Upvotes: 1

Related Questions