ページ

2012/01/18

Bloggerの記事フッターにGrow!ボタンを設置する方法

Grow!って何?って方は以下のページに少し説明を書いたので見てください。
DevAchieve: Web上でチップが貰えるぞ!噂のGrow!をBloggerに設置する方法

ここでは上の記事で出来なかった記事フッターへのGrow!ボタンを設置を行いたいと思います。
ブログのトップページなど一つのページにいくつもGrow!ボタンを表示する場合には
チュートリアル(Grow!ボタン設置者向け) | Grow! Blogを見れば良いのですが、
ここにあるコードは spanタグの itemscope に属性値がないため、XHTML的には正しくないので
Bloggerのテンプレート編集機能にエラーとしてハネられてしまいます。
(あと地味にダブルクォーテーションが全角になっているというトラップ付き)(昨日報告したから訂正されるはず!)

Blogger用Grow!ボタン設置用コード

Blogger設定画面→テンプレート→HTMLの編集→ウィジェットのテンプレートを展開にチェック
以下のScriptタグを</body>の直前に置く。(</head>直前でも動くだろうと思ったら大間違い…!)
<script src='http://growbutton.com/javascripts/button.js?apikey=xxx&amp;insert=false' type='text/javascript'/>
</body>
apikey は xxx になっているので、あなたの取得した API Key に書き換えて下さい。

記事フッター(post-fotter)の下辺りに以下のソースを追加する。
<div class='post-footer'>
...
<span itemscope='itemscope' itemref='rectangle' itemtype='http://growbutton.com/ns#button' style='display: none;'><span itemprop='url'><data:post.url/></span><span itemprop='title'><data:post.title/></span></span>
変更点
ダブルクォーテーションをシングルクォーテーションに変更
itemscope に属性値として itemscope を設定

ちなみにDevAchieve: Web上でチップが貰えるぞ!噂のGrow!をBloggerに設置する方法で設置した
右上のGrow!ボタンはコードを変更しなくても問題なく表示されるので、そのままで共存できるようです。

以上で各記事のフッターにGrow!ボタンを設置することが出来ました。
もし良かったらこの記事の方法で設置したGrow!ボタンでLet's Grow!(`・ω・´)↓↓↓↓