Integrating Disqus Into WordPress

The comment infrastructure of WordPress is pretty neat and satisfactory for many, but if you need your commenters to connect to your website with social media accounts like Facebook, Twitter, Google and such, you have to install plugins that provide this functionality.

Or you could just use Disqus.

Disqus is a comment system that provides nearly every authentication API including Facebook, Twitter, Google, Yahoo and OpenID. Plus, you can log in with your Disqus credentials (which lets you follow every conversation on every site you commented on) or simply just comment with a name and an e-mail address.

There is an easy way to integrate Disqus into WordPress: You just register a new Disqus account and install the WordPress plugin. It even synchronizes with your native WordPress comments, so you don’t have to worry about your existing comments. And it keeps them synced!

But if you don’t need to sync with the native comments anymore (like me) and if you are an optimization freak (like me) who hates those extra database queries plugins make, or if you don’t care about your existing comments at all and want to start fresh, there is a relatively easy way to integrate Disqus into your WordPress blog.

First Things First: Registering a New Disqus Account

The easiest part of this tutorial: Just head over to Disqus.com and fill this single-page form to register a new account:

(Don’t forget to verify your account by clicking the verification link that’s going to be sent to your e-mail address!)

Setting Up the Plugin and Exporting Existing Comments to Disqus

Well, you know the drill: Download the plugin, extract the archive to your plugins folder (or search for “Disqus Comment System” from the “Install Plugins” page of your admin panel and install the plugin from there) and activate it.

Setting Up the Plugin

When you activate the plugin, there will be a WordPress notice with a link to set up your plugin. There, you need to log in with your Disqus credentials first:

After that, choose your website. Congratulations, you just installed Disqus on your blog!

Now, click on your Comments page and then the Advanced Options link at the top-right of that page. There are several options to be checked:

1. Disqus short name: This is the short name which you set while registering to Disqus. It should be automatically set for you when you logged in a minute ago.
2. The API keys: These are also automatically set for you and you shouldn’t change them. If you accidentally changed or deleted one of these two, visit your profile page on Disqus.com to get the correct API keys.
3. Application Public & Secret Keys: These are used for single sign-on (SSO) applications. We’re not covering in this tutorial so we’ll pass these.
4. Where to use Disqus comments on: You may choose to show the Disqus comment system only on your posts which you disabled commenting, or you can enable Disqus for every post. Leave the option as is if you want to show Disqus on all of your posts.
5. JS output for comment counts: Disqus automatically tries to change the “X Comments” parts of your theme. If it fails, you may need to enable this option.
6. Disable automatic synchronization: If you don’t want to sync new comments (posted on Disqus) with your native WordPress comments database, check this option and disable it.
7. Disable server side rendering: This option allows you to place a text list of the post’s comments before Disqus is loaded on the page. Google now indexes Facebook and Disqus comments (and other comment systems like that) but I don’t know about other search engines, so if you consider to be found from other search engines with the comments on your blog, leave this option unchecked; otherwise (meaning you just care about Google and/or you don’t need to be found with the words in the comments of your posts) check this option and disable server side rendering.

Check one of your posts to see how Disqus loads itself over the native comment system. You’re good to go now!

Exporting Existing Comments to Disqus

Below the options we examined just now, there is the “Import / Export” section where we can, you know, import and export our comments:

The exporting process consists of clicking that “Export” button and waiting for Disqus to finish “importing” your comments into its database:

It could take seconds to hours for the process to be completed – my own blog had 20,000 comments when I switched to Disqus and it literally took hours! But while preparing this tutorial, it took 2 seconds to export 2 comments (for my example blog):

All right; now we’re done with the plugin – we can just get rid of it now! :)

Deactivate the plugin, if you’re going to use the code in our next step. I prefer to reactivate it once in a while to backup my Disqus comments into my database (by clicking “Sync Comments” at the “Import / Export” section and waiting for several minutes) but if you don’t think you’re ever going to use the plugin again and won’t need the options that are saved in your database, you can also uninstall it with the “Uninstall” button.

Integrating Disqus Into WordPress Without a Plugin

As we discussed earlier, doing stuff without plugins helps us optimize our website – a single query is a single query, right?

Anyways, here are the functions that we’re going to use – like always, add these inside your theme’s functions.php file:

Embedding Disqus Comments

function disqus_embed($disqus_shortname) {
	global $post;
	wp_enqueue_script('disqus_embed','http://'.$disqus_shortname.'.disqus.com/embed.js');
	echo '<div id="disqus_thread"></div>
	<script type="text/javascript">
		var disqus_shortname = "'.$disqus_shortname.'";
		var disqus_title = "'.$post->post_title.'";
		var disqus_url = "'.get_permalink($post->ID).'";
		var disqus_identifier = "'.$disqus_shortname.'-'.$post->ID.'";
	</script>';
}

The function is pretty simple: Use the code <?php disqus_embed('myexampleblog'); ?> anywhere you want in your single.php and page.php files to embed and show Disqus comments for that page. You can search for the comments_template(); function and replace it with our new function, since we’re not going to use the native commenting functions anymore.

Let’s examine the code a little bit:

1. Load the JS: As you know, we can’t do anything if we don’t load the JS! :)
2. Place the div to load the comments in: We’re echoing <div id="disqus_thread"></div> because Disqus needs this div with this ID to load the comments in.
3. JS configuration variables of Disqus: We have to set these variables in order to make the page recognizable for Disqus. We don’t really have to set disqus_title and disqus_url since Disqus can fetch them from the page’s URL and <title> tag but if someone visits your site with an address that contains, say, ...?utm_source=feedburner, the URL will be different from the original and that can cause problems.

Tip: Try to load yourdisqusshortname.disqus.com/embed.js in your browser – you’ll be redirected to Disqus’ CDN. Copy that new link and use it in the wp_enqueue_script function to optimize the code a little further – half a second is half a second, right?

Fetching the Comment Count

function disqus_count($disqus_shortname) {
	wp_enqueue_script('disqus_count','http://'.$disqus_shortname.'.disqus.com/count.js');
	echo '<a href="'. get_permalink() .'#disqus_thread"></a>';
}

We can use the code (<?php disqus_count('myexampleblog'); ?>) anywhere in our theme files as long as it’s in The Loop. Unfortunately Disqus can only count the comments with a link which has #disqus_thread in the end – help me out with your comments if you find a different way to show the comment count.

Tip: You can edit the output text by visiting yourdisqusshortname.disqus.com/admin/settings/appearance/ and changing the “Comment Count Link” and “Reaction Count Link” boxes. You can even use HTML!

Conclusion

Disqus was founded in 2007 and has over 75 million users worldwide. It maybe lacks some configuration features but it’s one of the greatest comment systems out there. This article’s main idea was to show you how to register with Disqus, install it on your WordPress blog, migrate your comments and use several lines of code to show the comments. For a further review of Disqus, you can refer to another article on Wptuts+ and get to know it better.

And as always, you’re more than welcome to share your ideas and code relevant to this topic on your comments!