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

Web上でチップが貰えるぞ！噂のGrow!をBloggerに設置する方法

Grow!って何？

お気に入りのコンテンツにボタンを通じてチップを贈り、コンテンツ製作者を支援すると同時に
それを友人と共有するSocial Tipping Platform ソーシャル チッピング プラットフォーム

らしいです。詳しくはこちら。

• コムギドットネット | Grow! が日本国内で正式リリース& Amazonギフトカード交換も開始
• Grow! Blog | チュートリアル

ここではGrow!でチップを貰うためにBloggerに設置する方法を説明します。

<script type='text/javascript' src='http://growbutton.com/javascripts/button.js?apikey=xxx&shape=rectangle'></script>

Blogger設定画面
↓
レイアウト
↓
ガジェットを追加
↓
HTML/JavaScriptを選択
↓
上のコードをコピー
↓
apikey を xxx からあなたのAPI Keyに書き換える
↓
ガジェットに貼り付けて保存
↓
以下のように表示されたらOK!!


元のコードからの変更点は以下の通り。
タグ内のダブルクォーテーションをシングルクォーテーションへ書き換え
&を&amp;へ書き換え

本当は各記事に設置したかったんだけどGrow!から提供されたタグがXHTML的に invalid なタグで、
Bloggerのテンプレート編集機能が受け付けてくれなかったから諦めました。
FC2ブログも持っているので設置してみたけど何故か上手く行かなかったです。
ということで今のところは上記の方法でサイトに一つ設置するので我慢しましょう。
始まったばかりのサービスだからこれからに期待ということで。

追記：記事フッターにも設置できました！DevAchieve: Bloggerの記事フッターにGrow!ボタンを設置する方法

よろしければGrow!ボタンを押して下さいな(*´ω｀*)

それではー

Bloggerの記事フッターに各種ソーシャルボタンを設置する方法

はてなブックマーク、Facebook、Twitter、Google +1のボタンを設置したいと思います。

Blogger設定画面→テンプレート→HTMLの編集→ウィジェットのテンプレートを展開にチェック
まずははてなブックマーク、Twitter、Google +1のScriptタグを</body>の直前に置きましょう。
コードの部分をダブルクリックすると全選択できるのでコピーして下さい。

<script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>{lang: 'ja'} </script>
...
</body>

次に記事フッター(post-fotter)の下辺りに以下のソースを追加しましょう。

<div class='post-footer'>
...
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:data-hatena-bookmark-title='data:blog.title + ": " + data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' width='20'/></a>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
<a class='twitter-share-button' data-via='' data-count='horizontal' data-lang='ja' expr:data-text='data:blog.title + ": "+ data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<g:plusone expr:href='data:post.url' size='medium' />

一行目：はてなブックマーク(はてなブックマークボタンの作成・設置について)
二行目：Facebook(Like Button - Facebook開発者)
三行目：Twitter(data-viaをあなたのアカウントに設定する必要がある)(Twitter / Twitterボタン)
四行目：Google +1(+1 ボタン)

関連：DevAchieve: ツイートボタンをカスタマイズして「@～さんから」を非公式RT形式にする