Blogger JSON Feed API - Recent Posts with load more button

Recent Posts with load more button được thiết kế dành riêng cho trang bài viết (item), đây là một tiện ích phù hợp cho những website dạng tin tức, thủ thuật,...với số lượng bài đăng lớn muốn tải thêm bài viết trực tiếp tại trang đang truy cập mà không muốn quay trở về homepage. Recent Posts with load more button sử dụng blogger feed và ajax để lấy và tải thêm dữ liệu.

Xem demo
demo
Thông thường với ajax load more ta thường dùng 2 loại : load more khi scroll tới thành phần và load more khi click vào button. Trong bài này tôi chỉ đề cập tới trường hợp load more khi click vào button.

Vì sao ? Thông thường widget này ta sẽ đặt ở cuối bài viết (.post-footer). Với trường hợp load more khi scroll, ví dụ blog của tôi có khoảng vài nghìn bài, người dùng muốn cuộn xuống xem phần footer thì sẽ phải cuộn cho tới khi load hết vài nghìn bài đó mới xuống tới footer, như vậy thật rất không hợp lý. Chính vì thế ta nên dùng load more dạng button, sẽ giúp người dùng chủ động hơn trong việc tiếp cận thêm các bài viết

CSS cơ bản (bạn tự căn chỉnh cho phù hợp với blog)

/* CSS CONTENT */
.rc-item{border-bottom:1px solid #eee;min-height:170px;margin:0 0 1em}
.rc-item:last-child{border:0}
.rc-thumb{float:left;width:240px;height:150px;margin:0 1% 2% 0}
.rc-thumb img{width:100%;height:100%;border-radius:4px}
.rc-item,.recent-loading{clear:both}
.rc-title a{font-size:19px;color:#444242;text-decoration:none;font-weight:bold;cursor:pointer}
.rc-meta{font-size:15px}
.rc-title,.rc-meta{margin:0 0 .5em}
.rc-author{position:relative;padding:0 1.5em 0 0}
.rc-author::after{content:"";width:4px;height:4px;background:#797878;border-radius:4px;position:absolute;top:7px;right:11px}
.rc-content{line-height:1.4;font-size:17px;letter-spacing:.01rem}

/* CSS LOADING */
.recent-loading{text-align:center}
.loading{display:none}
.loading span{display:inline-block;width:20px;height:20px;background:#000;border-radius:100%;-webkit-animation:loading .8s linear infinite alternate;-moz-animation:loading .8s linear infinite alternate;-o-animation:loading .8s linear infinite alternate;animation:loading .8s linear infinite alternate}
.loading span:nth-of-type(1){animation-delay:-.8s}
.loading span:nth-of-type(2){animation-delay:-.5s}
.loading span:nth-of-type(3){animation-delay:-.2s}
@-webkit-keyframes loading{from{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}
@-moz-keyframes loading{from{-moz-transform:scale(0)}to{-moz-transform:scale(1)}}
@-o-keyframes loading{from{-o-transform:scale(0)}to{-o-transform:scale(1)}}
@keyframes loading{from{transform:scale(0)}to{transform:scale(1)}}
.recent-load{font-weight:bold;display:inline-block;padding:6px 12px;margin-bottom:0;font-size:15px;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 #d2cfcf;border-radius:5px;text-transform:uppercase;color:#000;background:#fff}

Phần mã HTML bạn tự xác định vị trí đặt tiện ích (.post-footer) trên blog của mình và đặt code sau vào

<b:if cond='data:view.isPost'>
<div class="recent-post">
    <div class="recent-inner"></div>
    <div class="recent-loading">
        <a class="recent-load">Load more</a>
        <div class="loading">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</div>
</b:if>

Cuối cùng là js trước thẻ đóng </body>

<b:if cond='data:view.isPost'>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.6.3/jquery.timeago.min.js"></script>
<script>//<![CDATA[
// Recent Post with load more button by Hung1001

// User config
var numPost = 7; // Num post to show and load more
var snippet = 200; // Post snippet character

var count = 0,total;

function getData(e) {
    for (var n = 0; n < e.feed.entry.length; n++) {

        for (var s = 0; s < e.feed.entry[n].link.length; s++) {
            if (e.feed.entry[n].link[s].rel === "alternate") {
                var t = e.feed.entry[n].link[s].href; // get href
                break
            }
        }

        if ("summary" in e.feed.entry[n]) {
            var l = e.feed.entry[n].summary.$t; // get content
            l = l.replace(/<\S[^>]*>/g, "");
            if (l.length >= snippet) {
                var l2 = l.substring(0, snippet);
                var l3 = l2.lastIndexOf(" ");
                l = l2.substring(0, l3) + ' ...';
            }
        }

        var f = e.feed.entry[n].title.$t, // get title
            c = e.feed.entry[n].author[0].name.$t, // get author
            h = e.feed.entry[n].published.$t; // get date

        if ("media$thumbnail" in e.feed.entry[n]) { // get thumbnail
            var d = e.feed.entry[n].media$thumbnail.url.replace("s72-c", "s1600");
        } else {
            var d = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXvoeWlnXfuDDxD0LIWf1tODuI3Wti5c3N2v73T19xj9fNAM45q8OWvY4cL-rRcVe0NisWEk9lZ0v4uuDUX4b54sx0uFOgNBRC6Gfoj7nUJaCh-JsZLVa-G-Nt0j5OrQ5vOfcCLsG-HqI/s1600/nth.png"
        }
        $(".recent-inner").append("<div class='rc-item'><div class='rc-thumb'><a href='" + t + "'><img src='" + d + "'></a></div><div class='rc-main'><div class='rc-title'><a href='" + t + "'>" + f + "</a></div><div class='rc-meta'><span class='rc-author'>" + c + "</span><span class='rc-date' title='" + h + "'>" + h + "</span></div><div class='rc-content'>" + l + "</div></div></div>");
    }
}

$.ajax({
    url: "/feeds/posts/summary",
    type: "get",
    data: {
        alt: "json-in-script",
        "max-results": numPost
    },
    dataType: "jsonp",
    jsonpCallback: "getData",
    success: function(e) {
        $(".rc-date").timeago();
        total = e.feed.openSearch$totalResults.$t;
        count += e.feed.entry.length;
        $(".recent-load").on('click', function(e) {
            e.preventDefault();
            var t = $(this);
            if (count < total) {
                $(".loading").show();
                t.hide();
                setTimeout(function() { // delay for loadding effect
                    $.ajax({
                        url: "/feeds/posts/summary",
                        type: "get",
                        data: {
                            alt: "json-in-script",
                            "max-results": numPost,
                            "start-index": count + 1,
                        },
                        dataType: "jsonp",
                        jsonpCallback: "getData",
                        success: function(h) {
                            t.show();
                            $(".loading").hide();
                            $(".rc-date").timeago();
                            count += h.feed.entry.length;
                            if (count == total) $(".recent-loading").hide();
                        }
                    })
                }, 1000);
            }
        });
    }
});
//]]></script>
</b:if>

Lưu mẫu lại và kiểm tra

Lưu ý:

• nếu có bất kì id, class, biến trong file js nào bị trùng/xung đột, bạn tự căn chỉnh cho hợp lý
• 2 giá trị bạn có thể tùy biến là var numPost (số bài muốn hiển thị) và var snippet (số kí tự trong đoạn trích ngắn muốn hiển thị)

Cuối cùng xin chúc bạn thành công !