Advertisement
Articles

Using DISQUS Comments for Social Commenting on Your WordPress Site

by

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.

Related Posts
  • Code
    Articles
    Introduction to WordPress App ThemesApp theme 400
    With the increasing growth rate of WordPress powered websites, the need for WordPress themes is rising. Multi-purpose themes are becoming highly popular among website owners. Many existing themes are built mainly to address blog functionality. But with the growth of WordPress web application development, we are in need of specialized themes for different purposes. These themes are known as app themes. In this article, we going to familiarize with the concept of app themes and their usage in real world.Read More…
  • Code
    Plugins
    Choosing the Right Plugin for Your Next WordPress ProjectPlugin icon 400
    Ever needed a plugin for your WordPress-based website? Of course! After all, that's how WordPress is extended, isn't it? If you're a beginner to WordPress, or even a power user, then you're likely familiar with the WordPress plugin repository, premium plugins, and so on. The thing is, there are so many plugins available that do many of the same things, it can be difficult to determine which is best suited for your particular needs. This raises the question: What do you do to find the perfect plugin for a particular need? In this post, we're going to see how to find the best plugin for exactly that.Read More…
  • Code
    WordPress
    5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand OutCssblog
    In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Releasing Your ThemeCreating wordpress theme from html 400
    If you've been following this series you now have a working WordPress theme. Your theme has a number of template files, including a page template and an archive template, and also has featured image support.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…