How To Add Disqus Combination Widget With Customization


Disqus is one of the most used commenting systems in websites. It’s easy, fast and customizable. Disqus also support real time comments. Like any other commenting systems, Disqus provides various widgets for showcasing comments, discussions and commenters. They also have a widget that combines all these together. It is very easy to install this “combination” widget.

Disqus Combination Widget

Disqus Combination Widget

You can include this code in Blogger’s HTML Widget or in WordPress’ Text Widget :

<div id="CombComments" class="dsq-widget">
 <script type="text/javascript" src="http://example.disqus.com/combination_widget.js?num_items=5&hide_mods=0&color=grey&default_tab=popular&excerpt_length=100&hide_avatars=0"></script>
</div>

Replace “example” short name in the above code to your Disqus forum short name.

You can configure the widget by setting values on GET parameters :

Name Default Value Description
num_items 5 The number of items that should be shown (includes all items).
hide_mods Set To “1” to hide Moderators’ comments
color grey The color theme of widget
default_tab popular The Default Tab Of Widget
excerpt_length 100 The excerpt (short version of comment) length
hide_avatars Set to “1” if you don’t want to display avatars

You can add custom styles using CSS. The parent element’s id is “CombComments” and the class is “dsq-widget”.An Example of adding custom style :

.dsq-widget a{
 color: black;
}

The above code will make the color of all “a” elements “black”.