Disqus is a tremendous tool for handling the comments on your Wordpress website or blog, but the one thing I’ve been missing is a good way to display Recent Comments on the sidebar.
My latest project, the Nashville Sports Hub, is starting to spark some decent conversations, and I’d like to be able to feature that in the sidebar. Unfortunately, the standard WordPress Recent Comments widget doesn’t work especially well with Disqus. It also turns out that Disqus doesn’t offer widgets straight from their website, but the functionality is out there if you know how to tap into it.
Upon doing a search I found one site which laid out the steps for creating a recent comments widget on the Blogger platform, but what about WordPress?
Creating a Disqus Recent Comments Widget in WordPress
It turns out that the idea is basically the same, thankfully. You’ll need to drop in and modify some Javascript code, but don’t worry! If you’re not a programmer at all, this is still super-easy, and by the time you’re done, you’ll be on your way to full-fledged Geekhood.
Step 1: Get your site’s Disqus ID
You’re going to need your Disqus Site ID later on, so log into Disqus and click the “Dashboard” link. On the left side, under the “Your Sites” heading, you’ll see all the sites for which you are the administrator, and next to the Site Name, the Site ID will be in parantheses, like this:
Step 2: Create a Text widget with script calling Disqus
Log into your WordPress dashboard, and head to the Widgets section. Drag a Text widget into the sidebar (or other area) where you would like to place it, and copy the following text into it:
<div id=”recentcomments”><script type=”text/javascript” src=”http://YOURSITEID.disqus.com/recent_comments_widget.js?num_items=3&hide_avatars=0&avatar_size=32&excerpt_length=100“></script></div>
Step 3: Customize the script for your site and preferences
Now it’s time to tweak that code to work for your site, taking those bits I’ve highlighted in red one at a time:
- Change the YOURSITEID to whatever the site ID is that you’re working with. Mine, for example, was “nashvillesportshub”.
- Set how many comments you’d like to appear by changing the number after “num_items=” in the text above. In this case, I’m using 3, but 5 is also commonly used.
- Do you want people’s Disqus avatars to appear, or stick with just text? To show the avatars, leave the number after “hide_avatars=” at 0, otherwise change it to 1 to show text only.
- How big should those avatars be? You may want to change the size based on the site format you’re working with, but try leaving “avatar_size=” to 32 first to see how that looks.
- How much text from each comment do you want to show? I like to show just enough to entice readers to click through and read more, so I have “excerpt_length=” set to 100 characters.
Feel free to twist the dials on those variables and see what works best for your site. If you have an active commenting community, you may want to show more recent comments, while those less actives ones may be best off displaying fewer (it may not look good to show something a month old, but you’re calling it “recent”).
So give this a shot on your own WordPress site, and make sure to swing by the Nashville Sports Hub and join the conversation!
Awesome, works like a charm. Tho copying the code from this site destroys the code since different quotations are used 😉 Do you know by any chance how to translate the widget? I am running a german blog and it shows all the details in english, like when the comment was posted…
That’s a great question, Oliver. Have you set your site’s language in the Disqus administration screen? I would think that if Disqus knows that your site is in German, it would respond to this Javascript with German output.
http://help.disqus.com/customer/portal/articles/466219-what-languages-does-disqus-support-
Viel Glück!
Thanks for the quick reply. Yes, I already changed that language setting. Seems like it doesnt apply for the widget’s JS code. Support probably has been discontinued since the widget options disappeared from the sites options but there’s still hope for a wordpress included widget system soon. Thanks for you help! 🙂
Informative post. I also use disqus for blog commenting.
That’s interesting, I wonder if the additional class parameter at the beginning of your code is required by the CSS on your particular site. Glad it worked out for you, though!
JacySFN’s link is correct. Also, I removed the “class” tag and it had absolutely no effect. The code from github is superior.
Thanks for posting this Dirk. I had to use the tweak suggested by JacySFN below to get mine working, but I wouldn’t have found that without your initial post so thanks. David
Good news. I feel this is powerful comment system for wordpress, in my opinion.
Thanks for the link to the other code. For some reason that one worked for me too!
Thanks for the info 🙂 Going to try this out.
Thanks for giving my site a backlink in this post… 🙂
great tutorial… again the quotation marks within the code would have to be retyped in notepad prior to pasting the full code into the text field widget.
Thank you very much for the tutorial, Works great. Do you know how I could hide my own comments? I do not want them to show up in the widget…
Hi Lars, i don’t know you get it right now, but if not you need this in the script line: &hide_mods=1
Thanks for sharing information on Recent comment widget. I was actually looking one for my blog and I find your instructions are very easy to follow.
How do I show the Comment images in the recent images? Like the one i attached below?
Hi, does anyone know how to add some css to this? The avatar is just slightly off-kilter
i like disqus because it help me don’t need creat acc to comment blog.
thanks for post
Thanks for the info ^.^
Great article …….. I’ll definitely try it in my WordPress project.
Thanks for Sharing
Expert Village Media
Wow that’s cool, because I developed dynamic sidebar for wordpress, here moore info how it works http://www.jb-webs.com/dynamic-wordpress-sidebar/ and installed the disqus plugin today. So first thing I did was to check that and yes, you right – there is no widget – so second thing I will do now is to study carefully your tutorial, because seems me a must have too load that as well in the sidebar – thanks foor that
ye cac em nguc to
its not gonna work
Hello! How to set the generated links in rel=”external nofollow”? Is it possible?
Thanks man!!! this link worked perfectly in my text widget area!
I’m glad that helped!
good post! many thanks!