Running Javascript functions after Disqus has loaded

Posted September 15th, 2011 in Javascript

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.

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.