BloggerにTwitter公式ツイートボタンとGoogle Buzz投稿ボタンとFacebookのいいね！ボタンを設置する

Bloggerにツイートボタンなどを設置する際に気をつけなくてはいけないのは、インデックスページで、インデックスページのツイートになるのではなく、各ブログエントリーのツイートにならなくてはいけないことだ。

1. Twitterの公式ツイートボタン

Twitterの公式ツイートボタンのコードをBloggerのテンプレートページに貼り付ける際には、data-text属性とdata-url属性の設定が必要だ。

<a class="twitter-share-button" data-count="horizontal" data-lang="ja" data-via="Twitterのアカウント名" expr:data-text='data:title + ": "+ data:post.title' expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

expr:data-text='data:title + ": "+ data:post.title'
「ツイートする」ボタンがクリックされたときに、インデックスページのタイトルではなく、「ブログタイトル: ブログエントリーのタイトル」が反映されるようになる。

expr:data-url="data:post.url"
「ツイートする」ボタンがクリックされたときに、インデックスページのURLではなく、ブログエントリーのURLが反映されるようになる。

2. Google BuzzのBuzz投稿ボタン

Buzz投稿ボタンのコードをBloggerのテンプレートページに貼り付ける際には、最低でも、data-url属性の設定が必要だ。

<a class="google-buzz-button" data-button-style="small-count" data-locale="ja" expr:data-url="data:post.url" href="http://www.google.com/buzz/post" title="Google バズに投稿"></a>
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript"></script>

expr:data-url="data:post.url"
「バズ」ボタンがクリックされたときに、インデックスページのURLではなく、ブログエントリーのURLが反映されるようになる。

3. FacebookのLikeボタン

FacebookのLikeボタンをBloggerのテンプレートページに貼り付ける際には、like.phpのクエリーパラメーターhrefの値の設定が必要だ。

<iframe allowtransparency="true" expr:src=""http://www.facebook.com/plugins/like.php?href=＆quot; + data:post.url + ＆quot;&layout=button_count&show_faces=false&width=90&action=like&colorscheme=light&height=21"" frameborder="0" scrolling="no" style="border: none; height: 21px; overflow: hidden; width: 100px;"></iframe>

like.php?href=＆quot; + data:post.url + ＆quot;
いいね！ボタンがクリックされたときに、インデックスページのURLではなく、ブログエントリーのURLが反映されるようになる。＆は&に読み替えてください。

< まとめ >

最終的に、現在テンプレートページに貼り付けているコードは以下。上端揃えにするために結局Tableを使った。

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" width="130">

<a class="twitter-share-button" data-count="horizontal" data-lang="ja" data-via="Twitterのアカウント名" expr:data-text='data:title + ": "+ data:post.title' expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

</td>
<td align="left" valign="top" width="115">

<a class="google-buzz-button" data-button-style="small-count" data-locale="ja" expr:data-url="data:post.url" href="http://www.google.com/buzz/post" title="Google バズに投稿"></a>
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript"></script>

</td>
<td align="left" width="110">

<iframe allowtransparency="true" expr:src=""http://www.facebook.com/plugins/like.php?href=＆quot; + data:post.url + ＆quot;&layout=button_count&show_faces=false&width=90&action=like&colorscheme=light&height=21"" frameborder="0" scrolling="no" style="border: none; height: 21px; overflow: hidden; width: 100px;"></iframe>

</td>
</tr>
</table>