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:
- Coded in JavaScript using Blogger JSON Feed API
- Displays author's profile thumbnail - Author Avatar
- Links author avatar to its Google+ profile
- Animated Image preloader
- Shows post title
- Shows comment date
- Shows comment excerpt (short description snippet)
- Read more link
- Lightweight
- Fluid and responsive
- 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.
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.
Hovering mouse cursor on folder icon will display the post title where the comment is posted:
- 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 Checkif (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/AVvXsEgAGUfSnOl8Z80gfkB3nf4E6leIH9b9OTX5_A6kGYdeyDWGdLwiDFiBviv0bDAWrrvjSJCz_-CkNJYcTYjw1u7RpJBfat_lFl0hPlE_kv7AADKMtFU4PPpY8DM21SEgNMaR2xUN21hR6D0/s200/Icon.png'";
}
//################### Printing Listvar 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! =)
