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

ここでは 2 つの概念が少し混同されていますが、正しい方向に進んでいます。

非同期で 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 で指定したように、body 終了タグの直前にライブラリをロードします。

<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

：を追加する必要があり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 に答える
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 に答える