Ajax+pushStateでページ遷移したときにDISQUSを更新する方法

またですが、Ajax+pushStateでページ遷移させたときの、外部サービス対応です。

今回はDISQUSをAjax対応にさせます。

このサイトでも一瞬だけDISQUSを採用していたのですが、読み込みが遅いので撤去しちゃいました。ただ、コメントとSNSを簡単に連携できたり、サイトに寄せられているコメントをまとめて見れるコミュニティ機能や、そもそもコメントのデザインをしなくてもカチッときれいなコメント欄が使えるようになるメリットがあります。たくさんコメントが付けられるようなブログだと価値がある気がします。

そのDISQUSですが、公式サイトのドキュメントがすごくシンプルです。それだけでできるのかと期待して実装すると、確実に泣けます。

ということで、何度か泣いた人の解説。すでにDISQUSのアカウントとショートネームを取得済みという前提で、次のコードでできます。

example.html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/js/disqus.js"></script>
<script type="text/javascript" src="/js/example.js"></script>

<!-- DISQUSを入れたいところに次のブロック要素を置いておく -->
<div id="disqus_thread"></div>

disqus.js

var disqus_shortname = "DISQUSのショートネーム";
var disqus = function(thisProt,url,identifier,request,pageTitle){
	$.getScript("http://" + disqus_shortname + ".disqus.com/embed.js", function(){
		var disqus_identifier = thisProt + "//" + url + "?" + identifier;
		var disqus_url = request;
		var disqus_title = pageTitle;
		DISQUS.reset({
			reload: true,
			config: function () {
				this.page.identifier = disqus_identifier;
				this.page.url = disqus_url;	
			}
		});
		return;
	});
}

example.js

var disqusSet = function(){
	if($("#disqus_thread")[0]){
		thisProt = location.protocol;
		url = location.host;
		request = location.href;
		identifier = $("ページ固有の英数字がついてる要素").attr("ページ固有の英数字がある属性");
		//固有の英数字がついてる要素からIDを取得。これがDISQUS側のページIDになります。
		//例えば $(".post").attr("id") とか。なんでもいいです。
		pageTitle = $("h1").text();
		//ページタイトルっぽいものがついてる要素からページタイトルを取得。なんでもいいです。
		disqus(thisProt,url,identifier,request,pageTitle);
	}
}
var changePage = function(){
	after =　function(){
		history.pushState("","","新しいページの相対パス");
		//アドレスバー変更
		disqusSet();
		//disqusSetを実行
	}
	$("読み込んだ内容を格納する要素").load("http://読み込みたいページのURL " + "読み込みたい要素",after);
	//Ajaxで一部更新
}

$(document).on("click","a",changePage);
//すべてのa要素をclickしたときにchangePageを実行
$(window).bind("load",disqusSet);
//画面がロードされたときにもdisqusSetを実行

これで、Ajaxで読み込んだ（さらにpushStateでアドレスバーを変更した）ページにも正常にDISQUSが付きます。

いかがでしょう。参考になれば幸いです！