Parser JSON untuk Blogger · Komentar

Tabel Konten
  1. Bentuk Daftar 
    1. Penggunaan 
  2. Ekstra 
    1. Memanggil Data Komentar untuk Posting Tertentu 

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&hellip;</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>

Lihat Demo

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=generateCommentsData

Sayangnya 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.

12 Komentar

  • Unknown

    komplit njerit jnenge iki,
    garek dimodipikasi :-bd

    thank you

  • Kang Rian リアンさん

    Keren , dan seperti nya pertamax nih ! :D MANTAP OM TOVIC .. \o/

  • Admin

    benar-benar deh oom yang satu ini, selalu saja menemukan yang baru =p*

  • IRIL SAGITA

    Sore kak, untuk menambah emotikon pada script di atas adakah tambahan script- nya ?

    • Taufik Nurrohman

      Misalnya begini:

      commentContent = commentContent.replace(/\:\-?\)+/g, '<img src="smile.gif">');
      commentContent = commentContent.replace(/\:\-?\(+/g, '<img src="sad.gif">');
  • zezo

    How automatic slide in blogger

  • Kia Meliala

    \o/

  • Unknown

    izin copy gan

  • Kang Mousir

    Sebelumnya Saya ucapkan terima kasih mas, berkat artikel ini Saya muncul ide untuk membuat widget tentang penulis dengan jumlah kontribusi yang dilakukan pada suatu blog. Dalam widget yang dibuat ada keterangan total jumlah artikel dan komentar yang dipublikasikan dalam suatu blog.

    Saya sudah membuat script json-nya dan hasilnya pun cukup memuaskan, namun masalahnya muncul ketika diterapkan ke blog. Saya butuh data <data:post.author/> dan <data:post.authorPhoto.url/> yang di-generate secara otomatis. Hasilnya terjadi penolakan yang disebabkan oleh operator logika, sehingga saya mencoba menggunakan tag script lain sesuai artikel Tini, hasilnya lolos tetapi tag XHTML Blogger tidak bekerja semestinya dan tag ini hanya bekerja dalam tag <script></script>.

    Bagaimana mengatasi masalah ini agar bisa diterapkan di blog ? Dibawah ini adalah script yang Saya buat untuk menghitung jumlah postingan dan komentar berdasarkan penulis
    <div id="countComments">Loading...</div>
    <div id="countPosts">Loading...</div>
    <script>
    function countTotalPostsData(json) {
    var html = "",
    d = document,
    feed = json.feed,
    posts = feed.entry,
    countPosts = 0,
    postAuthorName = 'Kang Mousir',
    postAuthorAvatar = '//lh4.googleusercontent.com/-jKmQzQRGp4A/AAAAAAAAAAI/AAAAAAAAB-I/ywOxJ2c6JvA/s512-c/photo.jpg',
    countainer = d.getElementById('countPosts');

    if (feed.entry || feed.entry.length != 0) {
    for (var i = 0; i < posts.length; i++) {
    var post = posts[i],
    postsAuthorAvatar = post.author[0].gd$image.src,
    postsAuthorName = post.author[0].name ? post.author[0].name.$t : false;
    if(postsAuthorName == postAuthorName && postsAuthorAvatar == postAuthorAvatar){
    countPosts++;
    }
    }
    html += 'Jumlah Postingan : ' + countPosts;
    countainer.innerHTML = html;
    } else {
    countainer.innerHTML = '-';
    return;
    }
    }
    function countTotalCommentsData(json) {
    var html = "",
    d = document,
    feed = json.feed,
    comments = feed.entry,
    countComments = 0,
    postAuthorName = 'Kang Mousir',
    postAuthorAvatar = '//lh4.googleusercontent.com/-jKmQzQRGp4A/AAAAAAAAAAI/AAAAAAAAB-I/ywOxJ2c6JvA/s512-c/photo.jpg',
    countainer = d.getElementById('countComments');

    if (feed.entry || feed.entry.length != 0) {
    for (var i = 0; i < comments.length; i++) {
    var comment = comments[i],
    commentAuthorAvatar = comment.author[0].gd$image.src,
    commentAuthorName = comment.author[0].name ? comment.author[0].name.$t : false;
    if(commentAuthorName == postAuthorName && commentAuthorAvatar == postAuthorAvatar){
    countComments++;
    }
    }
    html += 'Jumlah Komentar : ' + countComments;
    countainer.innerHTML = html;
    } else {
    countainer.innerHTML = '-';
    return;
    }
    }
    </script>

    <script src="//diakali.blogspot.com/feeds/comments/default?alt=json-in-script&amp;reverse=false&amp;orderby=published&amp;max-results=9999&amp;callback=countTotalCommentsData"></script>
    <script src="//diakali.blogspot.com/feeds/posts/default?alt=json-in-script&amp;reverse=false&amp;orderby=published&amp;max-results=9999&amp;callback=countTotalPostsData"></script>

    • Taufik Nurrohman

      Coba begini pak:

      <script>
      var postAuthorName = &#39;<data:post.author/>&#39;;
      var postAuthorAvatar = &#39;<data:post.authorPhoto.url/>&#39;;
      </script>
      <script>
      //<![CDATA[
      function countTotalPostsData(json) { … }
      function countTotalCommentsData(json) { … }
      //]]>
      </script>

Komentar telah ditutup.