2011.01.07 追記
ブログパーツの最新版は、「Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ 」のエントリを参照してください。
この記事のテーマのすぐ横に、
が表示されているかと思いますが、このようにアメーバブログで記事ごとにはてなブックマークへ登録するボタンと登録数を表示するブログパーツを書いてみました。
記事ごとに自動的に表示されるので、エントリごとにタグを埋めたりする必要はありません。
このブログパーツは、自由に利用したりカスタマイズしていただいてかまいません。
ただし、設置やカスタマイズするに当たっては自己責任でお願いします。
Amebloにはてブの登録ボタンを配置するJavaScript
書き方は、下記のような感じ。
特に、自分のブログに貼り付ける際にカスタマイズする必要はありません。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script>
$(document).ready(function(){
var entries = $(".foot a:contains('記事URL')");
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 height="12" width="16" border="0" alt="はてなブックマークに追加" src="http://b.hatena.ne.jp/images/append.gif " /></a> <a href="http://b.hatena.ne.jp/entry/' + url + '" target="blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/' + url + '" /></a>';
$(".theme", "div.entry").eq(i).append(' <span>' + hatena_btn + '</span>');
}
})
</script>
記事ごとに、ブックマークボタンとその記事のブックマーク数（ただし、1User以上登録されてないと表示されない）が表示されます。
上記のJavaScriptを「フリープラグイン」の箇所（「ブログを書く」＞「サイドバーの設定」＞「フリープラグイン」の編集）に貼り付ければ利用できます。
はてなブックマークボタン設置用ブログパーツの解説
とりあえず簡単な解説を。
ブログパーツ自体は、jQueryを利用して書いています。
昔、AmebaではjQueryがそのまま使えてた記憶があるんですが、ソースを見てたらどうも読まれて内容なので、GoogleにホストされているｊQueryを使ってみました。
- GoogleでホストされているjQueryを利用する
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
次に、記事ごとのパーマネント（固定）リンクを取り出しています。
これは、記事のフッターに付いている「記事URL」というリンクにあるので、その数を取り出して、その数だけループしてその記事のブックマークボタンを設置しています。
- 記事のパーマネントリンクを取り出し
var entries = $(".foot a:contains('記事URL')");
最後に、はてなブックマーク用のボタンを用意しつつ、各記事のテーマの位置に、そのボタンのHTMLを追加していっています。
- 記事ごとにはてなブックマークボタンを追加
$(".theme", "div.entry").eq(i).append(' <span>' + hatena_btn + '</span>');
ブログパーツをカスタマイズする
今回のブログパーツは、各記事のテーマの横にボタンを配置するものですが、この位置が気に入らない場合は、別の位置にも配置可能です。
編集箇所は、下記の位置のコードを別のものに置き換えてください。$(".theme", "div.entry").eq(i).append(' <span>' + hatena_btn + '</span>');
$(".date", "div.entry").eq(i).append(' <span>' + hatena_btn + '</span>');
$("h3.title", "div.entry").eq(i).append(' <span>' + hatena_btn + '</span>');
$(".foot", "div.entry").eq(i).append(' <span>' + hatena_btn + '</span>');
2010.07.05 追記
フッターに付けるためのスクリプトに誤りがあったため修正しました。
ブログ生活がより楽しいものになれば幸いです！
関連記事
Amebaに「なうで紹介」と「mixiチェック」ボタンを追加してみたよ
Amebloに貼り付けていた、はてなブックマークボタンを更新してみたよ
ReTweet数を表示できるTopsyブログパーツをAmebloに張ってみたよ
[jQuery] 外部JavaScriptファイル読込みに関する考察
GO2WEB20のTwitterバッチをAmebloにつけてみた。と、IE対策方法
Amebaブログに「Twitterへ投稿ボタン」を設置してみたよ