+1ボタンをBloggerの好きな場所に設置する方法

＋１ボタンがようやく公開されましたね。どんなものか知りたい方は公式ページをご覧ください。Bloggerも対応して、共有ボタン(ダッシュボード＞デザイン＞ページ要素＞ブログの投稿＞編集)で表示されるようになりましたが、好きな場所に表示できないのが…。ということで、HTMLの編集からテンプレートを直接編集して、好きな場所に設置してしまいましょう。

＞＞Google +1 ボタン
注：この記事は2011/06/02時点の内容です。

ダッシュボード＞デザイン＞HTMLの編集

※編集前は”テンプレートをすべてダウンロード”でバックアップをわすれずに！

※ウィジェットのテンプレートを展開してね

◆貼り付けるもの
＜/head＞の直前へ以下を貼付け

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

ボタンの表示したい場所に以下を貼付け(大きいボタン)

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

Blogger用に変更した部分は赤字の部分。これで個別記事のURLが指定できる。ボタンの大きさ買えたり、数字消したりしたい場合は、ここで取得してきて赤字の部分を足してやればよし。

◆ボタンの表示したい場所
・記事タイトルの直下の場合
以下のコードを探して、

<div class='post-header-line-1'/>

↓

<div class='post-header-line-1'>
ここに貼付け！
</div>

・記事の直下の場合

ここに貼付け！
<div class='post-footer'>

個別記事のみで表示したい場合は、ifタグで挟む！

<b:if cond='data:blog.pageType == &quot;item&quot;'>
ここに貼付け！
</b:if>
<div class='post-footer'>

どうですか？綺麗に表示されましたか? コールバック関数も指定できるようなので、なにか面白いことできないか考え中です。 あと、この記事に間違いが合ったら、教えてくださいね～

おまけ：
記事タイトルの右に表示する場合（このブログのTwitterボタンのように）

          <data:post.title/>
        </b:if>
     </b:if>
<span style='float:right;'>
<g:plusone expr:href='data:post.url' size='tall'/>
</span>
      </h3>

＞＞Google +1 ボタン