Parser JSON untuk Blogger · Komentar
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="//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=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:
IRIL SAGITA
ok, sip bermanfaat, makasih !
zezo
How automatic slide in blogger
Taufik Nurrohman
→ /search/label/Slideshow?max-results=20
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&reverse=false&orderby=published&max-results=9999&callback=countTotalCommentsData"></script>
<script src="//diakali.blogspot.com/feeds/posts/default?alt=json-in-script&reverse=false&orderby=published&max-results=9999&callback=countTotalPostsData"></script>
Taufik Nurrohman
Coba begini pak: