Today, Disqus comments plugin is used by most websites and blogs including some popular sites in the world. We also use the same for this blog. Someday I will definitely explain some useful features of Disqus over others.
As all of you know, displaying recent comments on your blog is really very crucial to enhance visitor's engagement and getting more comments, so I decided to write an article about how you can display recent conversations in beautiful way.
About Disqus
Disqus has provided some good API to fetch your blog's recent comments and yes you can definitely use them but it might need a bit of techy knowledge. Besides this Disqus also supports RSS feed which you can even use for this purpose. But, if you are the most easy going person in the world, then you might not take interest in these techniques. For persons like you, Disqus has also provided two lines of JavaScript code which you can integrate with your blog to fulfill your need.
JavaScript code to fetch Disqus Recent comments
This is the default way to display recent comments, not so attractive, just the links and the author thumbnails are shown.
We can't use this directly on our blog. But with a little bit formatting we can definitely enhance its look. It took about half an hour of time to enhance and change its look. Here are the live demos .
Just with simple CSS you can modify the entire layout. To get the code, click on above links and view the source from your browser. If you give little more time they can be even attractive. Here is the list of parameters which you can modify to get results as per your choice.
| num_items | No. of comments to show in the list. Max alloweed is 25. |
| hide_avatars | You can show or hide the images by setting to 0 or 1 respectively. |
| excerpt_length | Number of characters to display in each comment. |
Disqus combo plugin with all features
One more plugin Disqus provides is the all-in-one combo plugin where you will get 3 things at one place. You will get top commenter, recent comments and most discussed in a 3 tabbed structure. Here is the 2 line JavaScript code which you need to add to integrate this in your blog.
Again not so attractive. Need to apply css. Here is a live demo which I did to enhance its look.
You can change following parameters in the script tag to get different results.
| num_items | No. of comments to show in the list. Max alloweed is 25. |
| hide_mods | Set it to 1 if you want to hide your own comments. |
| default_tab | It takes three values 'people','recent','popular' and accordingly activate the corresponding tab on load. |
| excerpt_length | Number of characters to display in each comment. |
For any queries drop a comment 🙂
nice description for the developers………
Much appreciated. Thank you. Any more non-css related customization tricks would be great. I hope someone figures out a way to list comments by post. A wordpress plugin I use does it but it only works with wordpress comments of course. Thanks again.
so thanks ! i get what i want to know! but i want to know how to modifu css file?
What type of formatting you want ?
sorry,what i want to know is where to modify my discus css file? where are my css file?
There is no separate CSS file. You need to overwrite the existing CSS classes. When you load the Disqus comments it has got some CSS classes. So you need to write your own CSS and paste them in your web page so that when the comments will be loaded they will be automatically overwritten by yours.
that’s OK, thank you again!
excuse, I use the script: “”
but it seems to appear some repetitive comments .
do you know why?
I did not find repeated comments. When I run your code I saw only one comment.
Super article, this is just what I needed to know.
How you make the button for disqus comments? I see the page not load the comments before i press “comment”… i need this too. Can you write a tutorial how i can load disqus with click`?
In the Links (Formatted,Before Formatting) it is hosted on Dropbox (Dropbox has a SSL Certificate) meaning that the comments are not shown because Disqus doesnt use SSL that much, basically you cant see the comments and design on the links
XLR8
Owner of http://sd-storage.weebly.com
Thx for this very good tutorial about Disqus
Super awesome! Thank you!!
Time passed long ago, but why do not forget
Many lonely nights he looks forward to dispel the icy night
On the day his empty street arm in arm captivated
Still the shadow he loved with the past memories.
http://www.abcya6.com or http://www.abcya8.com