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...

How To Make A Recent Comments I (Feed Widget)

Two-way communication between the owners of a site, especially blogs, with their visitor are one of the most important thing for the development of the sites. In addition to ongoing the relationships with their visitors, the owners of the sites/blogs can digg up the information about strenghts and weaknesses of their sites, what are the visitors like and dislike, criticisms and suggestion and much more.



One of the way to building two-way communication within a site is to provide a visitors comments facilities. Almost all of the sites/blogs based on CMS like Blogger, Wordpress, Drupal, Joomla, Mambo. already have comments facilities for the visitors by defaults.



But the problem is... Along with increasing the number of articles made, it's rather difficult for the owner of sites to control (read and answer) because the location of the scattered comments in various articles that have been made.



The difficulty in controlling visitors comments that spread in various articles can be overcome by "Recent Comments" facilities. This Recent Comments will show up the last comments by the visitors in an article, hence the blog owner will soon find out that there are new comments in their articles, so that they can make a follow up.

In this article we will discuss how to make a recent comments with feed widget on Blogger.

Because we will use the Feed Widget, then first we must ensure that the Comment Feeds are enabled.



Go to your Dashboard >> click Settings of your Blog >> click Site Feed. You should set the “Blog Comment Feed” and “Per-Post Comment Feeds” to either “Short” or “Full”. Do not choose “None”. Then Save the Settings.  

 

Next Go back to Layout >> Page Elements >> Add a Gadget in your sidebar, select “Feed”. You will be prompted to enter a Feed URL.

 

There are two Feed URL we can used by default, you can choose one of them.

Atom Feed for the blog commnets like this: 

http://doit2us.blogspot.com/feeds/comments/default

 or RSS Feed as Blog Comments as follows :

http://doit2us.blogspot.com/feeds/comments/default?alt=rss

 

Please replace http://doit2us.blogspot.com with yours. After finished click Continue

 Next, You can set "how to display" your  recent comment. You can named your Recent Comments by insert the Title column, Setting how much last comment you want to show up (5 by default). You can also choose to displayed the dates and name of the authors or not. When you are satisfied with the setting, click to Save the Changes.

You still can set the position of your recent comments by drag and drop the widget to the relevant part of your template and Save the Template. 

In the next post we will discuss How To Make A Recent Comments With JavaScript