[Blogger]Google+1ボタンの設置手順

師走だ。4ヶ月ぶりにこんにちは。まさか1シーズンほったらかすとは思わなんだ（てか雑記にいたっては2シーズン）。書きたい事はかなり溜まっている（主に技術メモだけど）ので、いい加減に再始動するぜ俺。

本日は、今さらですがGoogle+1ボタンを設置してみましたので、その手順を紹介します。昔書いたエントリのフォーマットを丸コピするという、リハビリがてらの簡単エントリっす。
ちなみに昔書いたエントリというのは以下です。

１．HTMLタグの作成

まず以下ページにアクセス。

+1 ボタン

お好みに合わせて情報を入力してHTMLコードを作成するわけですが、「+1 ボタンの対象とするURL」には以下の値を入力しておくと、後の作業が多少楽になります。

data:post.url

当ブログに設置しているボタンの場合、その他に初期設定から変更した項目は以下だけです。

Annotation：バルーン
言語：日本語

上記設定を行った場合、以下のようなコードとなってる筈。

<!-- このタグを +1 ボタンを表示する場所に挿入してください -->
<g:plusone href="data:post.url"></g:plusone>

<!-- この render 呼び出しを適切な位置に挿入してください -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (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>

続いて、記事毎にボタンを設置した際に、+1対象のURLに記事毎の値がセットされるように、タグを少し修正します。

２．「href」属性の左に「expr:」と記述

以下のように。

<g:plusone href="data:post.url"></g:plusone>
→<g:plusone expr:href="data:post.url"></g:plusone>

３．完成したタグをテンプレートに記述

コメントに従って、それぞれのタグをテンプレートの適当な位置に挿入します。
「デザイン」→「HTMLの編集」のページで「ウィジェットのテンプレートを展開」にチェックを入れ、テンプレートファイルを表示し、お好みの場所に貼り付けてください。

<script>タグは、コメントにもあるようにどこでもいいです。僕は<body>タグ内のケツに挿入しました。

ボタンに変換されるのは<g:plusone>タグですので、これは表示したい位置に貼り付けてください。
記事本文の後ろとか、当ブログと同じく記事フッタ辺りが人気エリアですかね。
※尚、テンプレートに貼り付けて保存すると、属性値を囲っている「"」は「'」に変換されます。動作に支障は無いので気になさらぬよう（というかむしろ「'」じゃないと支障がある）。

（例）記事本文の後ろ

「<data:post.body/>」ってのが記事本文に置き換わる部分です。

（例）記事フッタ

「<div class='post-footer'>」で囲まれた箇所が記事フッタです。

右揃えにしたけりゃ

<div>タグで囲むなどしてください。

僕らはみんな歪ている

2011年12月4日日曜日