Komentar Blog Error, Tombol Reply Not Working, Apa Solusinya?

bungfrangki Tutorial Blog Komentar Blog Error, Tombol Reply Not Working, Apa Solusinya?

Beberapa hari ini saya banyak menerima pesan, keluhan tentang komentar Blogger/Blogspot yang error. Masalahnya tentang tombol reply comment yang tidak berfungsi saat di klik, dan semua konten balasan komentar menjadi lurus berjejer ke bawah.

Tidak bisa dibedakan lagi mana main comments dan mana reply comments (komentar balasan). Baik komentar balasan dari Admin blog terkait dan juga komentar pengunjung.

Anehnya, masalah ini hanya terjadi pada beberapa blog saja. Yaitu blog yang mempunyai ciri-ciri sebagai berikut:

Blog yang sudah lama/berumur. Sudah dibuktikan dengan menginstall template yang sama pada blog yang baru, kolom komentar berfungsi sebagaimana mestinya.
Blog yang masih menggunakan layout template lama (layout Versi 2). Blog yang sudah menggunakan template dengan layout v.3 aman-aman saja.

Nah, apa yang harus dilakukan?

Beberapa tips untuk mengatasi komentar Blogger error terkait tombol balas (reply) tidak berfungsi dan threaded comments yang menjadi lurus/berjejer, telah saya sarankan untuk diterapkan pada blog yang mengalami masalah tersebut.

Yaitu sebagai berikut.

Langkah 1
Mengganti kode Blog1 pada kode semacam ini dengan menjadi Blog2

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

Hasilnya seperti ini:

<b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog' version='1'>

Langkah 2
Mengganti seluruh kode yang dibungkus oleh kode berikut:

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

Dengan kode di bawah ini:

<b:includable id='threaded_comment_js' var='post'>
<script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var postId = '<data:post.id/>';
var feed = '<data:post.commentFeed/>';
var authorName = '<data:post.author/>';
var authorUrl = '<data:post.authorUrl/>';
var blogId = '<data:top.id/>';
var baseUri = '<data:post.commentBase/>';
// <![CDATA[
feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
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) {
console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
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 = feed;
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 == authorName
&& comment.author.profileUrl == authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return baseUri + '/delete-comment.g?blogID=' + 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 tok = 'comment-form_';
var hash = window.location.hash || '';
var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;
// Configure commenting API:
var configJso = {
'maxDepth': 2
};
var provider = {
'id': postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'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>

Langkah 3

Jika masih ada kode berikut ini:

BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');

Ganti dengan kode ini:

BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');

Setelah menerapkan langkah-langkah di atas, ternyata sama saja. Tidak ada perubahan. Komentar TETAP ERROR.

Masalahnya masih sama.

Yang diakibatkan oleh kode berikut ini:

var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;

Yang menghasilkan output (selalu saja) seperti ini:

var Items = null;
var Msgs = null;
var Config = {};

Harusnya di dalam 3 baris kode itu terdapat output berupa ID konten komentar pada blog terkait.

Solusinya, ikuti tutorial terbaru ini: Cara Mengatasi Threaded Comment dan Reply Comment Blogger Error

Terima kasih!