Using DISQUS Comments for Social Commenting on Your WordPress Site

DISQUS powers the comments system of many blogs, include some high-profile ones. DISQUS has a range of advantages, including better spam prevention and better user happiness from the need for only a single, universal login that can be used across all the sites that use DISQUS. Today, we're going to take a look at the advantages and disadvantages of DISQUS, how to use it with WordPress (spoiler: it's incredibly simple) and even some basic customization with CSS.

The Pros and Cons of Using DISQUS

Where alternative comment systems like Facebook's target specific blog types, DISQUS can be used almost universally across different blogs. Generally, it's used most by the traditional format sites, but is supported by a bunch of useful advantages making it a kickass solution for any site.

Definitely my favorite fact about DISQUS is everything is handled away from your site. That's a definite plus for security, but also for spam as third-party services like DISQUS generally offer better spam prevention. DISQUS uses Askimet, so it's not too unsimilar to the regular WordPress comments, but I've definitely experienced less spam in using it.

DISQUS also integrates really well. When you use DISQUS, think of adding your site to a community who all share a common comments system. My site uses this comments system, meaning that I have a single account for posting and moderating comments there, and posting on MacStories, Cult of Mac and all the other sites that use DISQUS. This is great for me as a user, since I retain my identity without having a million different accounts to manage on a per-site basis.

Still on the theme of integration, DISQUS is highly customizable. Most of the time, DISQUS looks great on your website, but you can always opt for another template, manipulate it with some CSS or buy in to their paid service and design your own. We'll look into customization a little later in the article.

While there are certainly more advantages, there are also a handful of cons against using DISQUS. For fairness' sake, and so you can make a better decision, let's take a look at them.

The biggest problem third-party services face is search engine optimization. Search engines don't generally read DISQUS that well, meaning some pages that are linked aren't followed. There are ways around that, but it's definitely not as simple as using comments natively.

Additionally, if DISQUS goes down, so does a major part of your site which could be disastrous for some. Nevertheless, I'll always recommend DISQUS to most people, so let's get started!

Installing DISQUS

I don't guess I need to explain to many members of this audience how to install a plugin. The best way to install DISQUS is to use the plugin because it makes the whole process easy and a lot more seamless. When you use the plugin, DISQUS figuratively swaps out the <?php comments_template(); ?> function to include a DISQUS thread instead. So, wherever you would normally include your comments file, WordPress will
automatically replace that with DISQUS. It's literally that simple.

The plugin is, by no doubt, the most seamless method of integrating DISQUS. However, if you want, you can use the universal code to embed although it's not that recommended and I'm going to leave that out of this tutorial to keep things simple.

Unless you disable it, DISQUS will sync with WordPress via the plugin (the universal code won't work). This means that comments can be stored within both WordPress and on DISQUS, giving you a nice exit route should you want to ditch DISQUS at some point in the future.

Configuration

Naturally, DISQUS has some options for you to choose from. There are some plugin-specific ones, but these generally relate to the syncing process and are more of a troubleshooting plan.

Additionally, with every DISQUS account, there's options you can choose to manipulate the functionality of your installation. These are very straightforward and generally revolve around limiting certain features such as choosing whether to offer media attachments, and choosing the requirements for commenting.

Luckily for us, all those options are handled from the DISQUS site and don't require any additional coding so there's little for me to talk through.

Comment Count

Displaying the comment count can actually be a tricky thing. In most cases, DISQUS will take the place of the <?php comments_number(); ?> function and it will work just fine. However, in some cases, it just won't and your first port of call is to choose to output JavaScript in the footer under Advanced Options in the plugin's settings.

DISQUS in Play

What you see above is DISQUS installed as a WordPress plugin on a live site. It's been setup in the regular way through the DISQUS options page with no additional styling added in a stylesheet.

If we take a quick look around, we can DISQUS has five main sections: the buttons, the comment form, the comments thread, the links and the reactions. We can manipulate each one of these by using both the DISQUS settings page, and applying some overwriting CSS styles. Swiftly moving on, let's look at how to do just that.

Styling DISQUS

We've now covered the pros and cons of using DISQUS and briefly looked at installing it and working with WordPress. Let's now move on to look at how we can style DISQUS to better fit our theme.

DISQUS itself can be themed, and ships with two default themes: Houdini and Narcissus. These come with the free package. Should you choose to pay for DISQUS (either $299 or $999 per month), you do get the advantage of the advanced theme editor. However, since this is likely not a popular choice, we won't touch on it much. However, should you use the custom theme editor, you'll find it incredibly simple to use and very much alike themeing with Tumblr.

Instead, we'll look at how to style a regular DISQUS installation using the default Houdini theme with some CSS that can be just placed into your stylesheet.

Identifying the Classes

In order to work with DISQUS and style it, we're going to have to pick out the CSS classes that make it up.

#dsq-content - This is effectively the container that the entire DISQUS embed is handled in. Any styles you apply to this will apply universally throughout DISQUS.
.dsq-comment-header - This is the comment header, where the commenters name is shown.
.dsq-comment-message - You guessed it! This is the comment message, and any styles added to this class only applies to the comment itself.
#dsq-content h3 - While technically not a class, styling this tag will style all the headings used throughout DISQUS, such as that denoting the number of comments and the one above the new comment text area.
#dsq-global-toolbar - Inside this ID is the global toolbar, aka the row of buttons that reside atop the comment box.

Styling Text

Perhaps the main thing you will want to change is the text, to better match the size and colour of the surrounding theme. This can be achieved by styling the container that the entire DISQUS embed is handled in.

#dsq-content {
    color: #333333 !important;
    font-size: 1em !important;
}

That's going to change every bit of text throughout the entire DISQUS embed. Naturally, you can apply additional styles to the dsq-content id to better compare it to your WordPress theme.

Alternatively, we can style specific parts of text, such as the commenter details or the headings. In most themes, we'll likely want to share a common style between the headings in the content and the headings in the comments. This can be achieved by simply changing the class.

#dsq-content h3 {
    color: #666666 !important;
    font-size: 1.2em !important;
}

Hiding Elements

There's also cases in which you'll want to disable parts of the DISQUS embed. On my site, I prefer to hide the headings to give it a cleaner look. This is, again, very simple to achieve just by setting the display style to none.

#dsq-content h3 {
    display: none;
}

Wrap-up

DISQUS can be a very powerful addition to a blog, and can provide numerous benefits to both the bloggers and the users (see the benefits section). Although you might experience a few problems, playing about with the options under Advanced Options will generally set DISQUS straight and provide a seamless experience with the comments system. Plus, with the easy nature of adding styles with CSS, it's not difficult to customize DISQUS to suit any site you want it to.

HIGHLIGHTS OF THE DAY