Mạng xã hội Facebook hiện đang là mạng xã hội lớn nhất trên toàn thế giới, chính vì vậy các blog/website thường thêm các plugin của Facebook vào blog như nút Thích, Chia sẻ, Khung bình luận để tăng sự tương tác và từ đó cải thiện được traffic. Nhưng để làm cho blog bạn đẹp mắt hơn thì hôm nay, mình sẽ hướng dẫn các bạn cách thêm (hiển thị) số lượt thích, chia sẻ và bình luận từ Facebook vào blog của mình nhé.
Cơ chế hoạt động
Bộ đếm hoạt động như sau
- Số lượt thích: là số người dùng click nút Thích trong 1 bài viết bất kì
- Số chia sẻ: là số lượt chia sẻ bài viết đó lên Facebook
- Số bình luận: tại đây chia làm 2 loại:
- Số bình luận ngay tại khung bình luận Facebook bạn chèn vào mỗi bài viết
- Số bình luận tại bài viết bạn chia sẻ trên Facebook
Và điều quan trọng là tất cả chỉ hoạt động dựa trên plugin bạn đã khởi tạo từ 1 app (ứng dụng) trên Facebook và chèn plugin Like vào blog. Để tạo 1 app trên Facebook và chèn plugin nút Like (thông số hiển thị tại nút này là tổng từ 4 thông số trên) vào blog thì có rất nhiều bài hướng dẫn rồi, ở bài này mình chỉ hướng dẫn các bạn cách thêm số lượt thích, chia sẻ và bình luận nên mình không đề cập kĩ phần này.
Thêm bộ đếm lượt thích, chia sẻ, bình luận Facebook
Sau khi tạo xong app và chèn được plugin Like Facebook vào blog thì bạn tiến hành các bước dưới.
Bước 1: Truy cập ứng dụng (app) mới tạo, bạn vào Cài đặt (Settings) để lấy ID và Khóa bí mật (App Secret) của ứng dụng đó nhé.
 |
| Bạn copy 2 mã ra Notepad để thay vào code dưới |
Bước 2: Sau khi đã có ID và Khóa bí mật thì bạn thay vào đoạn code dưới đây theo cú pháp.
<script>
var token = 'ID|Khóa bí mật';
url = window.location.href;
$.ajax({
url: 'https://graph.facebook.com/v2.11/',
dataType: 'jsonp',
type: 'GET',
data: {access_token: token, id: url,fields:'engagement'},
success: function(data){
console.log(data);
$('#fb-like-count').append(data.engagement.reaction_count);
$('#fb-share-count').append(data.engagement.share_count);
$('#fb-comment1-count').append(data.engagement.comment_plugin_count);
$('#fb-comment2-count').append(data.engagement.comment_count);
},
error: function(data){
console.log(data);
}
});
</script>
Bước 3: Truy cập Quản trị blogger - Chủ đề - Chỉnh sửa HTML - Dán đoạn code trên trước
</body>
Bước 4: Tiếp đến, bạn chỉ việc chèn đoạn code hiển thị số lượt thích, chia sẻ và bình luận Facebook vào chỗ bạn thích trong bài viết của blog bạn nhé (có thể là dưới tiêu đề mỗi bài hoặc cuối mỗi bài mà mỗi Template lại khác nhau nên mình không nói chi tiết phần này, nếu cảm thấy khó khăn bạn có thể để lại bình luận để mình giúp đỡ sớm nhất có thể nhé)
<!-- Số lượt thích -->
<i class='fa fa-heart' style='color:red'/> <span id='fb-like-count'/>
<!-- Số lượt chia sẻ -->
<i class='fa fa-share-alt' style='color:green'/> <span id='fb-share-count'/>
<!-- Số lượt bình luận từ plugin -->
<i class='fa fa-comment' style='color:orange'/> <span id='fb-comment1-count'/>
<!-- Số lượt bình luận từ bài viết được chia sẻ -->
<i class='fa fa-comment-o' style='color:blue'/> <span id='fb-comment2-count'/>
Bạn có thể bỏ thông số không muốn hiển thị sao cho hợp ý nhất nha.
Bước 5: Cuối cùng lưu Template lại và chiêm ngưỡng thành quả.
Lời kết
Vậy là mình vừa hướng dẫn xong cho các bạn cách thêm số lượt thích, chia sẻ và bình luận từ Facebook vào Blogger mới nhất rồi đó. Để trang trí thêm cho đẹp hơn thì hãy viết CSS cho nó nhé, có sẵn hết id cho mỗi phần tử rồi đó. Nếu thấy khó khăn ở đâu thì hãy để lại bình luận nhé. Chúc các bạn thành công.
