Google+の公式+1ボタンをブログに設置したいとき

+1 Button - Google+ Platform - Google Developers

ボタンシリーズ続編です。Google+の公式+1ボタンは、このページからブログパーツが作れます。

基本オプションは3つです。

Size: Small、Medium、Standard、Tallの4種類
Annotation: inline、bubble、noneの3種類
Language: お好きな言語で

日本語にすると「1万以上」という表示が「1万以」で切れてしまってますな。。

詳細オプションは5つあります。

Asynchronous: 非同期読み込みはチェックで。
HTML5 valid syntax: 独自タグは良くないのでこれもチェックで。
Parse tags: Default (onload)でいいでしょう。明示的にボタンを出すタイミングを決めたい場合はExplicitにします。
JS callback function: +1ボタンがクリックされたときに実行されるコールバックなので、通常はなしでいいでしょう。
URL to +1: +1したいURLを入力します。

出来上がったコードをテンプレートに貼り付ければOKですね。上のdivタグはボタンを表示したい場所に、下のscriptタグはその後ろに置きます。1ページ内に複数のボタンを設置したい場合は、最後のdivタグの後ろにscriptタグを置きます。

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="tall" data-href="http://blog.satooshi.jp">
 
<!-- Place this tag after the last +1 button tag. -->
<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>

各エントリーのブックマークボタンを設定をするには、その記事に対するパーマネントリンクのURLを設定する必要があります。これは、それぞれdata-hrefというdata属性に設定します。tumblrの場合は、

<div class="g-plusone" data-size="tall" data-href="{Permalink}"></div>

というように属性を修正すれば完成です。