2012/01/12

Bloggerに「Grow!」ボタンを設置する際の注意点


遅れましたが、あけましておめでとうございます。
今年は今まで通りの中途半端な忘備録を綴りつつ、一個人としてのアウトプットもやっていこうかなと考えております。


2012年初エントリーはBloggerへの「Grow!」ボタンの設置方法
ホントは別のネタ用意してたんだけど順番的にこっちが先になっちゃた。。。
ただ、せっかく日本国内でもリリースされたようなので試してみます!

本物は右上だよ。


「Grow!」って?
お気に入りのコンテンツにボタンを通じてチップを贈り、コンテンツ製作者を支援すると同時に、
それを友人と共有するSocial Tipping Platform(ソーシャル・チッピング・プラットフォーム)
とのこと。詳しくはこちらをご覧あれ。

せっかくなのでつけてみた
Bloggerの場合は以下の2つの方法がある。

JavaScriptを使う場合
これは本当に簡単。
Grow!から入手したコードを単純にコピペするだけでウィジェットに「Grow!」ボタンが追加される。

「レイアウト」→ 「ガジェットを追加」でポップアップしてくる。
ここで「HTML/JavaScript」を選択。

タイトルには適宜決めるとして(なんでもいい)
Grow!から取得したコードをまんまコピペすればいい。


テンプレートXMLに直接埋め込む場合
「ボタンのコードも簡単に手に入るし、これは簡単に設置できるかな。」
と思ってたけど、Bloggerテンプレートに埋め込む時がそう簡単にはいかなかった。

取得したコードをそのままコピペして埋め込むとSyntaxエラーが発生してテンプレートの更新ができない。
なので、取得したコードを以下のように書き換える。
  • 編集前(取得したコード)
  • <script type="text/javascript" src="http://growbutton.com/javascripts/button.js?apikey=[API KEYの値]&shape=rectangle"></script>
     
      
  • 編集後(テンプレート埋め込み用)
  • <script expr:src='&quot;http://growbutton.com/javascripts/button.js?apikey=[API KEYの値]&amp;shape=rectangle&quot;' type='text/javascript'/>
     
      

後は適宜埋め込みたいところに埋め込むだけ。

これだけ手軽に寄付の仕組みを作れるのは、特に個人のブロガーさんにとって非常に嬉しいですね。
僕の場合はあまり真面目には書かないのでそれほど縁はないのかもしれませんが。。。w