Hướng dẫn viết bộ đếm thống kê cho blogspot bằng AJAX

Hướng dẫn các bạn viết code bộ đếm thống kê cho blogspot bằng AJAX đơn giản.

Bộ đếm thống kế blog bằng AJAX gồm:

- Đếm tổng số tất cả các BÀI VIẾT
- Đếm tổng số bài viết theo LABEL nhãn
- Đếm tất cả số PAGE trang trên blog
- Đếm tất cả số BÌNH LUẬN trên blog

Bộ đếm thống kê cho blogspot thì cũng có nhiều bạn chia sẻ từ rất lâu rồi, người này copy của người kia, đa số là dùng cách viết thông thường là Callback xong document.write dữ liệu của nó, làm như vậy thì blog sẽ bị cảnh báo khi bạn test speed ở trang PageSpeed Insights.

Sau đây mình sẽ viết lại bộ đếm thống kê cho blogspot bằng cách viết AJAX.

Các bạn copy toàn bộ code dưới dán trước thẻ đóng </body> và lưu lại.

<style>

  .thongke .title{float:left}

  .thongke .value{float:right}

  .thongke div{clear:both;float:left;width:100%;padding:5px 1px;display:inline-flex}

</style>

<script>

    //<![CDATA[

    window.addEventListener("load", function() {

        $.ajax({

            url: "/feeds/posts/default?alt=json",

            type: "get",

            dataType: "jsonp",

            success: function(e) {

                var a = e.feed.openSearch$totalResults.$t;

                $("#baiviet").append('<div class = "title">Tổng số bài viết: </div><span class = "value">' + a + "</span>")

            }

        }), $.ajax({

            url: "/feeds/posts/default/-/giao-dien-blog-ban-hang?alt=json",

            type: "get",

            dataType: "jsonp",

            success: function(e) {

                var a = e.feed.openSearch$totalResults.$t;

                $("#label").append('<div class = "title">Giao diện bán hàng: </div><span class = "value">' + a + "</span>")

            }

        }), $.ajax({

            url: "/feeds/pages/default?alt=json",

            type: "get",

            dataType: "jsonp",

            success: function(e) {

                var a = e.feed.openSearch$totalResults.$t;

                $("#trang").append('<div class = "title">Tổng số trang: </div><span class = "value">' + a + "</span>")

            }

        }), $.ajax({

            url: "/feeds/comments/default?alt=json",

            type: "get",

            dataType: "jsonp",

            success: function(e) {

                var a = e.feed.openSearch$totalResults.$t;

                $("#binhluan").append('<div class = "title">Số bình luận: </div><span class = "value">' + a + "</span>")

            }

        })

    });

    //]]>

</script>

Tiếp theo bạn vô bố cục, thanh sidebar các bạn Thêm tiện ích HTML/JavaScript và copy code bên dưới dán vô và lưu lại

<div class="thongke">

    <div id="baiviet"></div>

    <div id="label"></div>

    <div id="trang"></div>

    <div id="binhluan"></div>

</div>

CSS và HTML mình viết đơn giản thôi bạn nào thích màu mè thì có thể chỉnh CSS như thêm các ICON, màu chữ, màu nền...

PHẦN NÂNG CAO DÀNH CHO BẠN NÀO CẦN TÌM HIỂU

Như đoạn code trên thì sẽ có 4 URL của 4 Feed như sau:

- Feed bài viết : /feeds/posts/default?alt=json
- Feed label : /feeds/posts/default/-/giao-dien-blog-ban-hang?alt=json
- Feed của page : /feeds/pages/default?alt=json
- Feed của comment : /feeds/comments/default?alt=json

Các URL của Feed thì đều giống nhau chỉ khác tham số truyền vào của nó, và trước nó sẽ là link trang chủ của blog nhé mọi người, cách viết như trên thì nó tự động chèn link trang chủ vô.

https://www.giaodienblogbanhang.com/feeds/posts/default?alt=json
https://www.giaodienblogbanhang.com/feeds/posts/default/-/giao-dien-blog-ban-hang?alt=json
https://www.giaodienblogbanhang.com/feeds/pages/default?alt=json
https://www.giaodienblogbanhang.com/feeds/comments/default?alt=json

Để hiểu rõ hơn cách nó hoạt động như nào các bạn thử copy 1 dòng của 4 Feed trên bao gồm cả domain nhé sau đó dán lên trình duyệt và truy cập nó.

Các bạn copy toàn bộ dữ liệu của Feed đó sau đó truy cập vô trang http://jsonviewer.stack.hu và dán code vô mục TEXT và nhấn VIEWER 

Các bạn lưu ý là 2 đường dẫn như dưới sẽ khác nhau nhé, 
/feeds/comments/default?alt=json
/feeds/comments/default?alt=json-in-script

Vì cái Tool JSON Viewer kia chỉ chạy được link /feeds/comments/default?alt=json

Tiếp tục như hình

Các bạn nhìn vô nó giống như cái CÂY THƯ MỤC (Nguồn cấp dữ liệu) vậy đó, trong cái Feed của nó chứa rất nhiều thông tin như: id, ngày update, title, link.... Và chúng ta chỉ quan tâm tới openSearch$totalResults

openSearch$totalResults ở đây là Tổng số bài (items) của Feed đó.
Vì giá trị cuối cùng của nó là $t = 23 thì cấu trúc để lấy dữ liệu của nó là feed.openSearch$totalResults.$t theo như cây thư mục từ trên xuống dưới nó.

Tới đây thì các bạn sẽ hiểu vì sao đoạn code trên lại có:
var a = e.feed.openSearch$totalResults.$t;
và giá trị của a = 23

Nhờ có nguồn cấp dữ liệu Feed chúng ta có thể viết code  JSON Feed thông qua các API của nó để code các giao diện blog bán hàng, giao diện tin tức.

Hy vọng bài này sẽ giúp bạn hiểu hơn về Nguồn cấp dữ liệu của blogger (Blogger JSON Feed API)