cách chèn Facebook Comment nhanh vào trang Blogger

Cách chèn Facebook Comment vào Blogger rất dễ dàng, bạn hãy làm theo 4 bước sau:

1. Tạo một ứng dụng mới trên Facebook

Bạn hãy xem hướng dẫn tạo Facebook App để lấy App ID để thực hiện chèn Facebook Comment vào website và quản lý comment thông qua ứng dụng bạn vừa tạo.

2. Lấy mã code được cung cấp bởi Facebook

Để Get code bạn vào link https://developers.facebook.com/docs/plugins/comments/ chọn các thông số sau:

Width: 100% hoặc để chố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

Hình 1. Chèn mã code được cung cấp bởi Facebook

3. Đặt mã code App ID vào thẻ meta

Khi bạn đã lấy được mã code như hình 1 hãy chèn mã code này tôi đã bổ xung thêm 2 thẻ <meta>

1
2
3
4
5
6
7
8
9
10
11
<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 Avatar Facebook cá nhân của bạn

1
https://www.facebook.com/photo.php?fbid=634855699985102&set=a.104988459638498.6128.100003820326603&type=1&theater

Ví dụ trong đoạn code này User ID là 100003820326603

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, đầu tiên bạn hãy vào https://www.blogger.com/ -> 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:

1
2
3
<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ã doe 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à </div> và chèn vào đoạn code này

1
2
3
<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>