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

  • Hey this is awesome! I’d love to do this over on HBOWatch.com with our colors. Would you mind helping me implement I can’t seem to figure out the Disqus API. I’d buy you coffee!

    • Hey Jacob, sure no problem. No coffee necessary :-). It should be pretty much copy and paste into a Text Widget in WordPress. The one thing you do need to do is to get an API key for your HBOWatch.com site. Just log into Disqus, and head over to http://disqus.com/api/applications/ to create an application key. That process will generate a public key, which you’ll then use as your api_key in the Text Widget code you pasted in. You’ll also need the short name for your HBOWatch.com site and use that in the Text Widget code to set the forum parameter. To get the short name for your site, just log into your Disqus account, click on the Admin button, then click on the Settings tab. Hope this helps!

      • Awesome thanks for the reply. If I wanted to just use this manually (I don’t use widgets) can I just put that script into my sidebar? Thanks again!

        • EDIT: NM Found the key!
          Just need to know how to place it manually.

        • Yes, this is possible. You should just be able to place the code into your sidebar. Remember to download the script and place it somewhere on your web server and to point to that. I just realized that my above sample code has absolute links to the script, which I should change :D.

  • Thank you for helping out, excellent information. “Whoever obeys the gods, to him they particularly listen.” by Homer.

  • Still having a bit of trouble. Can you hop on Gchat? 🙂

  • great app, makes my job easier, thanks

  • Good plugin. I have used this for my site and it works well for visitors to leave comments.

  • Hope this can work for all widget and similar ones.

  • How do we check to see all things like this one?

  • Thanks for sharing these info with us! this is a great site. I really like it. Thank you for the site. May God bless you in all your works. Great content!

  • Hi,
    I add the script in my site koursaros.net and you can see it in the first footer widget.
    That i want to know is, if it is possible to have it with no colors or better with the style that my site already has and the popup bubble with the latest comment to be on the center or somewhere else so that can be showing better.

    • Note to readers, the above link is NSFW :-). Koursaros, you can change the colors when the control is instantiated:


      var pt = new WpDisqusPt({
      api_key: '',
      forum: '',
      days_back: '90d',
      colors: [ // Change colors here.
      '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();

      • Hi Ronald,
        Thanks for your answer and for the script as well! Sorry that i didn’t inform for the NSFW site.
        As you sow already the widget as you make mouse over the latest comment is appearing the half bubble so i need to change its position to make it appearing in the middle somewhere in the widget.
        About the colors it is understand by me and i can change them, but what about the link color that is blue ? From where i can change it?
        I appreciate you help.

        • For the mouse over position, you’d have to change code. But, maybe it’s easier if you use CSS. I would add the following CSS to the iframe you have:


          .wp-disqus-pt-popup {
          width: 140px !important;
          margin-left: 110px !important;
          }

          You can do the same for the link color, just add this CSS to your iframe:


          .wp-disqus-pt-popularcomment-container a:link {
          color: #000;
          }

          HTH!

          • Now it is perfect!!!!!

            Thank you very much for your help!
            Tell me if i can help you too with something else!
            Thanks!!!!!!