Running Javascript functions after Disqus has loaded

Disqus is a 3rd party hosted Javascript comments system for websites which I use on several of my websites including this one. Disqus has an undocument set of callback functions which can be called after it has finished loading, when new comments are posted, etc.

Update for Disqus 2012 (June 15th 2012)

The disqus_config() function is still called, and the callbacks object still exists, but setting them to a function does not appear to do anything with the recently upgrade to Disqus called Disqus 2012.

Therefore, the rest of the content in this post is probably no longer relevent.

Undocumented – use with care

Because the functions referred to in this post appear to be undocumented, they are subject to change at any time and are presumably not officially supported. It pays to use these functions with care, and to be aware that they may change or be removed from the Disqus system at any time.

Disqus callbacks

There’s a page in the Disqus knowledge base which answers the question "How can I capture Disqus commenting activity in my own analytics tool?" and it’s from here we can see the existence of both a disqus_config() function and the availability of callbacks.

The disqus_config function

The disqus_config function looks like this and should appear in your Javascript before the Disqus Javascript is added to the page (the code for which is here).

function disqus_config() {
    // configuration options here
}

Callbacks available

I ran the following code in Chrome within the disqus_config function to find out all the available callbacks:

console.log(this.callbacks);

And this was logged to the console, showing which callbacks are available:

Object
- afterRender: Array[1]
- onInit: Array[0]
- onNewComment: Array[0]
- onPaginate: Array[0]
- onReady: Array[0]
- preData: Array[0]
- preInit: Array[0]
- preReset: Array[0]
- __proto__: Object

I’ve only tried out onReady and afterRender myself and these two are triggered when the Disqus HTML is ready but not yet rendered (onReady) and after the HTML has rendered in the page (afterRender).

Adding a callback function to Disqus

The following example adds a callback function which will be called when the HTML has been rendered but not yet displayed on the page:

function disqus_config() {
    this.callbacks.afterRender = [function() {
        // your code here
    }];
}

I’m currently using that code on my New Zealand Running Calendar website to inject some additional HTML into the Disqus content. It’s added to the HTML before it’s rendered, so when the template is displayed my additional HTML is already there. I’ll show what I did and the end result in my next post.