CODEWITHSUNDEEP
javascriptgoogle-plusgoogle-plus-one
Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5291

How to load google plus share button in iframe?

Can anyone give me a solution on How can I load the Google plus share button (not the +1 button) in an iframe asynchronously. I have managed to do that for the +1 button.

Upvotes: 3

Views: 8884

Answers (2)

350D
350D

Reputation: 11439

Try this html snippet:

<iframe src="https://plusone.google.com/_/+1/fastbutton?bsv&amp;size=medium&amp;hl=en-US&amp;url=http://test.com/&amp;parent=http://test.com/" allowtransparency="true" frameborder="0" scrolling="no" title="+1"></iframe>

Upvotes: 12

class
class

Reputation: 8681

If what you're trying to do is explicitly render the button when a user hovers over something, what you need to do is use the explicit render flow as described here:

https://developers.google.com/+/plugins/+1button/

However, there's a twist, because you're using a share button, you can't use the explicit render code to render directly to the div. Instead, you will create your share link, set the render to explicit, and then can use JavaScript to trigger the rendering of the share button.

The relevant code is:

<html>
  <head>
    <title>+Share: Explicit render</title>
    <link rel="canonical" href="http://www.example.com" />
    <script type="text/javascript">
    window.___gcfg = {
      lang: 'en-US',
      parsetags: 'explicit'
    };
    function renderShare() {
      gapi.plus.go(); // Render all the buttons
    }
    </script>
  </head>
  <body>
    <a href="#" onClick="renderShare();">Render the share control</a>
    <!-- a share button that will get rendered when gapi.plus.go is called -->
    <div class="g-plus" data-action="share" id="share-div"></div>
  </body>
  <script type="text/javascript">
    // Asynchronously load the plusone script, for performance
    (function() {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    })();
  </script>
</html>

For you, I am guessing that you're trying to use a different trigger for rendering your +1 button than a button the user explicitly has to click, you could just use the appropriate event for what you want to trigger the render.

Upvotes: 2

Related Questions