GSD Recent Comment” Sidebar link references fixed

For anyone who cares, I finally took the time to “fix” the html links in the “Recent Comments” sidebar.

While they look good, it has always annoyed me.

The format is this.

(poster name) on (post title) comment bits…(more).

Clicking on any of the HTML links just took you to the top of the post the comment was left on. Not the comment itself as expected.

While users could scroll down to the comment section, it just wasn’t as right or polite as I wanted.

I’m not really much of a coder, particularly JavaScript, but I decided it was time to try to fix it.

So I located the correct comment link HTML format from a post comment as a sample to examine.

http:// <blogtitlelinkurl> ?showComment= <numbersetA> #c <numbersetB>

This code correctly takes you directly to the respective comment under the post.

Then I copied the existing HTML codes the JavaScript was generating into my notepad text editor and set out to compare them all.

Very quickly I found that the original JavaScript code (included at the end of this post for the curious) was replacing the “#” symbol in the working comment HTML structure with a “#comment-“ string instead.  This routed the link-click to the post title when Blogger couldn’t figure it out.

Looking at the JavaScript code I found a line “ctlink = ctlink.replace("#", "#comment-");” and replaced it with “ctlink = ctlink.replace("#", "#");” which was a dirty way to not muck the code up but keep the variable structure the same.  (Note: “ctlink” variable name stands for “comment link” I think).

Testing finds that it works perfectly.

Clicking on either the (poster name) or (more) parts will now take to directly to the comment itself, not the post title.

While clicking on the (post title) link takes you to the top of the post itself.

The only thing I still needed to do (being a bit neurotic) is that while that worked, the (post title) HTML code was sloppy as the JavaScript generating it still seemed to either be tagging it with, or failing to remove the “?showComment=numbers”  bit at the end.  It did work, it’s just not pretty.

That still needed fixin’.

Trial and Editor

Luckily I had recently found the following W3Schools Online Web Tutorials site that also has their “Tryit Editor”.

This is really, really cool as it lets coding doofs like me copy/paste/tweak/test code and scripts into their editor and view the results without nuking my deployed blog until fully tested.

Once I think I have the solution down, I then upload the changes to my gsdtemplatetester blog page.  This is the proving ground where I can experiment with code and templates on a “real” Blogger deployment before moving those changes into production on the GSD blog page template proper.

So I set to work using the JavaScript descriptions there, picking apart more of the code elements and variables, and via trial and editor, found the line to fix.

Originally it was

var ptlink = ctlink.split("#");

Where the variable name “ptlink” stands for “post title link” I think.

Which I finally worked out needed to be

var ptlink = ctlink.split("?showComment=");

Replacing that finally resulted in the comment sidebar (post title) link returning the HTML code format

http:// <blogtitlelinkurl>

and not the incorrect (but still functional)

http:// <blogtitlelinkurl> ?showComment= <numbersetA>

Hurrah! The Recent Comment sidebar links now all work correctly and the HTML code is fully correct as well.

Hopefully this will make monitoring and following the recent comments a bit more enjoyable and efficient for readers.

Cheers!

--Claus V.

Note:

For posterity, here is the original (working but barely) and fixed (working great) JavaScript code I am using if anyone cares to study it more.  I’m clearly not the original author of the JavaScript.  It came from somewhere within this Now See This: Adding Comments to your Blogger sidebar GSD post back in 2008 (gosh has it been that long?!!).

Original (working but barely) JavaScript code

<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 < 120) {
document.write(comment);
document.write('<li>');document.write('<br/>');
}
else
{
comment = comment.substring(0, 120);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '">(more)</a>');
document.write('<li>');document.write('<br/>');
}
}
document.write('</li>');
document.write('<div style="font-size:95%;text-align:center"><a href="http://grandstreamdreams.blogspot.com/feeds/comments/full">GSD RSS Comment Feed link</a></div>');
}
</script>
<script src="http://grandstreamdreams.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>
<noscript>You need to enable JavaScript to read this.</noscript>

I’ve also linked to some of the JavaScript examples and actions at w3schools page as well for easy cross-reference to show what these various calls are doing.

Fully Working JavaScript code (changes in yellow)

<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("#", "#");
var ptlink = ctlink.split("?showComment=");
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 < 120) {
document.write(comment);
document.write('<li>');document.write('<br/>');
}
else
{
comment = comment.substring(0, 120);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '">(more)</a>');
document.write('<li>');document.write('<br/>');
}
}
document.write('</li>');
document.write('<div style="font-size:95%;text-align:center"><a href="http://grandstreamdreams.blogspot.com/feeds/comments/full">GSD RSS Comment Feed link</a></div>');
}
</script>
<script src="http://grandstreamdreams.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>
<noscript>You need to enable JavaScript to read this.</noscript>