Google が任意の Web ページに設置できる +1 ボタンを公開したので、さっそく貼り付けてみました。上のツィートボタンの横にある「+1」と書かれたのがそれです。 Google アカウントをお持ちの方、ポチっとやっていただけると嬉しいですｗ

この +1 ボタンですが、実はとても簡単に設置できます。 HTML コードを生成するウィザードがあるので、サイズとか何とかを指定して、取得した HTML をページに挿入するだけ。なんと既に日本語のドキュメントも公開されているので、詳細にカスタマイズすることも可能です。

ただ、少しドキュメントが間違っている（というか API がバグっている）ところもあったりしたので、そのあたりも含めて記事にしてみました。

+1 ボタンとは

日本ではまだあまり役に立たないのでご存じない方も多いと思うのですが、 +1 ボタンというのは、言わば Google 版の 「いいね！」ボタンです。ここのページに簡単な説明があります。 Google 検索をした時に、 Buzz 等でフォローしているユーザーが +1 した情報が表示されたり、検索順位が変動したりする…はずなのですが、現在のところ英語の Google 検索でしか使われていないので、実際のところ日本では意味がありません。しかしまぁ、そのうち、きっと、日本でも有効になると信じて、今のうちに少しでも +1 を稼いでおくのも一興なのではないかと思うわけです。

実際に Google 検索でどう表示されるのか知りたい時は、 Google Labs で +1 button を有効にした上で（「Join this experiment」をクリックすれば OK）、英語版の Google で適当に検索してみてください。検索結果の横に +1 ボタンが表示され、もしフレンドの中に +1 した人がいれば、その情報が表示されます。

他には、 Google プロファイルに自分が +1 したページが一覧表示されたりもします。ちなみにこのタブはデフォルトでは他人には表示しない設定になっているので、このように誰でも閲覧できるようにするには、プロフィールを編集して表示を許可する必要があります。

HTML に貼り付ける

前述のとおり +1 を貼り付けるための HTML コードはウィザードで簡単に生成できます。しかし、ウィザードが生成するコードは XHTML な名前空間指定が入っていて、 HTML に挿入するのは少し嫌な感じです（一応動くみたいですが）。ドキュメントによると HTML5 の場合は class を "g-plusone" にして、属性を data- の形式にすれば良いということだったので、以下のような HTML に差し替えてやってみました。

<div class="g-plusone" data-size="medium" data-count="true"></div>

しかし、なぜかボタンがデカイ。どうやら data-size 属性が効いていない感じです。む〜ん、なぜ…と少し悩んだ後、まさかと思って属性の data- プレフィクスを取り除いてみました。

<div class="g-plusone" size="medium" count="true"></div>

ビンゴでした。ダメじゃん。

うまく動作はしたものの、このままだとバグが修正された時に誤動作するかもしれないので、仕方なく data- プレフィクスありの属性となしの属性を併記することにしました。

<div class="g-plusone" data-size="medium" data-count="true" size="medium" count="true"></div>

これが正解という保証はありませんが、最も無難ではないかと思います。

ページ URL は link 属性に書くのがいいかも

ドキュメントによると、 +1 するページの URL は以下の法則で決められるようです。

1. divタグに href 属性があれば、その値を使う。
2. ページに link rel="canonical" タグがあれば、その href 属性の値を使う。
3. 上記のいずれも無ければ、 document.location.href を使う。

ここで面白いなと思ったのが、 (2) の link タグ。ヘルプページによると、これは +1 ボタン専用ではなく、例えば Google のクローラでも認識されるようです。ここに正しい URL を記述しておくと、たとえ余計なクエリーパラメータを付けてリンクされた場合でも、同じ URL でインデクシングされるとのこと。

+1 ボタンの記述がすっきりする上に、 Google 検索でのページのインデックスも良くなる（かもしれない）とくれば、使わない手はありません。 +1 ボタンを設置するついでに、こちらの link タグも追加しておきました。

ちなみに、 (1) の指定方法を使えば、 Google 検索結果のように記事リストの個々の記事に +1 ボタンを付けるなんてこともできそうですね。そのうちやってみようかな。

描画タイミングの制御

このページをリロードしてみるとわかると思いますが、 +1 ボタンはデフォルトでページの読み込み終了後にレンダリングされるので、後続の mixi チェックボタンや Facebook のいいね！ボタン（日本語だとデザインがイマイチだったので英語の Like ボタンにしてます ^^;）の位置がばたばたと変化してしまいます。

これを防ぐために、ボタンのレンダリング処理を明示的に呼び出す方法が用意されています。まずはスクリプトの読み込み時のオプションに parsetags:'true' を追加して、デフォルトの自動レンダリングを無効にしておきます。この script タグ自体は、 head 内もしくはボタンの場所より前に配置してください。

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
  {lang: 'ja', parsetags:'explicit'}
</script>

そして、ボタンのプレースホルダの直後に script タグを書き、 gapi.plusone.render() メソッドで明示的にボタンを表示します。サイズ指定などのオプションもメソッドの引数として指定します。

<div style="display:inline-block" id="plusone"></div>
<script type="text/javascript">
  gapi.plusone.render(
    document.getElementById('plusone'),
    { size:'medium', 'count':'true' });
</script>

こうするとプレースホルダのタグの生成直後にボタンがレンダリングされ、 DOM ツリーのトラバースなども行われないので、最も素早くボタンが表示されるはずです。ちなみに、 display:inline-block スタイルを付けているのは、前後のボタンと同じ行に表示する為です。古いブラウザも考慮するなら、もう少し工夫しないとダメですね。

しかしまぁ、ツィートボタンも遅延レンダリングだし、ページ全体の読み込みも plusone.js を最初に読み込む分だけ遅くなるので、この方法はけっきょく使っていないんですけどね。ご参考までに。

スクリプト読み込みの最適化（2011/6/8 追記）

こちらのページで Google +1 ボタンのスクリプト読み込みのパフォーマンスが分析されていました。なんでも、読み込み時にブロックするとか、スクリプトが minify されていないとか（gzip 圧縮はかかっている）、 https にリダイレクトしてるとか、なかなかにイケてないらしいです。

そこで、とくに head タグ内で読み込む際は、以下のコードを使うことが提案されています（{lang:"ja"} オプションは上記ページのコメントを参考に私が追加したものです）。

<script>
(function(d, t) {
  var g = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  g.async = true;
  g.src = 'https://apis.google.com/js/plusone.js';
  g.innerHTML = '{lang:"ja"}';
  s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>

こうすると、多くのブラウザでブロックせずにスクリプトが読み込まれ、リダイレクトもしないとのことです。

以上、本日は +1 ボタンの設置に関する Tips を少しだけご紹介しました。ほかにもボタンがクリックされた時に任意の JavaScript を実行する機能なんかもあって、活用方法を考えてみるのも面白そうです。日本でも早く +1 ボタンが活用できるようになるといいですね。