如何在 iframe 中加载 google plus 分享按钮？答案

【问题标题】：How to load google plus share button in iframe?如何在 iframe 中加载 google plus 分享按钮？
【发布时间】：2012-05-21 07:20:44
【问题描述】：

谁能给我一个关于如何在 iframe 中异步加载 Google plus 分享按钮（而不是 +1 按钮）的解决方案。我已经设法为 +1 按钮做到了。

【问题讨论】：

为什么只有分享按钮只是连接到网络并通过提供 src plus.google.com 在 iframe 中加载整个 google+ ;-)
@Webtecher，我想使用我博客 www.webspeaks.in 中的分享按钮。我想要的是它应该只在用户悬停在标题上方时加载。
我认为 Google 阻止了在 iframe 中加载共享按钮，您将无法执行此操作。

标签： javascript google-plus google-plus-one

【解决方案1】：

试试这个 html sn-p:

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

【讨论】：

url和parent有什么区别？

【解决方案2】：

如果您要在用户将鼠标悬停在某物上时显式渲染按钮，您需要做的是使用此处描述的显式渲染流程：

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

但是，有一个转折点，因为您使用的是共享按钮，所以不能使用显式渲染代码直接渲染到 div。相反，您将创建您的分享链接，将渲染设置为显式，然后可以使用 JavaScript 来触发分享按钮的渲染。

相关代码为：

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

对您而言，我猜您正在尝试使用与用户明确必须单击的按钮不同的触发器来呈现 +1 按钮，您可以使用适当的事件来触发渲染.

【讨论】：

感谢您的回答。我会试试这个。