Berikut adalah generalisasi fungsi untuk mengubah data JSON komentar Blogger menjadi markup HTML sesuai dengan keinginan. Saya sudah mendefinisikan ulang data-data yang penting ke dalam variabel, sehingga Anda bisa memodifikasi skrip ini dengan lebih mudah:
Bentuk Daftar
function generateCommentsData(json) {
// Poor configuration settings, develop them yourself!
var config = {
containerID: 'result-container', // Container ID to show the generated data
avatarSize: 50, // Default avatar size
text: {
anon: 'Anonymous'
}
};
var html = "",
item = "",
w = window,
d = document,
feed = json.feed,
container = d.getElementById(config.containerID),
postCommentTotal = +feed.openSearch$totalResults.$t, // The comment feeds' total (all)
postCommentStartIndex = +feed.openSearch$startIndex.$t, // The comment feeds' start index
postCommentPerPage = +feed.openSearch$itemsPerPage.$t, // The comment feeds' max results per page or per feed request
blogID = /\:blog-?(\d+)(\.|$)/.exec(feed.id.$t) ? /\:blog-?(\d+)(\.|$)/.exec(feed.id.$t)[1] : false, // The blog ID
postID = /\.post-?(\d+)(\.|$)/.exec(feed.id.$t) ? /\.post-?(\d+)(\.|$)/.exec(feed.id.$t)[1] : false, // The current post ID (if any)
postURL = false, // The current post URL (if any)
blogTitle = feed.title.$t, // The comment feeds' title
blogAuthorName = feed.author[0].name ? feed.author[0].name.$t : config.text.anon, // The blog/post author name
blogAuthorAvatar = feed.author[0].gd$image.src.replace(/\/s\d+(\-c)?\//, '/s' + config.avatarSize + '-c/'), // The blog/post author profile avatar URL
blogGeneratorName = feed.generator.$t, // The blog generator name (Blogger)
blogGeneratorURL = feed.generator.uri; // The blog generator URL (http://www.blogger.com)
// Remove the leading `http://` or `https://` in blog/post author profile avatar URL
// blogAuthorAvatar = blogAuthorAvatar.replace(/^https?\:/, "");
// No container found
if (!container) {
alert('Container not found.');
return;
}
// Getting the current post URL (if any)
if (postID) {
for (var h = 0, hen = feed.link.length; h < hen; ++h) {
item = feed.link[h];
if (item.rel == 'alternate') {
postURL = item.href;
break;
}
}
}
// No comments yet
if (!feed.entry || feed.entry.length === 0) {
container.innerHTML = '<p>No comments yet.</p>';
return;
}
// Building the markup ...
html += '<h1>' + blogTitle + '</h1>';
html += '<p><b>Blog ID:</b> ' + blogID + '</p>';
html += '<p><b>Post ID:</b> ' + postID + '</p>';
html += '<p><b>Post URL:</b> ' + postURL + '</p>';
html += '<p><b>Blog Author Name:</b> ' + blogAuthorName + '</p>';
html += '<p><b>Blog Author Avatar URL:</b> ' + blogAuthorAvatar + '</p>';
html += '<p><b>Total Comments:</b> ' + postCommentTotal + '</p>';
html += '<p><b>Comments Per Page:</b> ' + postCommentPerPage + '</p>';
html += '<p><b>Comments Start Index:</b> ' + postCommentStartIndex + '</p>';
html += '<hr>';
html += '<ol>';
var comments = feed.entry;
for (var i = 0, ien = comments.length; i < ien; ++i) {
var comment = comments[i], // A single comment feed object
commentID = comment.id.$t, // The comment ID
commentPublish = comment.published.$t, // The comment publishing time in ISO format
commentUpdate = comment.updated.$t, // The comment updating time in ISO format
commentDate = commentPublish, // The comment publishing time in timestamp format you defined in the dashboard
commentAuthorName = comment.author[0].name ? comment.author[0].name.$t : config.text.anon, // The comment author name
commentAuthorURL = comment.author[0].uri ? comment.author[0].uri.$t : false, // The comment author profile URL
commentAuthorAvatar = comment.author[0].gd$image.src.replace(/\/s\d+(\-c)?\//, '/s' + config.avatarSize + '-c/'), // The comment author profile avatar URL
commentContent = comment.content ? comment.content.$t : comment.summary.$t.replace(/<br *\/?>|[\s]+/gi, ' ').replace(/<.*?>|[<>]/g, ""), // The comment content
commentParent = false, // The comment parent ID (if any, for child comments)
commentPermalink = false, // The comment permalink
commentIsAdmin = commentAuthorName === blogAuthorName || commentAuthorAvatar === blogAuthorAvatar, // Is this comment was created by the blog/post author?
commentDeleteURL = false; // The comment delete URL
// Remove the leading `http://` or `https://` in comment author profile avatar URL
// commentAuthorAvatar = commentAuthorAvatar.replace(/^https?\:/, "");
for (var j = 0, jen = comment.link.length; j < jen; ++j) {
item = comment.link[j];
if (item.rel == 'self') {
// Getting the original comment ID
commentID = item.href.split('/').pop();
// Getting the comment delete URL
commentDeleteURL = item.href.replace(/\/feeds\/(\d+)\/(\d+)\/comments?\/(default|summary)\/(\d+)/, '/delete-comment.g?blogID=$1&postID=$4');
}
// Getting the comment permalink URL
if (item.rel == 'alternate') {
commentPermalink = item.href;
}
// Getting the comment parent ID (if any)
if (item.rel == 'related') {
var parentID = item.href.split('/').pop();
commentParent = commentID !== parentID ? parentID : false;
}
}
// Getting the comment publishing time in timestamp format you defined in the dashboard
for (var k = 0, ken = comment.gd$extendedProperty.length; k < ken; ++k) {
item = comment.gd$extendedProperty[k];
if (item.name == 'blogger.displayTime') {
commentDate = item.value;
break;
}
}
// Building the markup ...
html += '<li>';
html += '<p><b>ID:</b> ' + commentID + '</p>';
html += '<p><b>Publish:</b> ' + commentPublish + '</p>';
html += '<p><b>Update:</b> ' + commentUpdate + '</p>';
html += '<p><b>Date:</b> ' + commentDate + '</p>';
html += '<p><b>Author:</b> ' + commentAuthorName + '</p>';
html += commentAuthorURL !== false ? '<p><b>URL:</b> ' + commentAuthorURL + '</p>' : "";
html += '<p><b>Avatar URL:</b> ' + commentAuthorAvatar + '</p>';
html += commentParent !== false ? '<p><b>Parent ID:</b> ' + commentParent + '</p>' : "";
html += '<p><b>Permalink:</b> ' + commentPermalink + '</p>';
html += '<p><b>Status:</b> ' + (commentIsAdmin ? 'admin' : 'guest') + '</p>';
html += '<p><b>Delete URL:</b> ' + commentDeleteURL + '</p>';
html += '<p><b>Message:</b></p>';
html += '<div>' + commentContent + '</div>';
html += '</li>';
}
// Building the markup ...
html += '</ol>';
// Show the generated data to the container ...
container.innerHTML = html;
}Penggunaan
Urutannya dimulai dari penulisan HTML untuk menampung data yang akan digenerasikan oleh fungsi di atas, dilanjutkan dengan memasukkan fungsi di atas ke dalam tag <script>, lalu memanggil data JSON dengan menggunakan nilai parameter URL callback berupa generateCommentsData, sesuai dengan nama fungsi di atas:
<div id="result-container">Loading…</div>
<script>
function generateCommentsData(json) { … }
</script>
<script src="http://nama_blog.blogspot.com/feeds/comments/default?alt=json-in-script&reverse=false&orderby=published&callback=generateCommentsData"></script>Ekstra
Memanggil Data Komentar untuk Posting Tertentu
Gunakan format URL seperti ini untuk membatasi pemanggilan data komentar hanya untuk komentar-komentar yang terdapat pada posting dengan ID 6427706034645358331:
http://nama_blog.blogspot.com/feeds/6427706034645358331/comments/default?alt=json-in-script&reverse=false&orderby=published&callback=generateCommentsDataSayangnya Saya tidak berhasil menemukan referensi resmi mengenai JSON Blogger versi 1.0 di Google Developer. Dulu memang pernah ada tapi sekarang sudah tidak ada lagi. Yang ada sekarang lebih banyak ditujukan untuk API Blogger versi 3.0+ yang membutuhkan autentikasi.
