ShareButton/Google+1 のバックアップの現在との差分(No.2)

バックアップ一覧
差分を表示
ソースを表示
バックアップを表示
ShareButton/Google+1 へ行く。
- 1 (2011-09-04 (日) 00:56:51)
- 2 (2011-09-05 (月) 01:24:05)
追加された行はこの色です。
削除された行はこの色です。
#title(Google +1 ボタンを表示する)

#contents

-[[「様々なシェア、ブックマークボタン（Google+1、twitter、facebook、はてななど）を表示する」に戻る>../]]

*Google +1 ボタンを表示する [#a62f88e1]

#ref(../google_plusone1.png)
#ref(../google_plusone3.png)

**基本的なコード [#kafca5d8]

Google+1ボタン（プラスワンボタン）は、「[[プラスワン ボタン>http://www.google.com/intl/ja/webmasters/+1/button/index.html]]」でコードを取得できます。

基本的なコードは、以下のようなものです。

#prescroll{{
<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer></script>

<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone></g:plusone>
<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone"></div>
}}

サイズを小、言語を日本語、カウンターを非表示、+1ボタンの対象とするURLを「http://dobon.net/」とした時のコードは、以下のようになります。
サイズを小、言語を日本語、カウンター（+1情報）を非表示、+1ボタンの対象とするURLを「http://dobon.net/」とした時のコードは、以下のようになります。

#prescroll{{
<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone size="small" count="false" href="http://dobon.net/"></g:plusone>
<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-size="small" data-annotation="none" data-href="http://dobon.net/"></div>
}}

「次のタグを head 要素内または body 終了タグの直前に貼り付けてください」のタグは、どこにあっても機能します。ただし、「[[Google +1 Button Performance Review>http://www.aaronpeters.nl/blog/google-plus1-button-performance-review]]」によると、body終了タグの直前がよい（ページが速く表示される）そうです。
「<div class="g-plusone" ...」は「<g:plusone ...」とすることもできます。この場合は、以下のようになります。

更なるカスタマイズについては、「[[+1 ボタンをサイトに追加 - +1 button API - Google Code>http://code.google.com/intl/ja/apis/+1button/]]」や「[[Adding the +1 Button - +1 Button API - Google Code>http://code.google.com/intl/en/apis/+1button/]]」（こちらの英語のページの方が最新の情報が書かれています）が参考になります。
#prescroll{{
<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<g:plusone size="small" annotation="none" href="http://dobon.net/"></g:plusone>
}}

「head 内か、body 終了タグの直前に次のタグを貼り付けてください。」のタグは、どこにあっても機能します。ただし、「[[Google +1 Button Performance Review>http://www.aaronpeters.nl/blog/google-plus1-button-performance-review]]」によると、body終了タグの直前がよい（ページが速く表示される）そうです。（古い情報です。）

**対象とするURLを指定する [#be3d1ff6]

その他のブックマークボタンでも大抵そうですが、+1ボタンには対象とするURLを指定できます。もしこれを指定しなかったとしてもdocument.location.hrefで定義された現在のURLが使われるため、通常は問題ありません。

対象とするURLを明示的に指定するケースは、例えば、別のページの+1ボタンを設置したい時です。例えば、記事の一覧を表示したページで、それぞれの記事の+1ボタンを記事の横に表示する時は、その記事のURLを指定して+1ボタンを設置します。

それ以外でもできればURLを明示的に指定した方がよいです。なぜなら、document.location.hrefのURLに余計なクエリ文字列やアンカーが含まれていると、同じページであっても別のURLとして扱われてしまうかもしれないからです。

URLを明示的に指定する方法は、href属性以外に、link rel="canonical" タグを使う方法があります。詳しくは、「[[+1 ボタンをサイトに追加 - +1 button API - Google Code>http://code.google.com/intl/ja/apis/+1button/#target-url]]」をご覧ください。
URLを明示的に指定する方法は、href属性以外に、link rel="canonical" タグを使う方法があります。詳しくは、「[[+1 Button &#160;|&#160; Google+ Platform for Web &#160;|&#160; Google Developers>https://developers.google.com/+/web/+1button/?hl=ja]]」をご覧ください。

**カウンタをテキストで表示する [#ba8087b2]
**カウンターをテキストで表示する [#ba8087b2]

#ref(../google_plusone2.png)
#ref(../google_plusone4.png)

実は英語のページ「[[plusone-button>http://www.google.com/intl/en/webmasters/+1/button/]]」で+1ボタンを作成すると、日本語のページで作成するよりも多くのオプションを設定できます。そのひとつに、カウンタをテキストで表示する設定があります。
「+1情報」を「インライン」にすると、カウンターをテキストで表示することができます。この時、幅も指定することができます。

カウンタをテキストで表示し、幅を480pxとするコードは、以下のようになります。なおwidthは最低で120pxで、指定しないと450pxになるようです。
カウンタをテキストで表示し、幅を300pxとするコードは、以下のようになります。なおwidthは最低で120px（小さいサイズは自動でリサイズされ、推奨最小サイズは250px）で、指定しないと450pxになるようです。

#prescroll{{
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline" width="480"></g:plusone>
<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-annotation="inline" data-width="300"></div>
}}

**非同期的にロードする [#w8633ca7]

同じく英語のページ「[[plusone-button>http://www.google.com/intl/en/webmasters/+1/button/]]」には「Asynchronous」というオプションがあり、これにチェックを入れると、非同期的にロードするコードが出力されます。通常は非同期的にロードした方が、速く表示されます。
「詳細オプション」の「ダイナミック」にチェックを入れると、非同期的にロードするコードが出力されます。

「Asynchronous」を有効にして取得したコードは以下のとおりです。
「ダイナミック」を有効にして取得したコードは以下のとおりです。

#prescroll{{
<!-- Place this tag where you want the +1 button to render -->
<g:plusone></g:plusone>
<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone"></div>

<!-- Place this render call where appropriate -->
<!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
}}

**IEで表示されない [#i9571de1]

上記タグをJavascriptのdocument.writeで書き出すと、Internet Explorerではボタンが表示されないようです。
「<g:plusone ...」のコードをJavascriptのdocument.writeで書き出すと、Internet Explorerではボタンが表示されないようです。

「[[Google +1(プラスワン)ボタンが表示されないときの対処法 & クリック計測方法 | 海外SEO情報ブログ>http://www.suzukikenichi.com/blog/how-to-display-plus-one-botton-using-html5/]]」によると、IEでも表示されるようにするには、「次のタグを +1 ボタンを表示する箇所に貼り付けてください」のタグにHTML5の構文を使用するということです。HTML5の構文については、「[[+1 ボタンをサイトに追加 - +1 button API - Google Code>http://code.google.com/intl/ja/apis/+1button/]]」に説明があります。
「[[Google +1(プラスワン)ボタンが表示されないときの対処法 & クリック計測方法 | 海外SEO情報ブログ>http://www.suzukikenichi.com/blog/how-to-display-plus-one-botton-using-html5/]]」によると、IEでも表示されるようにするには、「次のタグを +1 ボタンを表示する箇所に貼り付けてください」のタグにHTML5の構文（「<div class="g-plusone" ...」）を使用するということです。

HTML5の構文は、例えば以下のようになります。

#prescroll{{
<div class="g-plusone" data-size="small" data-count="true" data-href="http://dobon.net/"></div>
}}

海外SEO情報ブログさんでは、「data-size」や「data-count」が効かないとありますが、私が試した限りでは、問題なく機能しているようです。

**(X)HTML validにする [#i984f8d8]

Google +1ボタンのコードを(X)HTML validにする方法は、「[[javascript - Google +1 Button not W3C compliant - Stack Overflow>http://stackoverflow.com/questions/6217434/google-1-button-not-w3c-compliant]]」や「[[How to produce valid Google +1 buttons - GabSoftware>http://www.gabsoftware.com/tips/how-to-produce-valid-google-1-buttons/]]」にあります。

これに従うと、例えば以下のようなコードになります。

#prescroll{{
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{ lang: 'ja' }
</script>

<div id="plusone-div"></div>

<script type="text/javascript">
gapi.plusone.render('plusone-div', { size: 'small', count: 'true', href: 'http://dobon.net/' });
</script>
}}

**共有ボタン [#hae08767]

共有ボタンは、「[[Share &#160;|&#160; Google+ Platform for Web &#160;|&#160; Google Developers>https://developers.google.com/+/web/share/?hl=ja]]」でコードを取得することができます。

**コメント [#e9ca8c73]

#comment

//これより下は編集しないでください
#pageinfo([[:Category/インターネット]],2011-09-03 (土) 18:13:13,DOBON!,2011-09-05 (月) 01:24:05,DOBON!)
#pageinfo([[:Category/インターネット]],2011-09-03 (土) 18:13:13,DOBON!,2017-01-25 (水) 02:06:21,DOBON!)
▲ ▼
DoboWiki
