Blogger JSON Feed API - Feed Comment

Blogger feed comment lọc ra toàn bộ các bình luận hiện có trên blog, ta có thể dùng feed comment này để build ra các tiện ích như: bình luận gần đây hoặc trang thống kê toàn bộ bình luận.

Tương tự như feed post, feed comment cũng có 2 dạng cùng một số tiền tố bổ sung như

• /feeds/comments/default?alt=json&orderby=published (lọc ra 25 bình luận sắp xếp theo published)
• /feeds/comments/summary?alt=json&max-results=50&start-index=69 (lọc ra 50 bình luận bắt đầu từ vị trí thứ 69) 

Các dữ liệu thường lấy phục vụ cho build tiện ích

Xem demo 1 ví dụ nhỏ
demo
Theo ví dụ trên, nhận xét sẽ chỉ được tải khi bắt sự kiện click vào button, kết hợp với ajax get, bình luận sẽ luôn được làm mới mỗi khi click vào button mà không cần tải lại trang, điều này trên mạng chưa thấy blogger nào đề cập tới, đa phần đều load bình luận cùng với khi tải trang nên rất không tốt cho tối ưu tốc độ

Để build tiện ích giống demo bạn làm như sau.

Tạo 1 div để định nghĩa button và 1 div chứa nội dung bình luận

<button id="btn-cmt">Show Comment</button>
<div id="rc"></div>

Script

<!-- Sử dụng ajax yêu cầu có thư viện jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript'>
var numComments = 10, // số lượng bình luận, chính là giá trị max-results khi tải feed
    avatarSize = 36, // kích cỡ của ảnh đại diện 
    characters = 36; // số kí tự bình luận muốn hiển thị

$(document).ready(function($) {
    // để làm mới bình luận và không cần tải lại trang sử dụng ajax get kết hợp click button
    $("#btn-cmt").click(function(e) {

        // xóa nội dung cũ 
        $("#rc").html("")

        // get bình luận 
        $.ajax({
            url: "/feeds/comments/summary",
            type: 'GET',
            // thay vì viết /feeds/comments/summary?alt=json&orderby=published&max-results=" + numComments thì ajax hỗ trợ cách viết như này nhìn chuyên nghiệp hơn
            data: {
                alt: 'json',
                orderby: "published",
                "max-results": numComments
            },
            jsonType: 'jsonp',
            success: function(json) {
                for (var i = 0; i < json.feed.entry.length; i++) { // lặp qua từng entry để lấy dữ liệu
                    // lấy link dẫn đến bình luận
                    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
                        if (json.feed.entry[i].link[j].rel == 'alternate') {
                            var a = json.feed.entry[i].link[j].href;
                            break;
                        }
                    }
                    d = json.feed.entry[i].author[0].gd$image.src.replace("s512-c", "s" + avatarSize + "-c"); // lấy avatar của người bình luận và resize
                    h = json.feed.entry[i].author[0].uri.$t // lấy link profile của người bình luận
                    e = json.feed.entry[i].author[0].name.$t; // lấy tên của người bình luận
                    f = json.feed.entry[i].summary.$t.replace(/(<([^>]+)>)/gi, ""); // lấy nội dung bình luận, thay thế kí tự đặc biệt và cắt chuỗi
                    g = f.substring(0, characters);
                    // append toàn bộ dữ liệu đã lấy vào div có id là rc
                    document.getElementById("rc").innerHTML += '<div class="rc-content"><div class="rc-img"><a href=' + h + '><img src=' + d + ' /></a></div><div class="rc-main"><span class="rc-user"><a href=' + a + ' target="_blank">' + e + '</a></span><span class="rc-summary">' + g + '</span></div></div>'
                }
            }
        });
        // đoạn này để ẩn/hiện menu con khi click
        return e.preventDefault(), $div = $("#rc"), $div.toggle(), $("#rc").not($div).hide(), !1
    })
});
</script>

CSS

#btn-cmt{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:normal;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}
#rc{right:-2px;box-shadow:0 2px 10px rgba(0,0,0,.2);border-radius:2px;padding:10px 15px;top:11px;right:-2px;background:#fff;overflow:hidden;z-index:10;width:300px;max-height:400px;overflow-y:auto;text-align:left;position:relative;display:none}
#rc::-webkit-scrollbar-thumb{background:hsla(0,0%,53.3%,.4)}
#rc::-webkit-scrollbar{width:8px}
#rc .rc-content .rc-img{margin-right:10px;float:left}
#rc .rc-content .rc-img img{border-radius:100%}
#rc .rc-content{margin-bottom:15px}
#rc .rc-content .rc-user{margin-right:4px}
#rc .rc-content .rc-user a{font-size:14px;font-weight:700;color:#111}
#rc .rc-content .rc-summary{font-size:14px;display:block}

Bạn lưu ý đọc thật kĩ những dòng tôi comment để hiểu quá trình lấy và hiển thị dữ liệu nhé, bài viết không nhằm mục đích chia sẻ tiện ích, cái tôi muốn truyền đạt đó là bạn hiểu được cách thức lấy dữ liệu từ feed và append vào các thẻ html, kết hợp với css để tự build cho mình những tiện ich đẹp - độc - lạ, tránh đi theo lối mòn copy từ blog này sang blog kia rồi gán copyright thành của mình

Để lại bình luận nếu bạn gặp khó khăn và Chúc thành công !