みなさんお気づきのとおり、遅ればせながら、ようやくレイアウトテンプレートの仲間入りをしました。そこで、自分のブログをカスタマイズしていくついでに、その記録をこちらに掲載していこうと思います。
最初は、投稿のフッターにはてなブックマーク件数を表示する方法。
(はてなのヘルプ「
自分のブログに「○○users」を表示する」に Blogger についての説明もあるんですが、情報が古く、現在 Blogger で一般に使われているレイアウトテンプレートでの導入方法は書かれていません。)
導入方法
1.Blogger 管理画面「デザイン > HTML の編集」ページで、「ウィジェットのテンプレートを展開」にチェックを入れます。
2.投稿フッター部分
<div class='post-footer'>
を見つけ出し(ブラウザの検索機能を使うと便利です)、コメント件数表示部分
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</b:if>
</span>
のすぐ後に
※
<span class='hatena-bookmark'>
<a expr:href='"http://b.hatena.ne.jp/entry/add/" + data:post.url'><img alt='このエントリーをはてなブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをはてなブックマークに追加' width='16'/></a>
<a expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url' target='_blank'><img expr:alt='"はてなブックマーク - " + data:post.title' expr:src='"http://b.hatena.ne.jp/entry/image/" + data:post.url' style='border: none;' expr:title='"はてなブックマーク - " + data:post.title'/></a>
</span>
という文字列を挿入して「テンプレートを保存」します。これだけ。ぜひお試しくださーい。
追記(2011-05-05):
その2
記事を公開した後で、こんなページを発見。
新しい画像が用意されていたんですね。これを Blogger に表示させるコードを考えてみました。こっちの方がいいかも…という人は、手順2の※マークのコードを
<span class='hatena-bookmark'>
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' 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' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
</span>
に換えて、貼り付けてください。
その3
さらにこんなページも発見。
今度は画像ではなく、はてなのブックマーク件数取得 API を JSONP でたたいて、JavasScript で書き出す方式です。通常の文字列で表示されるので、コメント件数とかの表記と統一させやすいかと。こう表示させたい場合、手順2の※マークのコードを
<span class='hatena-bookmark'>
<a expr:href='"http://b.hatena.ne.jp/entry/add/" + data:post.url'><img alt='このエントリーをはてなブックマークに追加' height='12' src='http://b.hatena.ne.jp/images/append.gif' style='border: none;' title='このエントリーをはてなブックマークに追加' width='16'/></a>
<a expr:href='"http://b.hatena.ne.jp/entry/"+data:post.url' target='_blank'><script expr:src='"http://api.b.st-hatena.com/entry.count?url=" + data:post.url + "&callback=document.write"' type='text/javascript'/> users</a>
</span>
に換えて、貼り付けてください。
関連(クラシックテンプレートの場合):