Comment Facebook cho blogger

Face book là một mạng xã hôi lớn nhất hiện nay. Đây cũng là mạng có số lượng người dùng lớn nhất thế giới. Vậy tại sao chúng ta không tận dụng những commnet của mọi người trên face book bằng cách chèn vào blogspot.

Tạo app trên facebook và lấy Application ID

1- Đăng ký một apps trên Facebook tại Developers.facebook bạn có thể sử dụng tài khoản facebook của bạn để đăng nhập.

2- Điền tên vào bảng Popup nếu trang báo Valid là tên có thể sử dụng.

- Bấm tiếp tục.

3- Nếu tài khoản của bạn chưa được xác minh thì bạn phải xác minh. bạn có thể xác minh bằng mobile phone hoặc credit card (Thông thường thì hãy xác minh bừng số điện thoại của bạn).

- Tại cửa sổ Popup bạn chọn quốc gia là Việt Nam và điền số điện thoại vào (lưu ý số điện thoại không có số 0 ở đầu nha):

- Sau đó bạn sẽ dduwwocj gửi một tin nhắn về mã xác nhận tới điện thoại bạn vừa nhập. hãy nhập vào ô mã và bấm xác nhận. Khi dó trình duyệt báo như sau là được.

4- Sau khi xác minh xong bạn hãy tải lại trang (bấm F5) để thực hiện lại tiến trình như bước 1. Sau khi nhập tên và bấm Tiếp tục bạn sẽ được chuyển đến trang như sau:

- Hãy nhập mã Captra vào và bấm Tiếp tục.

5- Tiếp theo bấm vào Create new app để đăng ký ứng ụng nha.

- Bấm tiếp tục liên tục nha. Đến khi xuất hiện trang như sau.

6- Bấm vào tên ứng dụng bạn vừa nhập ở bước trên và bấm vào Edit setting. và nhập các thông số như hình dưới.

- Chú ý phần App Id mình tô màu xanh trong ảnh vì ở bước sau này sẽ sử dụng.
7- Bấm Lưu Thay đổi.
Nếu cảm thấy các bước trên quá khó để thực hiện bạn có thể sử dụng cách khác Tại đây

Chèn comments Facebook vào blogger

☼ Cách tiến hành:

1- Đăng nhập vào Blog

2- Vào Mẫu (Template)

3- Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced). => Mở rộng tiện ích mẫu.

4- Dán code bên dưới sau thẻ <head>:

<meta expr:content='data:blog.pageTitle' property='og:title'/> 
<meta expr:content='data:blog.url' property='og:url'/> 
<meta content='article' property='og:type'/> 
<meta content='Logo.png' property='og:image'/> 
<meta content='App ID' property='fb:app_id'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> 
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script type='text/javascript'> 
    function commentToggle(selectTab) { 
      $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;); 
      $(selectTab).removeClass(&quot;inactive-select-tab&quot;); 
      $(&quot;.comments-page&quot;).hide(); 
      $(selectTab + &quot;-page&quot;).show(); 
    } 
    </script>

Trong đó:

Thay Logo.png thành link ảnh của bạn. Tốt nhất hãy sử dụng ảnh có kích thước 30 x 30px
Thay App ID thành App ID đã tạo ở bước 6. (Trong ví dụ của mình là 131761626979828 )

5- Tìm đoạn code có dạng tương tự như sau (Mẹo: bấm Ctrl +F):

<html

- Và thay thế thành:

<html xmlns:fb='http://www.facebook.com/2008/fbml'

- Lưu ý: nếu trong template của bạn đã có đoạn code xmlns:fb='http://www.facebook.com/2008/fbml'rồi thì có thể bỏ qua bước 5 này.

6- Dán đoạn code sau vào trước thẻ ]]></b:skin>.

.comments-page {
          background-color: #f2f2f2;
          width:520px
          }
#blogger-comments-page {
          padding: 0px 5px;  
          display: none
          }
.comments-tab {
          float: left; padding: 5px; 
          margin-right: 3px; 
          cursor: pointer; 
          background-color: #f2f2f2
          }
.comments-tab-icon {
          height: 14px;  
          width: auto;  
          margin-right: 3px
          }
.comments-tab:hover {
          background-color: #eeeeee
          }
.inactive-select-tab {
          background-color: #d1d1d1
          }

7- Tìm code sau:

<div class='comments' id='comments'>

- Và thêm vào sau đoạn code vừa tìm được đoạn code sau:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-xfKe6q0bEWIPJxs0O5FYn5zxV0obQ_Le8DiyS32KS2rL9rvisrmANoJ_jFJvuTRLDoREl-D9b0jD8P-JVbr9oevNusUzx-Wc6lwMJKl_BhdpmTGTOql2lomeUBAQ4J6JB27cDLt5ZP4/s1600/Facebook-icon-namkna-blogspot-com.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxpR0AGJZyhM42IolvRXccm9YguX_gf_WutZL2fJJK3S-_9HuXwUYcPna1SL7CbE-0QLwLQbomdzm_sXBgu1Qc3KYiYgqkhLRxqYkYyns-238QT0XfwizWKRZGgDPSq19fqaOY6kc_EaE/s1600/blogger-icon_namkna-blogspot-com.png'/> <data:post.numComments/> Comments
</div>
<div class='clear'/>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='520'/>
</b:if>
</div>

8- Lưu mẫu của bạn lại và xem kết quả nha.