Add Disqus Latest / Recent Comments Widget - All New Design!

Disqus is one of the most popular online commenting platform. Since 2011, where I first Installed Disqus on BloggingeHow, the commenting platform has grow so fast and now we get to see tons of big names using the platform.

Disqus deprecated it's recent comment widget a while ago, and it was the feature I personally missed a lot. You got to show recent comments on your blog if you've a healthy discussion going on your blog and websites. Such recent comments widget motivates the readers to leave out their opinions and surely it helps grow the community.

Disqus Latest / Recent Comments Widget - All New Design!


With the Disqus recent comment widget you're about to see, it used the same deprecated mechanism, though with a new design to give it a new look and feel. There are certain limitations to Disqus Comments widget such as it's refresh rate, number of requests for widget loading and one of the biggest loop hole is it's synchronization with Disqus's database.

Meaning by, that If someone leaves a comment on your blog and it gets updated on the recent comment widget, now if the person updates or edits it's comment, the recent comment widget won't update the change as it doesn't synchronize it's self with the database at back end for older comments and only fetches new ones.

Read also: How to Enable Disqus for Mobile in Blogger

Though still, it's better to display comments to motivate new readers than to not having the widget installed in the first place

Lets get into how you can add the widget to your blogs.

Install Disqus Recent Comment Widget to Blogs


Step#1  Adding Code


Navigate to your Blogger Blogs Dashboard >> Layout >> Add a new Widget in the sidebar. (if you wish to add the widget in the sidebar).

Now simply add the following code in the HTML/Javascript gadget box.

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

 <script type="text/javascript" src="http://bloggingehow.disqus.com/recent_comments_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=64&excerpt_length=100"></script>
</div>

<style>
.dsq-widget  {   
opacity:.6;
}
 img.dsq-widget-avatar {
    background: none repeat scroll 0 0 #f5f5f5;
    border: 1px solid #dddddd;
    display: block;
    float: left;
    height: auto;
    margin: 10px 8px 0 2px;
    width: 72px;
pointer-events: none;
}

.dsq-widget-comment p {
     display: inline;
     line-height: 5px;
  }

a.dsq-widget-user {
    font-size: 14px;  
}
p.dsq-widget-meta {
    border-bottom: 1px solid;
   
    clear: both;
    font-size: 75%;
    line-height: 17px;
    margin: 16px 5px 20px;
    opacity: 0.6;
    padding: 0;
}
</style>


Step#2 Add Disqus 'shortname' profile ID


Now replace bloggignehow (our disqus profile 'short name') with yours. That's all folks. Do let me know if you wish to see more customizations to the widget. Any ideas?

Cheers.

You can go ahead and read:  INTERVIEW: Fiverr's Top-Rated Seller Marc aka Anarchofighter Buys a Home Within a Year with Fiverr Money!

Share this

Related Posts

Previous
Next Post »