This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Thursday, 4 October 2018

Blogger JSON Feed API - Recent comments with load more button


Recent comments with load more button sử dụng dữ liệu lấy từ feed comments kết hợp với ajax giúp bạn có thể tải thêm các nhận xét cũ mà không cần tải lại trang. Đây là 1 thủ thuật khá hay giúp bạn có thể dễ dàng kiểm soát bình luận trên trang của mình mà không cần vào trang quản trị

Xem demo

demo

Yêu cầu template đã tích hợp jQuery, bạn có thể đặt code ở bất kì vị trí nào nằm trong cặp thẻ <body>...</body>

Code HTML

<div id="rc">
    <h3>New feedbacks</h3>
    <div class="_rc"></div>
    <div class="_rc-more"><a class="rc-load">Load more</a>
        <div class="loader"><span></span><span></span><span></span></div>
    </div>
</div>

Code CSS

.rc-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 .7em;
}

.rc-img {
    max-width: 80px;
    margin: 0 .5em 0 0;
}

.rc-img img {
    height: 40px;
    width: 40px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.rc-user a {
    color: #000;
    font-weight: bold;
    text-decoration: none
}

.rc-user,
.rc-summary {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

._rc-more .loader {
    display: none
}

.rc-load {
    cursor: pointer;
    padding: 3px 15px 6px;
    border: 1px solid #ddd;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px
}

.rc-load:hover {
    background: #f5f5f5
}

.loader span {
    margin: 0 3px 0 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #000;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-animation: loader .8s linear infinite alternate;
    -moz-animation: loader .8s linear infinite alternate;
    -o-animation: loader .8s linear infinite alternate;
    animation: loader .8s linear infinite alternate
}

.loader span:nth-of-type(1) {
    -webkit-animation-delay: -.8s;
    -moz-animation-delay: -.8s;
    -o-animation-delay: -.8s;
    animation-delay: -.8s
}

.loader span:nth-of-type(2) {
    -webkit-animation-delay: -.5s;
    -moz-animation-delay: -.5s;
    -o-animation-delay: -.5s;
    animation-delay: -.5s
}

.loader span:nth-of-type(3) {
    -webkit-animation-delay: -.2s;
    -moz-animation-delay: -.2s;
    -o-animation-delay: -.2s;
    animation-delay: -.2s
}

@-webkit-keyframes loader {
    from {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-moz-keyframes loader {
    from {
        -moz-transform: scale(0);
        transform: scale(0)
    }
    to {
        -moz-transform: scale(1);
        transform: scale(1)
    }
}

@-o-keyframes loader {
    from {
        -o-transform: scale(0);
        transform: scale(0)
    }
    to {
        -o-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes loader {
    from {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0)
    }
    to {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
}

Code JS

<script>//<![CDATA[
// Recent comments with ajax load more button by Hung1001
var numComments = 10, // number of comments
    avatarSize = 36, // max avatarSize
    characters = 36; // number of characters

var _countC = 0,_totalC;

function loadComments(e) {
    for (var a = 0; a < e.feed.entry.length; a++) {
        for (var t = 0; t < e.feed.entry[a].link.length; t++)
            if ("alternate" == e.feed.entry[a].link[t].rel) {
                var r = e.feed.entry[a].link[t].href;
                break
            } var n = e.feed.entry[a].author[0].gd$image.src;
        if ("https://img1.blogblog.com/img/b16-rounded.gif" !== n && "https://img1.blogblog.com/img/blank.gif" !== n) var s = e.feed.entry[a].author[0].gd$image.src.replace("s512-c", "s" + avatarSize + "-c");
        else s = "//lh4.ggpht.com/-ntdKjBQECcg/W1anAMHdApI/AAAAAAAAHAU/33XLL1zWB48qhyaufndHFjWU5VRkFUrHACLcBGAs/s" + avatarSize + "-c/anonymous.png";
        if (e.feed.entry[a].author[0].uri) var o = e.feed.entry[a].author[0].uri.$t;
        else o = "javascript:void(0)";
        var c = e.feed.entry[a].author[0].name.$t,
            l = e.feed.entry[a].summary.$t.replace(/(<([^>]+)>)/gi, ""),
            i = l;
        if (l.length > characters) {
            var d = l.substring(0, characters - 3),
                u = d.lastIndexOf(" ");
            l = d.substring(0, u) + " ..."
        }
        $("._rc").append('<div class="rc-content"><div class="rc-img"><a href=' + o + "><img src=" + s + ' /></a></div><div class="rc-main"><span class="rc-user"><a href=' + r + ">" + c + '</a></span><span class="rc-summary" title="' + i + '">' + l + "</span></div></div>")
    }
}
$(function() {
    $.ajax({
        url: "/feeds/comments/summary",
        type: "get",
        data: {
            alt: "json",
            "max-results": numComments
        },
        dataType: "jsonp",
        jsonpCallback: "loadComments",
        success: function(e) {
            _totalC = e.feed.openSearch$totalResults.$t;
            _countC += e.feed.entry.length;
            _totalC <= numComments && $(".rc-load").hide();
            $(".rc-load").on("click", function(e) {
                e.preventDefault();
                var a = $(this);
                _countC < _totalC && ($("._rc-more .loader").show(), a.hide(), setTimeout(function() {
                    $.ajax({
                        url: "/feeds/comments/summary",
                        type: "get",
                        data: {
                            alt: "json",
                            "max-results": numComments,
                            "start-index": _countC + 1
                        },
                        dataType: "jsonp",
                        jsonpCallback: "loadComments",
                        success: function(e) {
                            a.show();
                            $("._rc-more .loader").hide();
                            _countC += e.feed.entry.length;
                            _countC == _totalC && a.html("All comments have been loaded !")
                        }
                    })
                }, 1000))
            })
        }
    })
});
//]]></script>

Lưu mẫu và kiểm tra

Tùy chỉnh: bạn tự viết css theo ý thích, nếu có id class hoặc biến trong script nào trùng vui lòng đổi tên để code hoạt động đúng

Chúc thành công !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js