以前、ブログの記事一覧などにはてなブックマーク数を表示させる方法を紹介しましたが、この方法だとはてブ数が画像で表示されるので、横が揃わないとか色々と困ることがあるかもしれません。
そんな時のために、はてブ数を画像ではなくテキストで表示する方法について紹介したいと思います。なお、本記事では、「Popular Posts」「Recent Posts Plus」「Simillar Posts」「WP-PostViews」の記事一覧への導入例を紹介いたします。
<head>へコードを追加する
まずは以下のコードを利用しているテーマの header.php 内に追加しましょう。
<script type="text/javascript">
function hatebTxt(count){
if(count == 0){
return;
} else {
document.write("<a href=http://b.hatena.ne.jp/entry/");
document.write(url);
if (count < 10) {
document.write(" class='hatenaA'");
} else {
document.write(" class='hatenaB'");
}
document.write(" target='_blank'>");
if (count == 1) {
document.write(count+' user');
} else {
document.write(count+' users');
}
document.write("</a>");
}
}
</script>
スタイルシートの変更
続いて、スタイルシート(style.css)に以下のコードを追加します。
.hatenaA{
background: #fff0f0 !important;
color: #ff6666 !important;
font-weight: bold !important;
}
.hatenaB{
background: #ffcccc !important;
color: #ff0808 !important;
font-weight: bold !important;
}
各ウィジェットへの導入例
Popular Posts
[設定] – [Popular Posts] – [Output] にある「Output template」に以下のコードを貼り付けます。
<li><a href="{url}" title="{title}">{title}</a> <script type="text/javascript">var url = "{url}";</script><script src="http://api.b.st-hatena.com/entry.count?url={url}&callback=hatebTxt"></script></li>
Recent Posts Plus
[外観] – [ウィジット] から「Recent Posts Plus」を好きな場所にドラッグ&ドロップで移動させます。それから、「Widget Output Template」に以下のコードを貼り付けます。
<li><a title="{TITLE_RAW}" href="{PERMALINK}">{TITLE}</a> ({DATE[Y.m.d]}) <script type="text/javascript">var url = "{PERMALINK}";</script><script src="http://api.b.st-hatena.com/entry.count?url={PERMALINK}&callback=hatebTxt"></script></li>
Simillar Posts
[設定] – [Simillar Posts] – [Output] にある「Output template」に以下のコードを貼り付けます。
<li><a href="{url}" title="{title}">{title}</a> <script type="text/javascript">var url = "{url}";</script><script src="http://api.b.st-hatena.com/entry.count?url={url}&callback=hatebTxt"></script></li>
WP-PostViews
[設定] – [PostViews] にある「Most Viewed Template」 に以下のコードを貼り付けます。
<li><a href="%POST_URL%" title="%POST_TITLE%">%POST_TITLE%</a> - <script type="text/javascript">var url = "%POST_URL%";</script><script src="http://api.b.st-hatena.com/entry.count?url=%POST_URL%&callback=hatebTxt"></script></li>
あとがき
やっぱりはてブ数が多い記事というのは気になりますし、実際良記事であることが多いので、はてブ数を表示させることで訪問者の興味を引くことができると思います。
順番にコードを貼り付けていくだけで、簡単にはてブ数をテキスト表示することができるので、ぜひ試してみてください。