Question

我想在一个页面上显示多个Google Plus共享按钮（每个按钮链接到不同的目标网页）。用例类似于具有多个帖子的博客主页，因此我需要在每个帖子中显示共享按钮。

我在每个帖子中都包含以下代码

<div class="g-plus" data-action="share" data-annotation="none" data-align="left" 
data-href="${postShareURL}" ></div>

当我在浏览器中查看来源时，我可以看到为每个共享按钮创建的iframe，同样也没有删除原始div（带有class =＆＃39; g-plus＆＃39;）。但它实际上并未在页面上显示

<div id="___plus_2" style="position: absolute; width: 450px; left: -10000px;">
<iframe ...... ></iframe></div>

<div class="g-plus" data-action="share" data-annotation="none" data-align="left" 
data-href="http://www.example.com/thisPost" data-gapiscan="true" 
data-onload="true" data-gapistub="true"></div>

left:-10000px看起来像是罪魁祸首，但我不知道为什么会这样。

我应该更改什么，以便在页面上显示所有共享按钮。

我知道这是可行的，根据Google +分享页面上的faqs

Can I place multiple buttons on a single page that all share different URLs?
  Yes. Use the href attribute as specified in share tag parameters to indicate 
the URL to be shared.

Answer 1

<div id="g-plus-footer" data-href="http://google.co.uk" class="g-plus" data-action="share" data-annotation="bubble"></div>
<div id="g-plus-footer" data-href="http://yahoo.co.uk" class="g-plus" data-action="share" data-annotation="bubble"></div>
<div id="g-plus-footer" data-href="http://test.co.uk" class="g-plus" data-action="share" data-annotation="bubble"></div>



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

页面上有多个Google+分享按钮

1 个答案: