Google +1 ボタンを表示する †

google_plusone1.png
▲ ▼

基本的なコード †

Google+1ボタン（プラスワンボタン）は、「プラスワン ボタン」でコードを取得できます。

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

<!-- 次のタグを 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/」とした時のコードは、以下のようになります。

<!-- 次のタグを 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」によると、body終了タグの直前がよい（ページが速く表示される）そうです。

更なるカスタマイズについては、「+1 ボタンをサイトに追加 - +1 button API - Google Code」や「Adding the +1 Button - +1 Button API - Google Code」（こちらの英語のページの方が最新の情報が書かれています）が参考になります。

▲ ▼

対象とするURLを指定する †

その他のブックマークボタンでも大抵そうですが、+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」をご覧ください。

▲ ▼

カウンタをテキストで表示する †

google_plusone2.png

実は英語のページ「plusone-button」で+1ボタンを作成すると、日本語のページで作成するよりも多くのオプションを設定できます。そのひとつに、カウンタをテキストで表示する設定があります。

カウンタをテキストで表示し、幅を480pxとするコードは、以下のようになります。なおwidthは最低で120pxで、指定しないと450pxになるようです。

<!-- 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>
▲ ▼

非同期的にロードする †

同じく英語のページ「plusone-button」には「Asynchronous」というオプションがあり、これにチェックを入れると、非同期的にロードするコードが出力されます。通常は非同期的にロードした方が、速く表示されます。

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

<!-- 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で表示されない †

上記タグをJavascriptのdocument.writeで書き出すと、Internet Explorerではボタンが表示されないようです。

「Google +1(プラスワン)ボタンが表示されないときの対処法 & クリック計測方法 | 海外SEO情報ブログ」によると、IEでも表示されるようにするには、「次のタグを +1 ボタンを表示する箇所に貼り付けてください」のタグにHTML5の構文を使用するということです。HTML5の構文については、「+1 ボタンをサイトに追加 - +1 button API - Google Code」に説明があります。

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

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

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

▲ ▼

(X)HTML validにする †

Google +1ボタンのコードを(X)HTML validにする方法は、「javascript - Google +1 Button not W3C compliant - Stack Overflow」や「How to produce valid Google +1 buttons - GabSoftware」にあります。

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

<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>
▲ ▼

コメント †


▲ ▼
ページ情報
[ トップ ]   [ 新規 | 子ページ作成 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]