Add Disqus Recent Comments Widget to Your Blogger

In today's post, we will discuss a very simple topic but important topic on how to add an attractive and fast-loading Disqus recent comments widget on a Blogger's blog. Such widgets let their readers know about the conversations which is going on at your blog, and if you're mainly active on it, it gives a very positive impression. This widget should be well-scripted and the JavaScript should also be hosted at Disqus to reduce the loading time on your blog. So let us learn how to add this widget on blogger.

Adding Disqus Comment Widget to Your Blogger

You can put this widget code inside any text or html block inside your blogger.

• Go to Blogger >> Layout
• Click on Add a Gadget
• Choose the HTML/JavaScript widget
• Now add this code anywhere you do like on your blog

Now copy and paste the following given code in the HTML/JS widget.

<div id="RecentComments" class="dsq-widget">

<script type="text/javascript" src="http://bloggingbeggniers.disqus.com/recent_comments_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=50"></script>

</div>

Configuration

After the? in the URL, you can see a number of parameters therein. These are used to customize the functionality of the widget. Here is a short description for each of them.

• num_items - Number of comments to show in the widget
• hide_mods - Hide moderators' comments (1 as hidden, 0 as disabled)
• hide_avatars - Hide display images (1 for hidden, 0 for shown)
• avatar_size - Avatar size in pixels (32 by default)
• excerpt_length - Character-length of the excerpt (1000 by default)

Styles

If you want, you can customize the appearance of this widget as well. Following are some sample CSS rules;

dsq-widget ul.dsq-widget-list {
padding: 0;
margin: 0;
text-align: left;
}
img.dsq-widget-avatar {
width: 32px;
height: 32px;
border: 0px;
margin: 0px;
padding: 0px 3px 3px 0px;
float: left;
}
p.dsq-widget-meta {
clear: both;
font-size: 80%;
padding: 0;
margin: 0;
}
li.dsq-widget-item {
margin: 15px 0;
list-style-type: none;
clear: both;
}
span.dsq-widget-clout {
padding: 0 2px;
background-color: #ff7300;
color: #fff;
}
a.dsq-widget-user {font-weight: bold;}
a.dsq-widget-thread {font-weight: bold;}
table.dsq-widget-horiz td {padding-right: 15px;}
.dsq-widget-comment p {display: inline;}