How To Make A Recent Comments II (JavaScript)

In previously post we have already discuss how to make a recent comments with Feed Widget.  Because using the URL Feed facilities, the possibility problem that will be arrise is when the server of URL Feed that we used is going "Down". Although this was very rare.

In this article we will discuss how to make a recent comments with JavaScript.

Actually there are several reason why these method are usually avoided by the blog/site owner to use it.
The negative point's of using JavaScript, Beside can make a web page loading become slow, nearly most of the Recent Comments Tutorial using JavaScript, upload their scripts onto their external sites and provide you a code for insertion into your template, this makes the site/blog owner being worried about the possibility of inserted code that could endanger their site/blog or malicious script.

Usually, inside the code that they provide willl have the script that look like this :

<script src="http//externalsite.com/.....html/filename.js">
</script>

From the blog visitors, when the page loads, their browser will visited that external site to read and run the script of .js file. That is where the problems will come "if" the .js file contained with malicious script.
Because of this situation, many users decided to configured their browser to disable the script, so that the script will not be able to see/read, and this means that your visitor couldn't be able to view your recent comments.
So.. please be carefulll if you have an external JavaScript file link make sure that there is no malicious script inside, and regularly check the script from the initial script change. More better if you have your own Script on your own server.

To avoid the problem above, in this article, we are not going to upload the script to our site and makes you link to it. We'll let you have the full JavaScript code that we have used so that you know what goes into it. 

Go to your Dashboard >> Layout >> Page Elements >> and Add a Gadget >> Choose and click HTML/JavaScript gadget.

Named your new gadget, write in title column ex: New Blogger Tips Recent Comments.

Copy  the code below and Paste into the Content column.

<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 5; i  ) {
var entry = json.feed.entry[i];
var ctlink;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k  ) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");

document.write('<li>');
document.write('<a href="'   ctlink   '">'   entry.author[0].name.$t   '</a>');
document.write(' on '   pttitle);
document.write('<br/>');
if (comment.length < 100) {
document.write(comment);
}
else
{
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment   '...<a href="'   ctlink   '">(more)</a>');
}
}
document.write('</li>');
document.write('<div style="font-size:75%;text-align:center"><a href="http://doit2us.blogspot.com/2010/03/how-to-make-recent-comments-ii.html">Learn How To Make This Widgets</a></div>');
}
</script>
<script src="http://doit2us.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>
<noscript>You need to enable JavaScript to read this.</noscript>

You can set your "recent comments" display, by adjust these value..

The 5 value is the number of the last comment that will appear in your recent comments gadget.
The 100 value is the number of lenght characters comment in your recent comments gadget.
Don't forget to change http://doit2us.blogspot.com with your URL Site / Blog.

After finished configuring your HTML/JavaScript (setting the value and replace the URL) click save, and view your blog. You should have a Recent Comments widget showing the latest comments posted on your Blog.

This script has been added to the anticipation if our visitor disabled the JavaScripts browser, There will be warning text below our "recent comments title" that's says "You Need to enable JavaScript to read this"

That's all... Happy controlling your Recent Comments...