AjaxページでDISQUSを使う - CMS専門 Web開発者ブログ

オンラインコメントシステムDISQUSをAjaxサイトに設定した時のメモです。

通常は次のようなタグを貼りつけて使用します。

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

JavaScriptを使って外部のスクリプトファイルを読み込んでいます。

この時、読み込みが終わった時点で次のような処理が実行されます。

<div id="disqus_thread"></div> という要素を検出してそれをコメントフォームに書き換えています。

スクリプトファイルのなかにDOMを操作する処理も含まれています。一度だけ実行する場合は問題ありません。しかしAjaxを使って画面を遷移する時はページの再読み込みが行われません。その場合には上記の、HTML要素を検出してコメントフォームに置き換えるという処理が行われません。

HTML5のhistoryAPIやhashchangeイベント等を使う場合にはその都度DOMを手動で再構築する必要があります。

やり方

DISQUS.reset({
  reload: true,
  config: function () { 
    this.page.identifier = "newidentifier"; 
    this.page.url = "http://example.com/#!newthread";
  }
});

こんな感じのコードでDOMを再構築してくれるようです。エントリーページを遷移したあと等に実行することになると思います。

以下に実際に使用したコードを載せておきます。 CoffeeScriptを使用しています。

# disqus
if DISQUS?
  DISQUS.reset
    reload: true
    config: ->
      @page.identifier = location.pathname.substr(1)
      @page.url        = location.href
else
  window.disqus_shortname  = @config.disqus
  window.disqus_identifier = location.pathname.substr(1)
  window.disqus_url        = location.href
  jQuery.getScript "http://#{@config.disqus}.disqus.com/embed.js", ->
    window.DISQUS = DISQUS

jQueryのajaxを使ってスクリプトファイルを読み込んで実行しています。 @config.disqus にshortnameが入っています。

DISQUSではスクリプトの設定にグローバルスコープの変数を使います。CoffeeScriptでは変数が関数スコープとなるためvar を使う代わりにwindowオブジェクトに変数を入れています。

スクリプトが読み込まれると、 DISQUS オブジェクトが使えるようになります。

１回目に読み込まれた時には自動的にHTML要素を書き換えてくれます。２回目以降は DISQUS オブジェクトの reset() メソッドを使用してHTMLを書き換える指示を出します。

pushState() が実行されると location.pathname や location.href が書き換えられますので、書き換えられた新しいurlを設定しています。

jQueryのajaxを使ってスクリプトを実行した時には DISQUS オブジェクトがグローバルスコープで評価されていないようでしたので window.DISQUS = DISQUS のようにしています。