Advertisement
Plugins

Integrating Disqus Into WordPress

by

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:

Screenshot 1: Registering a new account on Disqus

(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:

Screenshot 2: Logging in after activating the plugin

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:

Screenshot 3: The options page
  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:

Screenshot 4: Exporting existing comments to Disqus

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

Screenshot 5: Exporting existing comments to Disqus - step 2

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):

Screenshot 6: Exporting existing comments to Disqus - step 3

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!

Related Posts
  • Code
    Creative Coding
    Using a Custom Post Type to Create a Home Page BannerUsing a custom post type to create a home page banner
    Sometimes it's useful to have a nice obvious banner on your site's home page—for announcements, snippets that aren't long enough to merit a blog post, or links to new content within the site. But you don't want to be editing your homepage content every time you add a new piece of content, nor do you want to be delving into the code to add content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: The Footer FileCreating wordpress theme from html 400
    In this series, you've been learning how to create a WordPress theme form static HTML. Up to this point, you have: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu added widget areas to the header and sidebar. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Adding WidgetsCreating wordpress theme from html 400
    In this series, you've learned how to convert a static HTML file to a WordPress theme and edit the header file. So far you've: prepared your markup for WordPress converted your HTML to PHP and split your file into template files edited the stylesheet and uploaded your theme to WordPress added a loop to your index file added meta tags, the wp_head hook and the site title and description to your header file added a navigation menu. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Adding NavigationCreating wordpress theme from html 400
    If you've been working through this series, you now have a working theme with template files which you've uploaded to WordPress. In this tutorial, you'll continue to work on the header.php file that you created in Part 2. You'll learn how to add a navigation menu which can be edited via the WordPress Menus admin screen. To do this you'll also need to create a new file for your theme: the functions file.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…
  • Code
    Plugins
    Using HighCharts in WP-AdminHighcharts 400
    Charts are a great way to present data. They make data more digestible by making it visually appealing. In WordPress, there is no built-in method for getting posts and pages data in a graphical form. Although, there are certain plugins available which integrate Google Analytics with WordPress, but they are overkill if you want to get only a portion of that data. Also, nothing should keep you from learning new techniques and to dive straight into the subject is the best way to learn.Read More…