Bloggerの人気の投稿にTweet＆はてブカウンターを表示させる方法

右の画像のように人気の投稿にTweetカウンターと
はてブカウンターが表示されていたら、
どれくらい人気なのかわかりやすくていいですね。
見に来てくれた人も人気の具合がわかって便利ですし、
凄く人気ならその記事に興味を示してくれるかもしれません。

ということでBloggerの人気の投稿をカスタマイズしましょう。

Blogger設定画面
↓
テンプレート
↓
HTMLの編集
↓
ウィジェットのテンプレートを展開にチェック
↓
エディタなどで popular-posts を検索
↓
人気の投稿で選択されている設定によって４パターンに分かれます。

1. 抜粋/サムネイルなし
2. 抜粋のみ
3. サムネイルのみ
4. 抜粋/サムネイル両方

しかし、やることは基本的には全て同じです。
自分の設定に当てはまるパターンを探して、このリンクタグを見つけます。

<a expr:href='data:post.href'><data:post.title/></a>

上のリンクタグの直後に以下のコードを追加します。

<div class='item-counter'>
<a expr:href='"http://tweetbuzz.jp/redirect?url=" + data:post.href'><img expr:src='"http://tools.tweetbuzz.jp/imgcount?url=" + data:post.href'/></a>
<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.href'> <img alt='はてブ' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.href'/></a>
</div>

後はお好みで item-counter クラスのCSSを指定してください。

関連リンク
TweetBuzz - Tweetカウンター
はてなブックマーク ＞ ヘルプ ＞ 自分のブログに「○○users」を表示する

Bloggerの記事フッターに各種ソーシャルボタンを設置する方法

はてなブックマーク、Facebook、Twitter、Google +1のボタンを設置したいと思います。

Blogger設定画面→テンプレート→HTMLの編集→ウィジェットのテンプレートを展開にチェック
まずははてなブックマーク、Twitter、Google +1のScriptタグを</body>の直前に置きましょう。
コードの部分をダブルクリックすると全選択できるのでコピーして下さい。

<script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>{lang: 'ja'} </script>
...
</body>

次に記事フッター(post-fotter)の下辺りに以下のソースを追加しましょう。

<div class='post-footer'>
...
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:data-hatena-bookmark-title='data:blog.title + ": " + data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' width='20'/></a>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
<a class='twitter-share-button' data-via='' data-count='horizontal' data-lang='ja' expr:data-text='data:blog.title + ": "+ data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<g:plusone expr:href='data:post.url' size='medium' />

一行目：はてなブックマーク(はてなブックマークボタンの作成・設置について)
二行目：Facebook(Like Button - Facebook開発者)
三行目：Twitter(data-viaをあなたのアカウントに設定する必要がある)(Twitter / Twitterボタン)
四行目：Google +1(+1 ボタン)

関連：DevAchieve: ツイートボタンをカスタマイズして「@～さんから」を非公式RT形式にする