先日書いた"はてブ数"をテキスト表示するJavaScriptがカッチョ悪かったのでシンプルに書きなおしてみた。

先日、公式のはてブ数表示がカッチョ悪いとこき下ろしながら、自分の書いたコードが長くてカッチョ悪かったので、@akio0911さんに再度アドバイスもらってシンプルにしてみました。

真・はてブ数をテキスト表示するJavaScript+HTMLコード。

headに突っ込むJavaScriptコード

<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>

headに突っ込むCSSコード

<style type="text/css">
<!--
.hatenaA{
	background: #fff0f0;
	color: #ff6666;
	font-weight: bold;
}
.hatenaB{
	background: #ffcccc;
	color: #ff0808;
	font-weight: bold;
}
-->
</style>

はてブ数を表示させるHTMLコード

<script type="text/javascript">var url = "はてブ数を表示したいURL";</script>
<script type="text/javascript" src="http://api.b.st-hatena.com/entry.count?url="はてブ数を表示したいURL&callback=hatebTxt"></script>

表示例：Controlキーを使いこなせばMacの作業効率は恐ろしく上がる! 覚えるべき7つのショートカットキー | 和洋風◎

ブログに貼り付ける新着エントリーリストコード。

注意：headには上のと同様のJavaScriptとCSSを貼りつけてください。

MovableType

<MTEntries lastn="10">
<script type="text/javascript">var url = "<$MTEntryPermalink$>";</script>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> <script type="text/javascript" src="http://api.b.st-hatena.com/entry.count?url=<$MTEntryPermalink$>&callback=hatebTxt"></script>
</MTEntries>

WordPress

<?php $myposts = get_posts('numberposts=10&orderby=post_date'); foreach($myposts as $post) : ?>
<script type="text/javascript">var url = "<?php the_permalink() ?>";</script>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a> <script type="text/javascript" src="http://api.b.st-hatena.com/entry.count?url=<?php the_permalink() ?>&callback=hatebTxt"></script>
<?php endforeach; ?>

Chrome KeyConfig用にも作ってみた。

超個人的ですが、自分用にChrome KeyConfig用も作ってみました。

javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value='関連：<a href="'+location.href+'" target="_blank">'+document.title+'</a> <script type="text/javascript">var url = "'+location.href+'";</script><script type="text/javascript" src="http://api.b.st-hatena.com/entry.count?url='+location.href+'&callback=hatebTxt"></script><br />';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()

表示例：1円も使わずMacを高速化出来る8つの方法。 | 和洋風◎
設定方法：ブロガー必須！のChromeエクステンション「Chrome Keyconfig」の設定方法

というわけで、

前のバージョンは、処理をリンクを作るたんびにいれていたので非常に長くなってしまいましたが、今度のは処理はheadに突っ込むカタチになり、2行のHTMLを突っ込むだけで、はてブ数を表示させることが出来るようになりました。

HTMLソースもグッとスマートになると思うのでぜひお使いくだしあ。でわでわ。