Manually render dynamically generated Google 'plus one' button

ajax, google-plus, google-plus-one, html, javascript

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.

Problem

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

Original source