Hướng dẫn chèn Facebook Comment nhanh cho Website Blogger (Blogspot) quản lý cmt dễ dàng

0 Share Share Copy URL

Chào các bạn nhé
Hôm nay trong bài viết này mình sẽ hướng dẫn bạn đọc cách chèn Facebook Comment nhanh vào trang Blogger của bạn hay 1 website chạy trên nền tảng khác.
Chỉ với 4 bước bạn đã có được một tính năng bình luận Facebook ưng ý với mã nguồn của Blogger (Blogspot)  Cách chèn Facebook Comment vào Blogger (Blogspot) rất dễ dàng, bạn hãy làm theo 4 bước sau nhé:
Hướng Dẫn: 
Bước 1: Tạo một ứng dụng mới trên facebook
Bạn hãy xem qua bài viết hướng dẫn tạo facebook app để lấy App ID để thực hiện chèn vào facebok comment trên website của bạn để quản lý nhé.
Bước 2: Lấy code được cung cấp bởi facebook
Để lấy code bạn vào link sau: https://developers.facebook.com/docs/plugins/comments/ chọn các thông số như sau nhé:

• Width: 100% hoặc để trống
• Number of post: Số lượng comment hiển thị mặc định
• Color Scheme: Style màu sắc box comment tùy theo site của bạn màu gì bạn chọn cho phù hợp

Bước 3: Đặt mã code App ID vào thẻ meta
Khi bạn đã lấy được mã code như hình trên hãy chèn mã code này tôi đã bổ xung thêm 2 thẻ

<meta property="fb:app_id" content="Your_App_ID"/>
<meta property="fb:admins" content="User_ID"/>
</head>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.3&appId=Your_App_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Bạn hãy thay Your_App_ID và User_ID bằng số liệu bạn nhận được, riêng User ID bạn lấy bằng cách click vào một ảnh bất kỳ của bạn trên Facebook cá nhân của bạn và lấy đoạn số cuối cùng của URL chính là User id facebook của bạn, xem hình minh họa hình dưới:

Bước 4: Đặt mã code Comment vào bài viết
Có 2 cách để bạn chèn Comment Facebook vào trang Blogger (Blogspot).
Đầu tiên bạn hãy vào Trang Quản Lý Blogger-> Chọn Blog muốn chèn > Menu Mẫu -> Chỉnh sửa HTML và làm theo các cách sau:

• Cách 1: Thêm mã code sau ngay dưới thẻ <b:include data=’post’ name=’post’/> Để tìm thẻ trên bạn click chuột vào khu vực thẻ nhấn tổ hợp phím Ctrl+F sẽ bôi vàng vị trí này bạn hãy chèn vào dưới thẻ được bôi vàng đoạn code sau:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="640" data-numposts="5" data-colorscheme="light"></div>
</b:if>

• Cách 2: Thêm mã này vào sau thẻ <div> của đoạn thẻ <div class=’post-footer’>: Vẫn thực hiện Ctrl+F để tìm <div class=’post-footer’> và kéo xuống tìm thẻ đóng của nó là và chèn đoạn code này vào:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-comments" expr:data-href="data:post.canonicalUrl" data-width="640" data-numposts="5" data-colorscheme="light"></div>
</b:if>

Sau đó chọn Lưu mẫu và kiểm tra kết quả nếu trả về kết quả như hình dưới đây là OK nhé :)

Vậy là đã xong rồi đó khi có người bình luận facebook sẽ thông báo về cho bạn hoặc bạn có thể theo dõi và quản lý qua link này: https://developers.facebook.com/tools/comments
Chúc các bạn thành công!