3

我正在努力解决这个问题。

您会认为文档会提供简单直接的示例。

我想要做的就是获取共享按钮来共享自定义 URL，而不是它所在的当前页面。

此处的文档... https://developers.google.com/+/web/share/

然后这就是我在下面尝试过的，但都失败了......

#1

<div id="g-plus-footer" 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);
      gapi.plus.render('g-plus-footer', {'href':'http://mysite.co.uk'});
    })();
<script>

#2

<div id="g-plus-footer" 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);
    })();

    gapi.plus.render('g-plus-footer', {'href':'http://mysite.co.uk'});
</script>

#3

<div onClick="gapi.plus.render('g-plus-footer', {'href':'http://mysite.co.uk'});" id="g-plus-footer" 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>


我似乎对所有这些错误（除了第 3 个）都是......

Uncaught ReferenceError: gapi is not defined


任何人都可以帮助理解我哪里出错了。

谢谢乔什

4

3 回答 3

8

你有两个概念在这里有点混淆，但你在正确的轨道上。

异步加载gapi库，这就是你正在做的，将导致所有带有“g-plus”类的东西在它完成加载时被渲染。所以你不需要显式调用任何东西。

但是，您确实需要已经在有问题的 div 上设置了“data-href”属性。所以你应该使用类似的标签

<div id="g-plus-footer" class="g-plus" data-href="http://example.com/" data-action="share" data-annotation="bubble"></div>

并在您在示例 3 中指定的结束正文标记之前加载库：

<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>
于 2013-03-18T15:07:19.260 回答
2

您是否确保在引用您的之前包含 Google API 库gapi？

<script src="https://apis.google.com/js/plusone.js"></script>

<script type="text/javascript">
 // gapi should now be defined
</script>

您当前正在异步加载它，这意味着gapi在检索脚本之前它将是未定义的。同步执行此操作，您应该一切顺利。

于 2013-03-18T14:38:57.663 回答
2

你必须添加一个data-href：

<div id="g-plus-footer" data-href="http://mysite.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>
于 2013-03-18T14:44:51.180 回答