2010/05/23

Facebook「いいね!」ボタンなどソーシャル機能追加

本Blogにソーシャルメディア対応強化のため(?)にいくつかの機能を追加しました。

 1. Facebook「いいね!」ボタン
 2. はてなブックマークの追加ボタン
 3. 関連Tweetの表示

Bloggerはここら辺の情報が少ない気がしているので、設置したソースを参考までに共有。
ブログ管理画面からレイアウト>HTMLの編集 と進み「ウィジェットのテンプレートを展開」にチェックと入れて、
<div class='post-footer-line post-footer-line-3'/>
の直前に以下のソースを挿入。
<div style='vertical-align: top'>
// はてなブックマーク
<span style='float:right; padding: 0px;'> 
<a expr:href='"http://b.hatena.ne.jp/append?" + data:post.url'><img alt='このエントリーをブックマークに追加' src='http://b.hatena.ne.jp/images/append.gif' style='border: none; padding: 0px;' title='このエントリーをブックマークに追加'/>
</a>
<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'><img alt='このエントリーを含むはてなブックマーク' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' style='border: none; padding: 0px;' title='このエントリーを含むはてなブックマーク'/>
</a>
</span>
// Facebook 「いいね」
<span style='float:right; padding: 0px;'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=90&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px; vertical-align: top'/>
</span>
// Twitterへの投稿
<span style='float:right; padding: 0px;'>
<script type='text/javascript'>
tweetcount_url = '<data:post.url/>';
tweetcount_title = '<data:post.title/>';
tweetcount_src = 'RT @obanajun: BlogPost';
tweetcount_via = false;
tweetcount_links = true;
tweetcount_size = 'small';
tweetcount_background = 'F0F0F0';
tweetcount_border = '999999';
tweetcount_api_key = '5c3bba3f5d77a46a13453091e36dc1cde4335e9299a1edeeaa3c31d193b33fda';
</script>
<script src='http://widgets.backtype.com/tweetcount.js' type='text/javascript'/>
</span>
</div>
// 関連Tweetの表示
<script type='text/javascript'>
backtweets_url = '<data:post.url/>';
backtweets_background = 'F0F0F0';
backtweets_border = '999999';
</script>
<script src='http://widgets.backtype.com/backtweets.js' type='text/javascript'/>
@obanajunとなっている部分はそれぞれに書き換えてください。Twitter関連の機能は、backtypeのWidgetを利用しました。
さてさて、今まで以上に皆様とつながれますように。


===2010/12/15追記===
本投稿にて追加した機能を外し、ソーシャルメディア連携機能は、Blogger標準の連携ボタンおよびzenbackによる表示に切り替えました。