ソーシャルブックマークの「はてなブックマーク」。ここで自分のサイトの記事がどれだけブックマークされているかわかるのですが、
それをブックマーク数が多い順で並べる方法をJSで試したので、ご紹介です。
既存のブログパーツ
わざわざJSを使わなくても、ブログパーツを使えば
簡単に設置ができるのですが、デザインの柔軟性にはかけるのでJSで簡単にできないかなと思った次第です。以下がブログパーツを設置したサンプルです。
APIを呼び出す
まずはその人気エントリーを取得するAPIのアドレスが以下になります。
http://b.hatena.ne.jp/entrylist/json?sort=count&url=[サイトのURL]&callback=hatebuCallback[サイトのURL]に自分のサイトのアドレスを。callbackの後ろはあとで書くJSのfunctionの名前に合わせます。ちなみにアクセスして中身を見るとわかるのですが、件数は最大10件で取得できる項目が
- link ページのアドレス
- count ブックマーク数
- title ページのタイトル（文字数が多いと途中で…になる。）
の3つです。
実際に表示させる
データは読み込めたので、これを実際に整理して表示させます。
まずは読み込む先のHTMLを以下にしました。
<div id="hatebuList"></div>そして、JSはこんな感じ。jQuery使ってますので先に読み込んで下さい。今回はdiv>ul>liになるようにしました。
<script>
function hatebuCallback(data){
if(data.length == 0){
$("#hatebuList").append("<p>データを読み込めませんでした。</p>");
}
else {
$("#hatebuList").append("<ul>");
for(i = 0 ; i < data.length; i++){
$("#hatebuList ul").append('<li><a href="' + data[i].link + '" target="_blank">' + data[i].title +'</a>（<span>' + data[i].count + '）</span></li>');
}
}
}
</script>functionの後ろをcallbackの箇所と合わせます。ifの{}中が読み込めなかった用。elseが読み込めた場合の処理。以下がそのサンプルページです。
これで自由な形で出来るので、デザインの幅が広がるかと思います。
参考サイト
おまけ
作ろうと思ったキッカケが、「ブログパーツよりJSで作った方が読み込む速度が早くなるんじゃ」だったのですが、
両方を比べてみたら、そんなに変わらなかったです。作り方が悪いとかあるかもしれませんが。
コメント