#title(Google +1 ボタンを表示する) #contents *Google +1 ボタンを表示する [#a62f88e1] #ref(../google_plusone1.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> <!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください --> <g:plusone></g:plusone> }} サイズを小、言語を日本語、カウンターを非表示、+1ボタンの対象とするURLを「http://dobon.net/」とした時のコードは、以下のようになります。 #prescroll{{ <!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください --> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ja'} </script> <!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください --> <g:plusone size="small" count="false" href="http://dobon.net/"></g:plusone> }} 「次のタグを head 要素内または body 終了タグの直前に貼り付けてください」のタグは、どこにあっても機能します。ただし、「[[Google +1 Button Performance Review>http://www.aaronpeters.nl/blog/google-plus1-button-performance-review]]」によると、body終了タグの直前がよい(ページが速く表示される)そうです。 更なるカスタマイズについては、「[[+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/]]」(こちらの英語のページの方が最新の情報が書かれています)が参考になります。 **対象とする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]]」をご覧ください。 **カウンタをテキストで表示する [#ba8087b2] #ref(../google_plusone2.png) 実は英語のページ「[[plusone-button>http://www.google.com/intl/en/webmasters/+1/button/]]」で+1ボタンを作成すると、日本語のページで作成するよりも多くのオプションを設定できます。そのひとつに、カウンタをテキストで表示する設定があります。 カウンタをテキストで表示し、幅を480pxとするコードは、以下のようになります。なおwidthは最低で120pxで、指定しないと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> <!-- Place this tag where you want the +1 button to render --> <g:plusone annotation="inline" width="480"></g:plusone> }} **非同期的にロードする [#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> <!-- Place this render call where appropriate --> <script type="text/javascript"> (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> }} **IEで表示されない [#i9571de1] 上記タグを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/]]」に説明があります。 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> }} **コメント [#e9ca8c73] #comment //これより下は編集しないでください #pageinfo([[:Category/インターネット]],2011-09-03 (土) 18:13:13,DOBON!,2011-09-04 (日) 00:56:51,DOBON!) |