jQuery Disqus Plugin

jQuery Disqus Features

This is an update/elaboration of an old jQuery Disqus plugin. The Disqus API is changing very rapidly, so it's important to have an up-to-date plugin.

jQuery Disqus has the following features:

• Callback support for when a comment is added and/or edited.
• Optional Markdown support, so people can write like they would in StackOverflow. Uses the Showdown Javascript Markdown Library.
• Optional Syntax Highlighting support, giving commenters the power of pretty code. Uses the Google Prettify Library (which StackOverflow uses).
• Simplified support for retrieving comment and reaction counts.

Install the jQuery Disqus Plugin

jQuery Disqus has opt-in support for Markdown and Syntax Highlighting. If you have included showdown.js and set markdown: true, you will get Markdown enabled Disqus comments. If you include prettify.js and set prettify: true, your Disqus comments will be syntax highlighted. Both of these are optional.

Here's how you would set that up. Add this to your HTML head:

1
2
3
4

<script src="http://cachedcommons.org/javascripts/text/prettify-min.js" type="text/javascript"></script>
<script src="http://cachedcommons.org/javascripts/text/showdown-min.js" type="text/javascript"></script>
<script src="http://cachedcommons.org/javascripts/jquery/jquery.disqus.js" type="text/javascript"></script>
<script src="/javascripts/application.js" type="text/javascript"></script>

Then add this in your main javascript file (e.g. /javascripts/application.js):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(document).ready(function() {
  $('#disqus_thread').disqus({
    domain:     "your-domain",
    title:      document.title,
    developer:  window.location.hostname == "localhost" ? 1 : 0,
    show_count: true,
    prettify:   true,
    markdown:   true,
    iframe_css: "http://somewhere.com/stylesheets/disqus.css",
    ready: function() {
      // this is when your disqus comments finally load
      console.log("Comment count: " + $.disqus.commentCount().toString());
      console.log("Reaction count: " + $.disqus.reactionCount().toString());
    },
    added: function(comments) {
      // do something with the newly added comment divs.
    },
    edit: function(textarea) {
      // called when someone clicks the "reply" button.
    }
  });
});

That will take a node with id='disqus_thread' (div or any other node), append your Disqus comments, apply syntax highlighting, run them through the Markdown processor, and give your iframe (which just holds the textarea) custom css. It also shows how to retrieve Disqus' comment and reaction counts for the current page:

1
2

$.disqus.commentCount();
$.disqus.reactionCount();

You can also retrieve the comment and reaction counts for a list of links (say for the index page of your blog), like this:

1

$("a.my-disqus-link").disqusLink("your-domain");

The link will be rendered like this:

1

<a class="dsq-comment-count" href="http://somewhere.com/a/path#disqus_thread">10 Comments and 23 Reactions</a>

The original link's href is given some slack, and can be written like any of these:

1
2
3
4

<a href="/a/path"></a>
<a href="/a/path#disqus_thread"></a>
<a href="http://somwehere.com/a/path"></a>
<a href="http://somwehere.com/a/path#disqus_thread"></a>

In the end, they will all be replaced with the absolute url above.

Customizing Your Disqus

Here are some helpful jQuery methods to give you a head start in customizing Disqus:

1
2
3
4
5
6
7
8

// The disqus footer, where the submit comment button is
$(".dsq-post-footer");
// The comment textarea title
$("#dsq-comments-title h3");
// The comment list title
$("#dsq-new-post h3");
// The reaction list title
$("h3.dsq-h3-reactions");

You can change the title's dynamically with these selectors (also possible in their admin panel). Also see my previous post: Using Javascript and CSS to enhance the Disqus User Experience.

Let me know how you like it!