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&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!(`・ω・´)↓↓↓↓