Search code examples
javascripthtmlajaxgoogle-plusgoogle-plus-one

Manually render dynamically generated Google 'plus one' button

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

Solution

  • 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.