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.

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 :

<td>
  Default Value
</td>

<td>
  Description
</td>

<td>
  5
</td>

<td>
  The number of items that should be shown (includes all items).
</td>

<td>
</td>

<td>
  Set To "1" to hide Moderators&#8217; comments
</td>

<td>
  grey
</td>

<td>
  The color theme of widget
</td>

<td>
  popular
</td>

<td>
  The Default Tab Of Widget
</td>

<td>
  100
</td>

<td>
  The excerpt (short version of comment) length
</td>

<td>
</td>

<td>
  Set to "1" if you don&#8217;t want to display avatars
</td>

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”.