Tutorial #38
Embed Disqus Comments Basic   2014-01-07


Allowing users to comment on a web site is a great way to engage your users and gather valuable feedback. Unfortunately they can also be a great way to pollute your site with Spam, Trolls and other undesirable elements.

Adding this capability is easy enough, as this tutorial will show. But adding a bit of code is not the end of it. Comments need to be moderated to ensure they are not inappropriate, offensive or bullying - and that takes time. In addition you need to be prepared to respond to comments so that your users feel part of a conversation - again, that takes time.

Fortunately there are several web services that make this relatively painless. You have probably used these in the web sites that you visit every day. Disqus, IntenseDebate and Livefyre are some of the best known. They all offer the same core features but differ in the look of the comments, the tools they provide for moderation, etc., and special features such commenter reputations, integration with other services, etc. Many social media players have their own commenting frameworks, of course, such as Facebook.

Disqus appears to be the most frequently used third-party system and it is the one that I chose to use for Web Apprentice. Anonymous comments are not allowed (which is usually a good thing) and disqus take care of ensuring that your users are logged into at least one of the main services, such as Facebook, Twitter, etc.

This tutorial walks you through the steps needed to get it up and running on your site. When you are done, your pages will display a comments section similar to this:

Demo 1 screenshot for this tutorial

Step by Step

1: Go to the disqus.com Sign Up page.

If you do not already have a disqus user account you will need to create one. Be sure to click the link in the confirmation email which will be sent to you.

In the page that follows, choose a Site Name (which is used in the disqus Admin pages), a unique Disqus URL (which is what you use to access the Comment Moderation tools, etc., and a Category for your site.

Image 1 for this tutorial

2: Choose the Platform on which you want to set up comments. For a general web page, we select Universal Code.

Image 2 for this tutorial

3: Copy and Paste the code in the first box into your web pages, or the template that creates them.

You can put the code anywhere before the final </body> tag.

Image 3 for this tutorial

4: Reload your site and you should see the disqus commenting div where you placed the code. Back on the disqus set up page you can click the Verify link to make sure disqus can see the page correctly.

5: Once users have entered comments you can go to your account at disqus and Moderate their submissions. You have a lot of options at your disposal such as placing certain sites on black or white lists, rejecting objectionable words and phrases, report spam, etc. It is worth learning about these options and considering which restirctions, if any, might be appropriate for your site.

Image 4 for this tutorial

Understanding the Code

The code is straightforward with a div called disqus_thread, followed by a script that defines your disqus_shortname and then uses this to create a script on the fly in your page, taking as it source the file embed.js from your specific disqus URL. This is what draws the new comment box, formats all the existing comments and adds the links to create and share them.

The disqus documentation describes some other configuration variables that you might want to use, but in general these are not necessary.

All the comments etc are displayed within the div with the ID disqus_thread. You can create styles in your CSS file for this div, such as specifying its width or placing a border around it.

Code for this Tutorial

Share this tutorial

Comment on this Tutorial

comments powered by Disqus