2011年7月4日月曜日

Google+1(Google Plus One)ボタンをBloggerのブログ記事につけてみた

GoogleのGoogle+1(Google Plus One)ボタンを、Bloggerのブログ記事のテンプレートに追加してみた。

1.プラスワンのサイトでコードを作成する

プラスワン ボタン
Google+1サイトで、ボタンサイズやカウンターの表示/非表示を設定する。


2.ブログ記事のテンプレートを編集

Bloggerの管理ページで「デザイン」>「HTMLの編集」へ。
「ウィジェットのテンプレートを展開」にチェックを入れる。

まずは、</body> の直前にGoogle+1のjsを読み込むコードを追加する。
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

次に、ボタンを追加。
例えば、ブログ記事の一番下に追加したい場合は<data:post.body/>の下に以下のようにコードを追加する。ボタンサイズはmediumを選んだ場合。
<div class='post-body entry-content'>
<data:post.body/>

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

</div>

ポイントはexpr:href='data:post.url'
data:post.urlが投稿記事のURLになるので、その情報をhref属性としてgタグに追加する。