Berikut ialah 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 sanggup 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>, kemudian memanggil data JSON dengan memakai 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="//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 menyerupai 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 tumpuan resmi mengenai JSON Blogger versi 1.0 di Google Developer. Dulu memang pernah ada tapi kini sudah tidak ada lagi. Yang ada kini lebih banyak ditujukan untuk API Blogger versi 3.0+ yang membutuhkan autentikasi.