Thêm số lượt thích, chia sẻ và bình luận từ Facebook vào Blogger mới nhất

Are you sure?

You want to turn off ads.

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é.

Thêm số lượt thích, chia sẻ và bình luận từ Facebook vào Blogger mới nhất

Cơ chế hoạt động

Bộ đếm hoạt động như sau

  1. 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ì
  2. Số chia sẻ: là số lượt chia sẻ bài viết đó lên Facebook
  3. 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 IDKhó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.

Helper: www.siinblog.com

Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    38 nhận xét:

    1. Trả lời
      1. Ra bài của thủ thuật blogger mới :3

        Xóa
    2. Sao em bấm vào tym không được nhỉ :v

      Trả lờiXóa
      Trả lời
      1. -_- Ở bài a ghi là thêm số lượt thích mà e, có phải là thêm nút bấm đâu.

        Xóa
      2. Chỉ thêm thôi hả, không bấm vào được để ủng hộ anh Cường hjx hjx :(

        Xóa
      3. Bấm đc mà e :3 A ghi bấm ủng hộ là bấm vào cái nút Like từ plugin của Facebook ấy e, nó ngay bên dưới đó :))

        Xóa
    3. Anh có thể viết bài hướng dẫn chen comment facebook vào blog được ko ạ, cập nhật mới nhất chứ các bài trên mạng cũ hết rồi

      Trả lờiXóa
      Trả lời
      1. À, cái plugin comment form từ facebook đó hả. Để mình nghiên cứu rồi viết bài hướng dẫn sau nha. Tại trước mình có test thì tùy temp mà nó gửi thông báo đến k đc, để mình check và fix trên 2,3 temp thử xem sao. Bạn có thể đăng kí theo dõi blog mình để nhận bài mới nha. Thanks bạn.

        Xóa
    4. Màu xanh này có vẻ dịu và nhìn rất là ưa mắt

      Trả lờiXóa
      Trả lời
      1. Ừ, t thích cây cỏ hoa lá rồi :v

        Xóa
    5. Trả lời
      1. Thì mình tính like thôi vậy e, 3 cái kia mình bỏ :3 hầu như blog, website nào cũng bị chặn mà. Kháng nghị fb 1 tgian họ xem xét là đc thôi. A kháng có 1,2 lần là họ mở cho từ đó đến giờ.

        Xóa
      2. không chèn button like đc a ạ. chèn nó không hiện. bây giờ bên LTT khung cmt fb nó cũng không hiện thì đếm sao đc :v

        Xóa
      3. Thật hả :3 A cứ tưởng bị chặn link nó k liên quan đến chèn button like cơ vì trc thấy Niệm chèn đc hay sao ấy a k nhớ rõ.

        Xóa
    6. Trả lời
      1. Chặn link thì dùng mỗi cái like như a bảo khanh thôi e :))

        Xóa
    7. Anh đặt lại lk cho em với hjx :( Mấy ngày rồi off blog để em học HKII mà anh nỡ lòng nào gỡ lk của em hjx :(

      Trả lờiXóa
      Trả lời
      1. E view source blog a ra thì k gỡ đâu, a kiểm tra lưu lượng truy cập thấy blog nào đặt liên kết ít truy cập qua blog a thì a ẩn đi thôi chứ k xóa hoàn toàn. A vừa bỏ ẩn rồi đó.

        Xóa
    8. Tính ra trang ứng dụng này của fb đc nhiều việc phết đấy chứ ô nhỉ

      Trả lờiXóa
      Trả lời
      1. Ừ, các plugin của fb hay mà ông. Nó còn có chat bot nữa hay sao ấy.

        Xóa
    9. Trả lời
      1. Ừ, để nguyên nó cũng nhỏ rồi mà e, hơi delay tí thôi. Muốn to hơn thì chỉnh css là đc.

        Xóa
    10. a cường ơi lk lại vs em với huhu

      Trả lờiXóa
      Trả lời
      1. E off bạch vô âm tín bao lâu -_- Cmt lại tên và url tại cmt này luôn đi để a add lại chứ a xóa lk rồi k nhớ.

        Xóa
      2. Vâng anh
        Tên: Hồng Hải Blog
        Url:https://www.honghaiblogseo.com

        Xóa
      3. Url đây mới đúng a: https://honghaiblogseo.blogspot.com

        Xóa
      4. Ok a vừa add lại rồi.

        Xóa
    11. Ghé thăm nhé. được nhiều blogger ủng hộ ghê. mới ra bài nào là có người vào liền ah :)

      Trả lờiXóa
      Trả lời
      1. Hì, thanks bác nhé. Tại e cũng mở group nữa nên hầu như mn tương tác nhau ở đó đông vui, sôi nổi lắm.

        Xóa
    12. bài viết thiệt là thú zị em phải test ngay mới dc

      Trả lờiXóa

    Nhận bài viết mới