[Blogger] Reactions bài viết với bộ đếm thời gian thực

Reactions là tính năng làm nên thương hiệu cho các trang mạng xã hội, để triển khai tính năng này cho các website đã có khá nhiều các plugin được viết ra, tuy nhiên với cá nhân tôi thường không ham hố dùng mấy vì mình luôn phải phụ thuộc. Trong bài viết này tôi sẽ cùng các bạn đi tìm hiểu cách tạo Reactions bài viết với bộ đếm thời gian thực

Demo

demo
Cơ sở dữ liệu thời gian thực được sử dụng trong bài viết là Google Firebase, bạn nào làm web chắc cũng từng nghe tên nó rồi. Do blogger không có cơ chế đăng kí đăng nhập giống như facebook nên để quản lý dữ liệu của người dùng ta sẽ dùng localStorage - hoạt động giống cookies nhưng có dung lượng nhiều hơn và dữ liệu chỉ mất khi người dùng tự tay xóa nó (tắt trình duyệt nó vẫn còn nhé !)

Ví dụ với nút Like, với mỗi bài viết ta sẽ đặt cho 1 id, khi người dùng click vào, id đó sẽ được đẩy vào localStorage và bộ đếm tăng lên 1 (Liked), khi click lần 2 id sẽ được gỡ ra khỏi localStorage và bộ đếm giảm đi 1 (Unliked), tương tự cho các lần tiếp theo.

Khi bạn F5 lại trang, sẽ tiến hành kiếm tra id đã có trong localStorage hay chưa, nếu có rồi thì lúc này sẽ chuyển action thành unliked và ngược lại nên bạn yên tâm sẽ không có hiện tượng "hack like" đâu nhé

Khi người dùng xóa dữ liệu localStorage trên domain của bạn, thì phiên làm việc được làm mới (kiểu như login vào tài khoản khác để like)

Ok nói như vậy là bạn đã hiểu được sơ sơ cách thức hoạt động rồi, giờ ta tiến hành triển khai cho blog, tôi sẽ demo 2 actions là Like và Love, bạn có thể tạo thêm các actions khác, và css cho các icon theo ý thích

Fontawesome sử dụng trong bài v4.7.0

1. Code Markup

Code này được đặt trong phần widget Blog1, bạn sẽ xác định đâu là vị trí mình sẽ đặt button (thường là cuối bài viết và nó sẽ sau thẻ <data:post.body/>) và chèn code sau

<button type='button' class='like-button' expr:data-post-id='data:post.id'><i class='fa fa-thumbs-o-up'></i> Like <span class='total'></span></button>
<button type='button' class='love-button' expr:data-post-id='data:post.id'><i class='fa fa-heart'></i> Love <span class='total'></span></button>

2. CSS

button[data-post-id] {
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #000;
    background-color: #fff;
    border-color: #ddd;
    outline: 0
}

/* Liked and Loved */
.like-button.like {
    color: #2187e7
}

.love-button.love {
    color: #ec516c
}

3. JS

Truy cập https://console.firebase.google.com/ và tạo cho mình 1 project

Sau khi tạo xong bạn vào mục Database và tạo mới như sau

Thiết lập chế độ cho phép đọc/ghi

Quay trở lại tab Authentication để lấy link nhúng và các thông số config cho project của bạn

Bạn lắp các thông số đó vào script dưới và dán script trước </body>

<b:if cond='data:view.isPost'>
<script type='text/javascript'>//<![CDATA[
// Post reactions with real time counter by Hung1001
var script = document.createElement("script");
script.src = "https://www.gstatic.com/firebasejs/5.7.1/firebase.js"; // firebase sdk js
script.onload = function() {
    firebase.initializeApp({
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: ""
    }); /* replace with your info */
    (function(doc, fb) {
        function reaction(_button, _action) {
            var btn = doc.getElementsByClassName(_button)[0],
                id = btn.getAttribute("data-post-id"),
                count;

            if (localStorage.getItem(_action) !== null) {
                var j = JSON.parse(localStorage[_action]);
                for (i = 0; i < j.length; i++) {
                    if (j[i] === id) btn.classList.add(_action);
                }
            };

            fb.ref(_action + "/" + id + "/total").on("value", function(e) {
                count = e.val() || 0;
                btn.querySelector(".total").innerText = count;
            });

            btn.addEventListener("click", function(t) {
                t.preventDefault();
                this.classList.toggle(_action);
                if (this.classList.contains(_action)) {
                    if (localStorage.getItem(_action) === null) {
                        localStorage.setItem(_action, JSON.stringify([id]));
                    } else {
                        var all = JSON.parse(localStorage[_action]),
                            repeated = all.filter(function(e) {
                                return e == id
                            }).length;
                        if (!repeated) {
                            all.push(id);
                            localStorage.setItem(_action, JSON.stringify(all));
                        }
                    }
                    count++;
                } else {
                    var json = JSON.parse(localStorage[_action]);
                    for (var i = 0; i < json.length; i++) {
                        if (json[i] === id) json.splice(i, 1);
                    }
                    localStorage.setItem(_action, JSON.stringify(json));
                    count--;
                }
                fb.ref(_action + "/" + id + "/total").set(count);
            })
        }
        reaction("like-button", "like"); // start like button
        reaction("love-button", "love"); // start love button
        // More button here
    })(document, firebase.database());
};
document.getElementsByTagName("body")[0].append(script);
//]]>
</script>
</b:if>

Cuối cùng lưu mẫu lại và tận hưởng thành quả !

Ngoài ra bạn có thể tự biến hóa css theo ý đồ của mình, demo đơn giản nên tôi không làm màu mè như facebook, thêm các button mới bạn phải sửa đồng thời cả HTML, CSS, JS nhé, chỗ nào cần thêm tôi đã comment rất rõ rồi

Nếu phát hiện lỗi vui lòng báo để fix nhé

Chúc bạn thành công và biến blog của mình cool ngầu với thủ thuật này !

#hung1001