アメブロにはてぶボタンを設置する | アメブロ解体新書

アメブロ解体新書

Amebaブログウォッチング・・・

<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.7');
</script>
<script>(_JQ17_=jQuery)(function(){$=jQuery=_JQ17_;});</script>
<script>
$(document).ready(function(){
var entries = $('div.skinArticleHeader2 h1 a');
for (i = 0; i < entries.length; i++) {
var url = entries[i];
var hatena_btn = '<a href="http://b.hatena.ne.jp/append?' + url + '" target="_blank"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" /></a> <a href="http://b.hatena.ne.jp/entry/' + url + '" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/' + url + '" /></a>';
$('div.articleExLinkArea').eq(i).prepend('<span>' + hatena_btn + '</span>');
}
})
</script>


一応、当ブログで動作確認したので公開します。

はてな関連のapiはけっこうアップデートされてるので気合を入れて作ればもっと完成度は上がるんですけど・・・

5行目まではJQueryのおまじないです。

記事タイトルのurlを引数にして記事下のソーシャルボタン(div.articleExLinkArea)の要素内の最初に挿入してます(.prepend)。

一番最後を弄れば挿入場所をいろいろ変更できます。

アメブロにはデフォでなう、mixi、twitter、facebookのソーシャルボタンがついてるのではてぶの他はググタスくらいでしょうか?

アメブロにはフリープラグインの文字数制限があるので切り詰めたつもりですが、「もっと短くできるよ」って方はお気軽にコメしてください。

検証のために自分のブログに自分でブックマークしたんですけどちょっと恥ずかしいですね。しかし、はてぶ数がなかなか反映されないんであせりました。

追伸 アメブロってめったにはてぶされないので意味無いじゃんってことは言わないこと・・・