Integrating Disqus with ExpressionEngine

April 14th, 2011 • 7

Prompted by a tweet from Leslie Camacho I thought I’d finish off writing this post. We’ve recently been building community oriented sites here at the Abovegroup Ogilvy office, and we’ve also found Disqus to be super useful to use and implement and I’ve been meaning to finish this article on how easy it is to integrate the two.

Disqus is a service that allows you to easily and quickly add comments to your site that include ratings, threading and sorting. But the real gem is that in addition to allowing users to enter their names and email addresses to comment, they can also log in with popular social networking site accounts like Facebook and Twitter, as well as Google, OpenID and Yahoo accounts, and it’s all controlled by a powerful and beautiful user interface.

Adding the universal embed code to your ExpressionEngine site

To install Disqus on your ExpressionEngine site you’ll need to use the universal embed code. So after you’ve created your account and you’ve set up your shortname, simply copy the embed code and get ready.

Disqus comments need to be embedded into unique URLs to work well. This means that you’ll be placing them on the single entry pages of your site, for example, http://www.domain.com/blog/url_title_here.

Open up your template and paste the embed code wherever you want your comments to appear, usually just below your entry.

The only parts you need to edit are below:

/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'example'; // required: replace example with your forum shortname

// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = 'unique_dynamic_id_1234';
// var disqus_url = 'http://example.com/permalink-to-page.html';

The first configuration variable is easy, just replace “example” with your site’s Disqus shortname that you created when signing up or adding a new site to your profile. There are two other variables that you’ll need to set up by first uncommenting the lines. Simply remove the two forward slashes (//) at the start of each line and get ready.

The second variable we need to adjust is the unique identifier, which basically translates to the unique id of the entry in ExpressionEngine. So we need to pass the entry id of that particular entry to disqus_identifier, which is easy enough:

var disqus_identifier = '{exp:channel:entries disable="categories|custom_fields|member_data|pagination" channel="channel_name"}{entry_id}{/exp:channel:entries}';

Replace channel_name with the name of your channel. We’re also using the disable parameter of the channel entries tag to disable everything we can possibly do without, including custom fields because we won’t be using them here and it’s always good for performance to pull from the database only whatever information you need. However, doing it this way will simply output a number, like 45, which isn’t really unique, is it? What would make this unique is if you preface the number with a word that wouldn’t be used on any other Disqus site out there, and we have just the word for that: your site’s shortname. Your site’s shortname must be unique across the entire Disqus network, so if you have a disqus_identifier variable in the format of shortname_entry_id then it’ll be completely unique.

So adjusting the disqus_identifier line we get:

var disqus_identifier = 'shortname_{exp:channel:entries disable="categories|custom_fields|member_data|pagination" channel="channel_name"}{entry_id}{/exp:channel:entries}';

Again replacing “shortname” with your site’s actual shortname.

The third variable is disqus_url and it should be passed the complete URL that contains the entry and the comments, which is pretty easy. Continuing with the example URL from above, you can use this:

var disqus_url = '{site_url}blog/{exp:channel:entries disable="categories|custom_fields|member_data|pagination" channel="channel_name"}{url_title}{/exp:channel:entries}';

We’re building this URL in three steps:

  1. Using ExpressionEngine’s site_url global variable to output http://www.domain.com/
  2. Adding the name of our template group which is “blog” in this case
  3. Finally we’re adding the url_title of the entry at the end
    1. And that’s it, super easy. As I said before, we’ve started to use Disqus on most of the sites we build because it’s easy to implement, has great functionality, and saves us lots of time.

      Update: Marc Tanis has created an ExpressionEngine 2 addon to help with the SEO issue highlighted in the comments below: http://devot-ee.com/add-ons/disqus/

Filed under ExpressionEngine.

Follow me on twitter and subscribe to the RSS feed.

7 Responses to “Integrating Disqus with ExpressionEngine”

  1. Ryan Battles April 16th, 2011 at 11:20 am

    Great write up Tony. I am alittle hesitant to use Disqus because you typically lose Seo juice from the comment text. However, after reading your article it appears that they have reworked the code to improve seo. I think its time to give it a whirl on a site. Will have to reference this article when i do.

  2. Tony April 17th, 2011 at 4:23 pm

    Hey Ryan, I’m glad you found it useful. I actually hadn’t thought about the comments not being indexed by search engines as they’re being loaded by javascript, and that’s quite an important point!

    I’m not sure how much they’ve improved on this, as I just tried using a google site search to search for a comment on a site that we’re using Disqus on and it didn’t find anything.

  3. Derek Hogue April 19th, 2011 at 9:42 am

    Nice writeup Ryan. Since most often you’ll be adding comments within an entry, the extra call to the channel module should be replaced with the already-available variables, no?

    var disqus_identifier = 'shortname_{entry_id}';
    var disqus_url = '{title_permalink="blog/entry"}';

    (This is assuming you’re still within your channel:entries loop obviously.)

  4. Tony Geer April 19th, 2011 at 10:28 am

    Derek: As you said it’ll depend on where you have your comments, but once you have your channel entries loop running already then by all means it’ll be redundant to have them again. I just wanted to be on the safe side especially as I wasn’t showing an entire page template.

  5. Kevin Selles May 3rd, 2011 at 5:38 am

    Great article, Tony!

    What about importing existing comments from ExpressionEngine into Disqus?

    I’m thinking of using Disqus for our site, but I’m not sure what to do with all the comments we already have in the system.

  6. Tony May 4th, 2011 at 10:33 am

    Hey Kevin, I’m not at all sure that’s possible, you should try contacting Disqus to see if such a solution exists.

  7. Marc Tanis May 6th, 2011 at 9:21 am

    I just created an addon to solve the SEO issue and make the JS in this article easier. Its on github – https://github.com/marcato15/Disqus and I submitted it to Devot-ee so it should be up there soon. It turns Disqus comments into EE comments so you can output them on your page for SEO purposes. It also has tags for easily creating the comment section and the link to comments.

Subscribe to RSS Feed

RSS feed