Login/Register
Manually render dynamically generated Google 'plus one' button
Asked Answered
Solved javascripthtmlajaxgoogle-plusgoogle-plus-one
K

1

9

Here's the scene:

  • The webpage doesn't have a google+ button.
  • User clicks a button.
  • AJAX request is sent which loads some text and the google+ button (<g:plusone href="http://www.website.com"></g:plusone>) into a div.
  • I can see when I look at the code that it is there, but it is not rendering.

I've heard that this might be useful: gapi.plusone.go();

But I'm not sure.

Any ideas?

Thanks

Kendalkendall answered 10/5, 2012 at 9:34 Comment(1)
Since you already have the g+ div in place - all you have to do is invoke the render by calling gapi.plusone.go(). It is better to pass it the id the of the container div. – Penalty
M
10

You're on the right track. gapi.plusone.go() is one way to explicitly render the +1 button. Here's a code snippet from the official docs that illustrates another method using gapi.plusone.render().

<html>
  <head>
    <title>+1 Demo: Explicit render</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
    <script type="text/javascript">
      function renderPlusone() {
        gapi.plusone.render("plusone-div");
      }
    </script>
  </head>
  <body>
    <a href="#" onClick="renderPlusone();">Render the +1 button</a>
    <div id="plusone-div"></div>
  </body>
</html>

The JavaScript API is further documented elsewhere on the previously linked page.

Maddiemadding answered 10/5, 2012 at 14:51 Comment(1)
Thanks! Another problem that i was having (silly me) was that I was calling the render/go as soon as the page loaded... I have added a little timeout to wait for the ajax request to finish - and it works now. Thanks for your help! – Kendalkendall

© 2022 - 2024 — McMap. All rights reserved.