Projects

WordPress Disqus Recent Comments Widget Using Pure Javascript (Updated)

 , , ,

WpDisqusRc, or WordPress Disqus Recent Comments Widget, is a small script that you can drop into a Text Widget in WordPress. With just a few options, you can display the most recent comments for your Disqus-enabled site!

UPDATE 12-17-2012: Version 0.3 – Added fade in/out animation to popup (Webkit browsers only).

UPDATE 12-11-2012: I decided, since the popup can always be overridden, to make the popup of the author information a default feature. I added the ability to enable/disable the popup as well. This will result in a more simple implementation.

Project Background

First off, check out the demo here! I’m also using this on my site; just look at the Recent Comments Widget to the right :-). Be sure to also check out my popular threads widget, also to the right!

I heard a lot about Disqus (which I still pronounce as dis–kuhs) and decided to implement it at this site. I can tell you that Disqus is a pretty cool SaaS tool that is very easy to implement. All I did was simply install the WordPress Plugin, registered on the Disqus site, set some options, and, voila, you’ve got an awesome commenting system.

It’s important to note that Disqus actually tries to sync its data with your local WordPress comment database. It takes a little bit of time, but this does actually work. The problem, however comes when WordPress’ default Recent Comments widget is used. The links to the referenced posts are incorrect since they point to the record ID of the comment for your WordPress database, not the comment ID of Disqus. So, unfortunately, it won’t scroll down to the comment you clicked on.

I did a quick search for some Disqus widgets online, but really didn’t find any I liked. There was one by Ivan Zlatev, but it wasn’t updated for a few years. Plus, it had a 2 and a half star rating. And he’s a .NET programmer (haha no offense, seriously, one of my co-workers whom I respect very much is a .NET programmer :-)). Anyway, I decided to roll my own.

At first, I wanted to do an actual WordPress Widget built using PHP. Then I thought, well, why not pure Javascript? I looked more into Disqus’ API and, wow, it’s pretty comprehensive and secure (e.g. public API keys, when you sign up for one, can be tied to specific domains). So, based on this, there wasn’t anything foreseeable that would cause this project to fail and thus WpDisqusRc was born!

Usage

I wanted this “WordPress Widget” (as you probably already know, this is not truly a WordPress Widget, it’s more of a Javascript hack) to have an easy implementation. It won’t be quite as easy an implementation as an actual WordPress Widget since, typically, those have a UI to set some options. In this case, installation is a four step process:

  1. Upload the script to your WordPress site somewhere.
  2. Create a Text Widget.
  3. Copy and paste some Javascript code.
  4. Set options (api_key, forum ID, etc.).

Once you’ve done that, you should be all set.

Implementation

In this version, I decided, as a built-in feature, to add listeners to the author’s name tag that will display a popup that would show more information about the author. Note that you can change this behavior by overriding the mouseover and mouseout events however you want (e.g. maybe you want to show a popup similar to LightBox or Shadowbox). All you’ll need to do is copy and paste the following into a Text Widget:

<style type="text/css">
  .wp-disqus-rc-popup {
    position: absolute;
    color: #fff;
    background-color: #404040;
    border: 1px solid rgba(0, 0, 0, .4);
    border-radius: .5em;
    box-shadow: 0px 1px rgba(255, 255, 255, .4) inset;
    padding: 5px;
    width: 250px;
  }
  .wp-disqus-rc-popup:after {
    content: '';
    position: absolute;
    top: 14px;
    right: -8px;
    border-width: 8px 0px 8px 8px;
    border-style: solid;
    border-color: transparent #404040;
  }
</style>
<script type="text/javascript" src="./wp-disqus-rc.js"></script>
<script type="text/javascript">
  var rc = new WpDisqusRc({
    api_key: '<your_api_key>',
    forum: '<your_forum_id>',
    popup_enabled: true
  });
  rc.getData();
</script>

Note that you can format the popup via CSS, by using the .wp-disqus-rc-popup class. You may also want to put the CSS in a separate file. In this case, however, I embedded it in the Text Widget.

Project Status

Currently, this project is in beta, version 0.2. It’ll probably stay that way while I receive feedback and suggestions on it. This project is released under the MIT License. At some point, if there’s enough interest, I’ll create an actual WordPress Widget UI that would make it easier to set the options.

Compatibility

  • Compatible with Webkit (Chrome and Safari) and Gecko (Firefox) browsers.
  • Compatible with IE9 and above, not tested in IE8 and less.
  • Not tested with Presto (Opera) browsers.
  • Should work in mobile devices that use Chrome or Safari.

Limitations

  • Currently you can only hover on the author’s name to invoke the mouseover and mouseout events.

Download

Code and demo files can be downloaded here.

Flattr this