How to fix threaded comments and the reply button on Blogger comments

A few people have emailed me about having issues with replying to comments on their blog, after resolving their issues with the reply button I realised that maybe a lot more people are having this problem too so thought I’d write up a tutorial on how to fix it. This can be complicated if you aren’t used to editing HTML so please take your time and read the instructions very carefully! If you are still having problems with this I am available to hire here.

[postwarning]

1. Enable Threaded Comments

We need to make sure that your blog is set up for threaded comments first and make sure the settings are correct. Go to Settings > Other > Site Feed. For Allow Blog Feed, choose Custom and set Pre-Post Comment Feed to Full. Now go to Settings > Posts and Comments and set Comment Location to Embedded.

2. Adding or Fixing Reply Option

Go to Template > Edit HTML. Select Jump to Widget > Blog1 and find the following line

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Change Blog1 to Blog2. This will remove the corrupted gadget and revert it so it is functioning properly again. If you are using an older version of Blogger, it may ask if you wish to delete this gadget, say yes. Save Template.

3. Replace threaded script

If that doesn’t fix the reply button, then try this method. Go to Template > Edit HTML. Select Jump to Widget > Blog1 or Blog2. Under <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> or <b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog'/> you will see the following code

<b:includable id='threaded_comment_js' var='post'>

Click the black arrow beside the numbering on the left for the line <b:includable id='threaded_comment_js' var='post'>...</b:includable> and the full nested code will appear.

Delete this entire code, from <b:includable id='threaded_comment_js' var='post'> to </b:includable>. In it’s place, paste the following

<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;
// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}
var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/delete-comment.g?blogID='
+ config.blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};
var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;
var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};
var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}
// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};
var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};
// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>

Save the template and refresh your browsers cache.

4. Replace all threaded code

If the above fixes aren’t working the best thing to do is replace the scripts altogether. This will work 99.9% of the time but it needs to be done correctly. Setup a test blog with the simple template (or the same default Blogger template your blog uses). Go into Template > Edit HTML. Select Jump to Widget > Blog1. Further down under this you’ll see the following

<b:includable id='threaded-comment-form' var='post'> ... </b:includable>
<b:includable id='threaded_comment_js' var='post'> ... </b:includable>
<b:includable id='threaded_comments' var='post'> ... </b:includable>

They are nested, meaning that if you click the arrow on the left that the ... part will expand to show the rest of the code. You’ll need to copy the entire thing for all three parts and add/replace it to your real blog in the same area which is usually under <b:includable id='status-message'> ... </b:includable>. This can be difficult if you aren’t used to HTML or Bloggers HTML editor, so take your time and be careful.

5. Have a third party template? Contact original designer / developer

As I mentioned step 4 will work 99.9% of the time, but it may not work if you have a custom built template which does not use Bloggers default code (note that this is different to a customised Blogger template). If you have tried the above steps correctly without any luck and do have a custom built template then my advice is to contact the designer/developer. The information will usually be in the footer of your template.

6. Still having issues?

Get in touch here to hire me to fix it for you.

Related Posts

New Blogger comment system & other changes.
Backup your entire blog on blogger or wordpress – template, images and posts.
Restore your blog backup.
How to find code in HTML Editor.
Understand CSS and Bloggers Template.