はてなブログの記事一覧を無限スクロールさせる(オートページャー)

人力検索で「はてなブログのTOPページにて記事の表示数を増やしたい」という質問が出ていて、表示する事はシステム上無理でも、オートページャーを付ければ良いじゃない(とりあえず)。という事でjQueryでガリガリとロードするやつを作ったエントリー。

q.hatena.ne.jp

はてなブログにオートページャーを付ける

時間がある時に書き直そうと考えています。こちらのコードを利用する場合は、その点を理解したうえでご利用ください。
現時点では、予めjQueryのロードが必要です。

デザインのフッタ辺りに以下のコードを貼り付けます。

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
//はてなブログにオートページャを付けるやつ psn.hatenablog.jp
$(function () {
	$("#main").append('<div id="loadelement" data-loading="false"></div>');
	$(window).on('scroll', function () {
		var loadElem = $("#loadelement")[0];
		var target = $(loadElem).offset().top - $(document).scrollTop() - $(window).height();
		if (target < 10 && loadElem.dataset.loading != "true") {
			loadElem.dataset.loading = true;
			$(loadElem).text("読み込み中");
			var nexturl = $('.pager-next a:not([data-loaded="done"])[rel="next"]')[0];
			if (typeof (nexturl) === 'undefined') {
				//最後のページ
				$(loadElem).before('<div>続きはありません</div>');
				$(loadElem).text("");
				return;
			}
			nexturl.dataset.loaded = "done";
			$.ajax({
				url: nexturl.href,
				type: 'GET',
				dataType: 'html',
			})
				.done(function (data) {
					$(loadElem).before('<div>次のページを読み込みました</div>');
					$(loadElem).before($('#main', $(data)).html());
					loadElem.dataset.loading = false;
					$(loadElem).text("");
					Hatena.Locale.setupTimestampUpdater(); //記事の更新時間の再表示
					FB.XFBML.parse(); //facebook
					gapi.plusone.go(); //google plus1
					twttr.widgets.load(); //Twitter
				})
				.fail(function (data) {
					//オートロードを止める
					//loadElem.dataset.loading = true;
				});
		}
	});
});
</script>