Recent Comments Widget For Blogger - New!

Recent Comments Widget For BloggerToday we are releasing the most advanced "Recent comments Widget" for Blogger blogs which will display recent comments posted in your blog posts in a descending order i.e. latest at top. It is built from scratch using the same technique that we discussed in our Blogger JSON Feed series. If you have followed our JSON tutorials, you will know exactly how this widget functions and fetches data from blog feed. This gadget is extremely advanced, fast loading and show recent comments in a unique fashion. It works with both official and custom Blogspot templates and is fully mobile responsive.

DEMO - Added at Blog Footer

Recent Comments Widget Features:

A Blogger gadget is good only if it loads fast and makes the UI look even better. This is what we kept in mind while developing this widget that pulls recent comments from your blog feed in a asynchronous manner without much effecting blog loading speed.

Following are its features:

  1. Coded in JavaScript using Blogger JSON Feed API
  2. Displays author's profile thumbnail - Author Avatar
  3. Links author avatar to its Google+ profile
  4. Animated Image preloader
  5. Shows post title
  6. Shows comment date
  7. Shows comment excerpt (short description snippet)
  8. Read more link
  9. Lightweight
  10. Fluid and responsive
  11. Uses tooltips to display info

Displays the following GIF preloader which spins and pulsates when the widget loads or when data is requested by browser from JSON feed.

preloader for blogger blogs

Once fully loaded the comments are displayed in descending order (Latest at top). When user hovers mouse cursor on the commentator name, a tooltip will display info about the comment date and time.

recent comments widget for blogger

Hovering mouse cursor on folder icon will display the post title where the comment is posted:

blogspot recent comments widget

  • Question: If you look into blogger comment JSON feed, you will come to know that there exists no object for Post title then how come we were able to show the post title inside the recent comments list? 
  • Answer: We extracted the title by extracting/splitting words from the permalink and then using JavaScript to combine all those words to form a Title. I will explain in coming tutorials on how to do this.

Display Recent Comments With Thumbnails In Blogger

Read to add this cool fast loading widget on your blogs to display recent comments made by your blog readers? Lets get straight to work then!

1 Go To Blogger > Template

2 Backup your template

3 Click Edit HTML

4 Paste the following code just above </head> tag

Note: This step is optional. Skip it if you have already added jQuery library source links to your blogger template.

<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

5 Next paste the following stylesheet links for FontAwesome and Osald font just above </head>. Skip adding the links if you already have added them inside your templates:

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

6 Now paste the following CSS code just above    ]]></b:skin>

/*############Recent Comments Widget##################*/

.mbtcmts{list-style-type:none; overflow:hidden; }
.mbtcmts li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px;padding:0px;}
.mbtcmts i{color:#999; padding-right:4px;}
.mbtcmts .idate {display:block; font-family:arial; font-size:11px;text-align: left;padding:3px; margin:0 0 0px 40px}
.mbtcmts .icontent{ display:block; font-family:Georgia; color:#999; font-style:italic; line-height:1.5em;}
.mbtcmts .icontent a {color:#999; text-decoration:none; font-weight: bold;font-size: 16px;font-style: normal;}
.mbtcmts div{line-height:2em; clear:both; border-top:1px solid #eee; margin-top:5px;}
.mbtcmts span { margin:5px 0px 0px; padding-right:5px;}
.mbtcmts img {border-radius:100%; float:left; margin:0px 20px 20px 0px; border:1px solid #eee; padding:3px; width:50px; height:50px;box-shadow: 2px 2px 4px #ddd; }
.mbtcmts .icapital {text-transform:Capitalize; display:inline-block;}
.mbtcmts .ititle {font-family:oswald; font-size:14px; color:orange; font-weight:normal; text-decoration:none;}
.mbtcmts .ititle:hover {color:#666;}

.mbtcmts .idate:before, .mbtcmts .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-right:5px;}
.mbtcmts .idate:before {content:'\f017'; color:#999}
.mbtcmts .ipostTitle a {text-decoration:none; color:#999}
.mbtcmts .ipostTitle a:before {content:'\f07c'; }

#mbtloading{
  margin: 20% auto;background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat left center;width: 80px;height: 80px;}

/*------ CSS3 Tooltip Shortcode -------------*/
.tooltip{outline:none;text-decoration:none!important;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{text-transform:capitalize;width:150px; padding:5px 5px;opacity:0;top:120%;left:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-50px}.tooltip span b{width:15px;height:15px;left:30%;top:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{padding-top:10px;color:#fff;background:orange;border:1px solid #ffffff}.tooltip span b{background:orange;border-top:1px solid #ffffff;border-right:1px solid #ffffff}.mbtcmts .itotal {color:#333; padding:3px 3px 3px 10px; border:1px solid #eee; font-family:arial; font-size:12px;}
.mbtcmts .itotal i {font-style:normal;}
.mbtcmts .itotal span{font-family:oswald;  font-weight:normal; color:#333; text-decoration:none}
.mbtcmts .itotal span:before {font-family:FontAwesome; position:relative; content:'\f075'; }

To replace the orange theme of the widget, replace the yellow highlighted areas with a color of your choice. You can also replace them with hexadecimal color code.

7 Save your template and you are almost done!

8 Finally go to Layout section and click "Add a Gadget".

9 Choose HTML/JavaScript widget and paste the following code inside it:

<div id="mbtloading" ></div>
<script type="text/javascript">
function mbtcmts(json) {
document.write('<ul class="mbtcmts">');
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListDate = TotalPosts = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListProfile = ListComments = thumbUrl = sk = ListMonth = Y = D = M = m =  "";

//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }

if(json.feed.entry[i].link[2] != null)
{
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
}
else
{ListUrl = "'#'"}

//####################### Splitting URL into Title

if(json.feed.entry[i].link[2] != null)
{
var mbt_slit = json.feed.entry[i].link[j].href;
        var M_slit = mbt_slit.split("#");
        M_slit = M_slit [0];
        var K_slit = M_slit.split("?");
        K_slit = K_slit[0];    
        var B_slit = K_slit.split("/");
        B_slit = B_slit[5];
        B_slit = B_slit.split(".html");
        B_slit = B_slit [0];
        var T_slit= B_slit.replace(/-/g, " ").charAt(0).toUpperCase()+ B_slit.replace(/-/g, " ").slice(1).substring(0, 50);
        var Link_slit= T_slit.link(K_slit);
}

//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
ListAuthor= json.feed.entry[i].author[0].name.$t;
var ListAuth = ListAuthor.split(" ");
var ListAuth = ListAuth.slice(0, 1).join(" ");

ListProfile= "'" + json.feed.entry[i].author[0].uri.$t + "'";

//################### Content Check

ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);

//################### Date Format

ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

ListDate= json.feed.entry[i].published.$t.substring(0, 10);

                         Y = ListDate.substring(0, 4);
                        m = ListDate.substring(5, 7);
                         D = ListDate.substring(8, 10);
                         M = ListMonth[parseInt(m - 1)];                       
//################### Thumbnail Check

if (json.feed.entry[i].author)
{
thumbUrl = json.feed.entry[i].author[0].gd$image.src;
sk= thumbUrl.replace("/s72-c/","/s60-c/");
ListImage= "'" + sk + "'";
}

else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGBaoO_i2u7kTRZvG6GBbHHO97n5RtxCjYQeBEoyXWIVKquEE5xXh4kgUGZnVBKy5yfkOYCTitIMnhUgO8zZHT7Oa0SN5EEVh5JgdI3KUj66cqgZ7EVuzPXOV_pewp5n0Ydrog0K1Rdfs/s200/Icon.png'";
}
//################### Printing List

var listing = "<li class='node"+[i]+"' ><a rel='nofollow' href="
+ListProfile+
  "><img src="
+ListImage+
"/></a><a class='ititle tooltip' href="
+ListUrl +
"target='_blank'><span><b></b>"
+ListAuth+
" Commented on » "
+ M +
" "
+ D +
", "
+ Y +
"</span>"
+ ListAuthor+
"</a> <i> posted in</i>  <span class='ipostTitle'><a class='tooltip'  href='"
+K_slit+
"'><span><b></b>"
+T_slit+
"</span></a></span><span class='icontent'>" + ListContent+" ...   <a href="+ListUrl+">  » </a></span><div></div></li>";
document.write(listing);
}
document.write('<div class="itotal"> <span> '+TotalPosts+' </span><i>delicious comments posted so far!</i></div></ul>');
}
</script>

<script>
var ListCount = 5;
var ChrCount = 90;
</script>
<script src="http://www.mybloggertricks.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script>
<script>document.getElementById("mbtloading").style.display = "none";</script>

You can make these changes:

  • Replace http://www.mybloggertricks.com this with your blog URL
  • To increase or decrease the number of comments, edit: ListCount = 5
  • To decide how many characters to display as comment summary (excerpt) edit: ChrCount = 90

10 Save your widget and see the magic in action! =)

What else do you want in Recent Comments Widget?

I have tried my best to add as many useful features as possible in this widget. Do let me know if you would wish more features and control options in the widget. One option that is often requested is to enable an option that could allow users to disable admin comments from displaying inside the widget. This can easily be achieved and I have discussed almost every basic of coding with JavaScript. I would love to see how many of you could propose the conditional statement that will disable blog author's comments from displaying inside the widget. After all what we aim for is always learning through practice and educating my readers is what I love to do. Do propose your suggestions, I will share the method once you have all tried. The solution will be shared here.

In my coming tutorials, I will discuss some core JSON basics that will help you do wonders. I will also explain how this widget is coded and how the logic works. Do post your queries for any help needed.

Keep blogging, keep sharing knowledge. Spread peace all around! God bless you all buddies! =)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

21 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Salam Mustafa bhai!

    Extremely LOVED creation, MashALLAH!

    I do have a blogger-based blog where I will test it out, InshALLAH! :)

    And sharing it on my social life!

    Thank you so much! Keep inspirin'!

    ~ Adeel

    ReplyDelete
    Replies
    1. W.salam Brother Adeel,

      Thank you for the delightful comment. Surely made up my day! :)

      I gladful you found it useful. This is what I aimed for. Keeping you all satisfied.

      Delete
  2. Wew! :D Seriously You Did Awesome Work :) You'll Change The Way People Do Blogging .. I'm Sure In Sha Allah!
    And Ma Sha Allah Nice To Hear That Little Doll Ifza Is Recovered :D
    Looking Forward For Your Reply!
    Cheers,
    Abdul Samad

    ReplyDelete
    Replies
    1. Thank you buddy Abdul Samad for the kind feedback. Ifza has Alhamdulillah recovered and doing all good mashAllah. Thank you for all your prayers and wishes. =)

      Delete
  3. Killer Article brother <3 :)
    Can I apply this widget if I am using Disqus as comment?

    ReplyDelete
    Replies
    1. Thank you Shakir! We have already published a simple recent comments widget for Disqus that you can try out. :)

      Delete
  4. Good Work Mustafa Bhai (y)
    But unfortunately I'm not able to add this widget into my blog =(
    Because I am a WordPress user =) .........

    ReplyDelete
    Replies
    1. I will look into wordPress feed to see if they provide JSON support. Will create one for that too :)

      Delete
  5. Awesome work!

    Just a great and all-in-one tool to show our love to our dear commentators.

    Nicely coded and designed :) Good luck mate!

    ReplyDelete
  6. Brother do you create custom blogger widget yourself? :)
    I can't believe brother <3 :)

    ReplyDelete
  7. I have 3 comments system, can this widget work on my blog?

    ReplyDelete
  8. Can i use it in my blog? As i am using Intense Debate commenting system on my blog. I have a RSS feed provided by Intense Debate for my blog but it's not working in this widget?

    ReplyDelete
  9. Amazing!

    Friends, I need Help.

    I need someone to edit my html. I used INTENSEDEBATE for a long time. But now I need to uninstall it. Tried the instructions at oficial website, but it do not works. And they dont give support. I really need the original comments of blogger back.

    Please, if anyone can give me a hand. Please.
    https://www.facebook.com/ithiago.henrique

    ReplyDelete
  10. Muhammad Nice Info,

    Please help me,
    I have a problem with bloggers comment box .
    the replay button does not work , when I click replay appeared clean your cache error notification .
    I've tried various ways but still can not.
    sometimes the comment box does not appear

    Myblog : nonohaswit (.)blogspot (.co.id)

    ReplyDelete
  11. brother,, how to hide the Admin comment in the recent comment?

    ReplyDelete
  12. the css code rather sisplayed as text on my page header and the widget code did not display any thing {blank}
    Help pls

    ReplyDelete
  13. I love the design. Please let me know if you update it in the future to show Disqus comments rather than blogger. Thanks!

    ReplyDelete
  14. This code does not work on my blog
    there is an error
    TypeError: json.feed.entry [i] .author [0] .uri is undefined

    Please help

    ReplyDelete

  15. Hello, it is the best Widget I have seen of recent comments. The problem I have, is that I only get one comment, if I only see one, you see the total comments below, but if I put two or more just one and the total number of comments is not seen either. I have tried even on a basic Blogger template and I have not achieved anything. The truth is that I do not know where the fault is.
    Greetings and Happy New Year.

    ReplyDelete