Hiển thị các bài đăng có bình luận nhiều nhất cũng là cách hay để tạo sự chú ý, thu hút độc giả nhấp chuột vào liên kết bài đăng khi truy cập blog. Theo mình nghĩ blog mà bài đăng có nhiều phản hồi thì nên thêm widget này vào.
Sử dụng nguồn cấp feeds lọc các bài đăng có bình luận sau đó sắp xếp các bài đăng có bình luận nhiều nhất theo thứ tự giảm dần. Giới hạn số bài đăng từ url feeds là 150 bài đầu tiên để giảm độ trễ thời gian get, từ 150 bài đăng lọc lấy 10 bài đăng hiển thị có bình luận nhiều nhất theo thứ tự giảm dần. Phương pháp thực hiện như sau
Đầu tiên cần thêm mới một widget HTML/JavaScript trong Bố cục tiện ích vào vị trí muốn hiển thị ví dụ bên sidebar hay dưới footer. Tiếp theo vào chỉnh sửa theme trên tab Chuyển đến tiện ích bấm menu sổ xuống chọn chuyển đến widget vừa thêm mới ví dụ HTML3, trong thẻ <b:includable id='main'> của widget chèn thêm thẻ <b:attr name='class' value='widget HTML top-comments'/>
Bước tiếp theo chèn đoạn script dưới đây trước thẻ đóng </body>
<b:if cond='data:widgets.Blog.first.allBylineItems.comments>
<script>//<![CDATA[
function feed_(e) {
if (e.feed.entry) {
var a = [],f = 0,entry = '',
n = 10, // Số bài đăng hiển thị
l = 100, // Số ký tự đoạn trích tóm tắt
for (var k = 0; k < e.feed.entry.length; k++) {
entry = e.feed.entry[k]
if ('thr$total' in entry) {
if (entry.thr$total.$t > 0) {
a.push(entry.thr$total.$t + ':' + k)
}
}
}
a.sort(function(b, c) {
b = b.substr(0, b.indexOf(':'))
c = c.substr(0, c.indexOf(':'))
return c - b
})
f = (a.length > n) ? n : f = a.length
a = a.slice(0, f)
a.forEach(function(i) {
i = i.substr(i.indexOf(':') + 1, i.length)
entry = e.feed.entry[i]
for (var a = 0; a < entry.link.length; a++) {
if (entry.link[a].rel == "alternate") {
var g = entry.link[a].href // Liên kết bài đăng
break
}
}
var h = entry.title.$t, // Tiêu đề bài đăng
p = entry.thr$total.$t // Số bình luận bài đăng
if ('media$thumbnail' in entry) { // Ảnh bài đăng
var i = entry.media$thumbnail.url.replace('s72-c', 'w320-h180-p-k-no-nu')
} else {
var str = entry.content.$t,
at = str.indexOf("<img"),
bt = str.indexOf('src="', at),
ct = str.indexOf('"', bt + 5),
dt = str.substr(bt + 5, ct - bt - 5)
if (at != -1 && bt != -1 && ct != -1 && dt != "") {
i = dt
} else {
i = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/w320-h180-p-k-no-nu/safe_image.png'
}
}
if ('content' in entry) { // Đoạn trích tóm tắt
var q = entry.content.$t,
j = q.lastIndexOf("<a name='more'></a>")
if (j != -1) {
var r = q.substring(0, j)
} else {
var re = /<\S[^>]*>/g
q = q.replace(re, '')
if (q.length < l) {
r = q
} else {
q = q.substring(0, l);
r = q.substring(0, q.lastIndexOf(' '))
}
}
} else if ('summary' in entry) {
r = entry.summary.$t
}
var elem = document.querySelector('.top-comments>.widget-content'),
str = '<article class="post"><div class="post_thumb"><a href=' + g + ' title="' + h + '"><img alt="' + h + '" src=' + i + '></a></div><div class="post_title"><a href=' + g + ' title="' + h + '"><h2>' + h + '</h2></a></div><div class="post_meta"><a class="post-comment" href="' + g + '#comments" title="Bình luận">' + p + ' Bình luận</a></div><div class="post_snippet"><p>' + r + '...<a href="' + g + '#more" title="Đọc thêm">Đọc thêm</a></p></div></article>'
elem.innerHTML += str
})
}
}
document.write('<script src="/feeds/posts/default?alt=json-in-script&max-results=150&callback=feed_"><\/script>')
//]]></script>
</b:if>
Lí do đoạn script được đặt trong thẻ điều kiện <b:if cond='data:widgets.Blog.first.allBylineItems.comments> vì widget chỉ hiển thị bài đăng khi tác giả không tắt nhận xét blog. Phần css làm đẹp giao diện các bạn tự design theo sở thích của mình, lưu ý có thể thay đổi lại element của đoạn str = '<article class="post">...</article>' chèn lại những class đã có trong css, chẳng hạn lấy theo bố cục của các bài đăng trong widget Blog ngoài trang chủ.
