Thêm huy hiệu facebook cho user khi lấy dữ liệu qua feed comments

Chào các bạn, tết nhất xong rồi giờ ta lại quay lại với code thôi ! Trong bài viết đầu năm 2019 này tôi sẽ cùng các bạn triển khai huy hiệu facebook cho user khi lấy dữ liệu qua feed comments

Như bạn đã biết, gần đây trong các group cũng như fanpage của facebook ta thường bắt gặp các huy hiệu cạnh tên người dùng nhằm cho biết 1 "chức vụ" nhất định của người đó trong group/fanpage, nhìn nó cũng khá là hay.

Lấy ý tưởng từ đó ta cũng có thể tự tạo cho mình một bộ huy hiệu và chỉ định cho các thành viên để khuyến khích họ tích cực bình luận cho trang của mình 😁

Theo đó khi lấy dữ liệu qua blogger json feed api comments, ta sẽ chỉ định huy hiệu (badge) cho các profile được liệt kê sẵn và đặt nó cạnh tên người dùng

Trong bài này tôi sẽ chỉ demo ảnh trên và hướng dẫn bạn cách viết code chứ không có một sản phẩm cụ thể nào để bạn có thể thoải mái code hiển thị theo ý thích của mình

Nếu vẫn còn mập mờ blogger json feed api comments là gì ? xin vui lòng đọc chuyên mục json-feed trước sau đó quay lại bài viết này nhé !

1. Code JS

var listAdmin = ["https://www.blogger.com/profile/05447761258331523994","https://www.blogger.com/profile/02684441355924921441"]; // khởi tạo list uri của admin

// loop qua từng entry

var authorUri = json.feed.entry[i].author[0].uri ? json.feed.entry[i].author[0].uri.$t : "javascript:void(0)"; // get uri của user

// truyền dữ liệu
element.innerHTML += `

...
<a class="author ${listAdmin.includes(authorUri)?"blog-admin":"user"}"><span class="badge"></span>...</a>
...

`;

2. Code CSS

/* Sử dụng viewbox 12px với size ảnh 24px để không bị mờ trên mobile */

.blog-admin .badge,
.user .badge {
    background-image: url(../images/badge-24.png);
    background-size: 12px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 12px;
    width: 12px;
}

.blog-admin .badge {
    background-position: ...;
}

.user .badge {
    background-position: ...;
}

Link ảnh sprites badge của facebook bạn có thể tải tại đây https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCtHdHuepeF6Rz9mAI5ICbKlE89ursDInQAQvHbVCOrffQ6AHFW89rnNpBKObj7cAUsu6i5kCpJJLWXuHtsCA6dKYqEONOrp94EdFh015EoljWele3N5nr88LuwlCI1Sa6nF_JSVR8S0rc/d-h0/badge-24.png hoặc có thể tự tạo bộ badge cho riêng mình

Ok nếu bạn đã nhuyễn phần json-feed-api rồi thì thêm cái này vào hoàn toàn đơn giản thôi. Khi mạng xã hội đã quá thân thuộc và gắn liền với đời sống của chúng ta rồi thì việc thêm các thành phần tương tự vào trang của bạn sẽ giúp bạn ghi được nhiều điểm + trong mắt người đọc đó

Chúc thành công !