2010年9月16日木曜日

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>

2 件のコメント :

  1. はじめまして!

    ツイート数の表示されている噴出しの閉じ口がずれているのが気になって「Blogger ツイートボタン」で検索していたら辿り着きました。

    目的は違ったんですが、エントリータイトルなどの件、参考になりました!

    噴出しの閉じ口は「水平方向にカウント数を表示」を使ってると、ずれちゃうことが多いみたいですね。

    でわでわ、ありがとうございました~!

    返信削除
  2. 少しでも参考になれば嬉しいかぎりです。
    並びをズレないようにするるのは結構大変ですよね。

    返信削除