Google +1（プラスワン plusone）ボタンの設置と仕様

ホームページやブログにGoogleの+1ボタン（プラスワン）を設置するためのタグおよび仕様。

Google +1 ボタンの仕様

Google のサイト +1 Button で+1ボタンのHTMLコードを生成できる。

以前は共有数（ブックマーク数）が表示されたが、2017年7月頃から仕様が変わり、数値が表示されなくなった。

ジェネレーターにおける主な仕様は以下の通り。 ただし、2017年8月現在、ジェネレーターがなくなっている。

• サイズ
  ボタンのサイズ。
  Small (15px)、Standard (24px)、Medium (20px)、Tall (60px) を選べる。
  Twitter や Facebook などの横長タイプのボタンは、ボタンの高さが約20pxなので、他のボタンと高さを揃えたい場合はMedium (20px)を選ぶと良い。
• +1情報
  共有数（ブックマーク数）の表示方法は仕様が変わり、なくなった。 インライン（1列）、バルーン（吹き出し）、なし（非表示）があった。
• 幅
  横幅。
  +1情報がインラインの場合のみ設定可能。
• 言語
  通常は「日本語」を選ぶ。
• タグを解析
  呼び出すタイミング。
  デフォルトは「ページ読み込み時」になっている。
  「任意のタイミング」を指定すると呼び出すタイミングを自分で調整できる。
  呼び出す際はJavaScriptで gapi.plusone.go(container) または gapi.plusone.render(container) メソッドを使用する。
• JS コールバック関数
  JavaScriptのコールバック関数。
• +1 ボタンの対象とする URL
  任意のURLを指定可能。
  指定しない場合はボタンが表示されたページのURLが自動的に設定される。

ジェネレーターで生成したHTMLコードは以下のようになる。

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

<!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plusone" data-href="http://www.example.com/" data-size="tall"></div>

表示例

+1ボタンの div 要素の属性の仕様

• data-href
  対象とするページのURLを指定する。 省略した場合はボタンを設置したページのURLが自動的に指定される。
• data-size
  ボタンのサイズを指定する。 サイズは small、medium、standard、tall の4種類あり、デフォルトは standard となっている。 以前の仕様では tall は縦も大きかったが、新しい仕様ではなぜか横に長い。