Blogger覚書 - 「+1」ボタン(だけ)を付けてみる

Googleの「+1」ボタンが一般でも利用可能となったようなので、早速本ブログにも導入してみることにします。

最もお手軽なのは、ダッシュボードの「デザイン」で「ブログの投稿」を編集して純正の共有ボタンを表示させる方法。けれども、テンプレートをいじっているせいか本ブログでは純正の共有ボタンが表示されません。

そんなわけで、独立した「+1」ボタンだけ設置することにしました。今までTwitterの純正ボタンをフッタに設置していたので、その隣に並べてみましょう。

そのためにはこちらのページにあるコード使用します。ちなみに、Twitterの純正ボタンと合わせるなら「中(20px)」が高さピッタリな感じです。

で、ダッシュボードの「デザイン」-「HTMLの編集」にて、「ウィジェットのテンプレートを展開」にチェックを入れてからテンプレートをいじります。念のためバックアップを取っておいた方がよろしいでしょう。

先ほどコピーしたコードの説明にある通り、前半部分を</BODY>タグの直前に、後半のコードを「+1」ボタンを設置したい場所に挿入します。なお、当方はフッタに入れ込んでいます。

後はプレビューして、問題がなければ完了...のハズだったのですが、様子が変です。トップページに表示された「+1」ボタンは、トップページの専用の「+1」ボタンとして機能してしまいます。

どういう事かと言うと、単体の投稿ページ(今ご覧になっているこのページ)の下にある「+1」ボタンを押すと数字がひとつ繰り上がります。が、トップページにあるボタンの方は変化しません。逆も同様です。どうやら、この「+1」ボタンは設置されたページのURLを見ているようです。

この辺を参照して修正しようかとも思ったのですが、ちと面倒そうなので、場当たり的な対処でごまかすことに。

それは、「単体の投稿ページでのみボタンを表示させる」という方法です。どのみち、トップページでは折りたたまれた投稿しか見えないので「+1」も何もあったものではありません。なので論理的には筋が通っております。

具体的には、Bloggerの「b:」タグを使用して「item(投稿ページ)」の時だけボタンを表示させます。記述としては以下のような雰囲気になります。

<b:if cond='data:blog.pageType == "item"'>
  <!-- 同様に処理したいボタンなどはこの辺に --> 
  <g:plusone size="medium"></g:plusone>
</b:if>

Twitterの純正ボタンは期待通りに動作していたのですが、これだけ表示するのも気が引けるので同様に処理します。そのため「+1」ボタン用コードの前行にTwitter純正ボタンのコードを挿入しました。

動作確認も問題ありません。IEではボタンが縦並びになってしまいますが...。とりあえずは、この状態でしばらく様子を見てみたいと思います。

***Edit***
結局hrefで投稿のURLを指定してあげればOKでした。これでトップページでも正しく表示されるようになります。

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

ー記事をシェアするー

B!