はてなブックマーク数が多い順に自分のブログの人気記事を一覧にする方法
はてなブックマークの数が多い順に記事を一覧する jQuery のコード書いてみました。私のブログのサイドバーにホットエントリーという名前の項目がありますが、これははてブ数でソートして一覧にされています。
とても簡単で30秒くらいで出来ます。
はてブでの人気記事一覧を作る JS ファイルを作る
以下のコードを任意の名前で JS ファイルとして保存してください。変更点は var siteurl と var id の部分のみですね。自分のブログのドメインをスラッシュありで入れて、id には一覧を表示するためのボックスを入れてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
var j$ = jQuery; j$(function() { var siteurl = 'http://weble.org/'; var id = 'hotEntry'; j$.ajax({ dataType: "jsonp", data: {'sort':'count', 'url':siteurl}, cache: true, url: "http://b.hatena.ne.jp/entrylist/json", success: function (data) { var hotEntry = document.getElementById(id); var content = ''; j$.each(data, function(i,item) { if(item.link != siteurl) { content += '<li>'; content += '<a href="http://b.hatena.ne.jp/entry/' + item.link + '" class="resentHatebu">'; content += '<img src="http://b.hatena.ne.jp/entry/image/small/' + item.link + '"></a>'; content += '<a href="' + item.link + '">' + item.title + '</a>'; content += '</li>'; } } ); hotEntry.innerHTML = '<h2>Hot Entry</h2><ul>' + content + '</ul>'; } }); });
作った JS ファイルを読み込む
ページフッタで良いので、以下のようにコードを読み込みましょう。jQuery が既に読み込まれているなら1行目のコードは必要ないです。適当に書いたので全ての環境で動くのかは分かりませんが、ぜひどうぞ!
1 2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="http://weble.org/wordpress/wp-content/themes/weble_v4/js/weble.hatena.js"></script>
あとコードが結構私のサイト向けになっているので、その点に関しては修正してみてください。HTML 部分のみだったら見れば分かると思いますので頑張ってみてください。
関連記事
- jQuery で Ajax でデータを POST 送信する際にオブジェクトで値を渡すと自動的にエンコードしてくれる
- jQuery と prototype.js のコンフリクトを回避する方法
- Google AJAX Feed API を使って Twitpic の画像ギャラリーを非同期で作る
- かなり自由に画像を並べてクリックで左右にスライドできる jquery.clickSlide.js
- jQuery で世界一簡単に画像を自動スライドすることができる jquery.simpleSlide.js
- PHP が使えると Ajax との合わせ技で jQuery が凄く楽しくなる
- RSS 2.0 を手動で作成してみよう
- Cookie を jQuery ならたった一行のコードで発行したり読み込んだりできる
- Twitter で記事について言及したツイートを30秒で誰でも簡単に取得して一覧にできる jQuery プラグイン
- PHP でシリアライズしたデータが壊れてしまう場合は base64_encode をする
コメント
コメントは受け付けていません。