Projects

WordPress Disqus Popular Threads Widget Using Pure Javascript (Updated)

 , , ,

WpDisqusPt, or WordPress Disqus Popular Threads Widget, is a small script that you can drop into a Text Widget in WordPress. This widget shows which threads on your site are the most commented on, similar to Engadget’s old Most Commented widget.

UPDATE 04-12-2013: WpDisqusPt is now on GitHub! https://github.com/ronaldcs/wp-disqus-pt

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

Project Background

You can find the demo here. As with the Recent Comments widget I created earlier, I’m also using this widget on my site; just look to the right!

For this project, I decided to create a popular threads widget that would show which posts on your site have been commented on the most. This is similar to Engadget’s old Most Commented widget:


This widget uses Disqus’ listPopular.json API call to get thread information. If you haven’t checked out Disqus’ API, you should, it’s quite comprehensive.

Usage

Installation is a simple four step process:

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

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

Implementation

Note that when you hover over the comment count of the widget, it will show a bubble of the last comment for the corresponding thread. 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). To implement this widget, all you’ll need to do is copy and paste the following into a Text Widget:

<style type="text/css">
  .wp-disqus-pt-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-pt-popup:after {
    content: '';
    position: absolute;
    top: 11px;
    right: -8px;
    border-width: 8px 0px 8px 8px;
    border-style: solid;
    border-color: transparent #404040;
  }
  .wp-disqus-pt-popularcomment-container {
    padding: 10px 20px 10px 10px;
  }
  .wp-disqus-pt-popularcomment-count {
    position: absolute;
    top: 5px;
    right: 0px;
    padding: 1px 6px;
    border-radius: 4px;
    margin: 2px -5px;
    color: white;
    background-color: black;
  }
  .wp-disqus-pt-popularcomment-count:after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: 7px;
    border-width: 5px 5px 0 0;
    border-style: solid;
    border-color: black transparent;
  }
  .wp-disqus-pt-popularcomment-graph {
    border-radius: 2px;
    margin: -5px;
  }
</style>
<script type="text/javascript" src="./wp-disqus-pt.js"></script>
<script type="text/javascript">
  var pt = new WpDisqusPt({
    api_key: '<your_api_key>',
    forum: '<your_forum_id>',
    days_back: '90d',
    colors: ['rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.5)', 'rgba(0, 0, 255, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)']
  });
  pt.getData();
</script>

Some options to note:

  1. days_back – Default is 7d (seven days). This is the interval that Disqus API will go back to summarize the most popular threads. Options are 1h, 6h, 12h, 1d, 3d, 7d, 30d, and 90d.
  2. colors – This is the list of colors that will be used for each of the listed threads. Default is [Red, Green, Blue]. You can use any valid color specification (e.g. rgba(255, 0, 0, 0.5) is valid).
  3. limit – This is the maximum number of threads to retrieve, defaults to 5.

You can set these options by simply passing it to the constructor:

var pt = new WpDisqusPt({
  api_key: '',
  forum: '',
  days_back: '90d',
  colors: ['rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.5)', 'rgba(0, 0, 255, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'],
  limit: 5
});

Project Status

Currently, this project is in beta, version 0.1. 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

  • To prevent insanely thin bar graphs, I’ve set the minimum width to 50% of the widget’s container; all of the bar graphs will scale based on this width (i.e. the smallest bar graph will be set to 50% width of the widget’s container).

Download

Code and demo files can be downloaded here. Source is also on https://github.com/ronaldcs/wp-disqus-pt:

$ git clone git://github.com/ronaldcs/wp-disqus-pt




Fork me on GitHub