2010年2月3日水曜日

BloggerでTwitter投稿ボタンを追加するには

Bloggerのテンプレートに「Tweet This」ボタン、もしくはRTボタンを追加したいなと思い、TweetMemeのJava Scriptを使わせてもらうことにした。

TweetMemeのJava Scriptを追加する方法は以下の通り。

Bloggerにログインし、
レイアウト>HTMLの編集>”ウィジェットのテンプレートを展開”にチェックを入れる。

そして、例えばエントリーの左端にボタンを追加する場合、テンプレートのコードの中から以下の行を探し、
<div class='post-header-line-1'/>
その行の下に以下のコードを追加します。

<!-- add tweetmeme script -->
<span style='float: left; margin-right: 10px; margin-bottom: 15px;'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
tweetmeme_source ='ブログ作者のTwitterアカウント';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'></script>
</span>
<!-- add tweetmeme script -->

tweetmeme_source部分はブログ作者のTwitterアカウントを指定します。
すると、「tweet」ボタンをおしたときに

「RT @misahot 明日に向かって昇龍拳: Chrome5ではSharedObjectsが管理できるようになるようだ http://tinyurl.com/y8rjdcy」

というように、RTの@の後ろにブログを書いた自分のTwitterアカウントが表示されます。

また、tweetmeme_url = '<data:post.url/>';の下辺りにでも
tweetmeme_style = 'compact';
の記述を加えると、コンパクトサイズの表示にもなります。

TweetMemeのjsを使うと、Tweet数が見られて便利です。
Tweet数をクリックすると、Tweetしてくれた方々のつぶやきも見られます。

ただし、ボタンをおしたとき、ユーザーが初めてTweetMemeを使う場合は、そのユーザーのTwitterアカウントにTweetMemeがアクセスしていいかどうかを尋ねるダイアログが表示されます。「許可する」をクリックすれば、それ以降は尋ねられません。