Thêm comments facebook song song với comments blogger

Theo yêu cầu của bạn Nguyễn Hải tại đây mình sẽ hướng dẫn bạn cách thêm comments facebook vào blog giống như Troll VL :>)
Demo tại blog này

A. Tạo app trên facebook và lấy Application ID
Trước hết bạn phải đăng ký một apps trên Facebook tại Developers.facebook.com và làm theo hình
B. Chèn comments Facebook vào blogger
Trước khi tiến hành thủ thuật bạn phải lựa chọn chế độ nhúng cho comments mặc định của blogger
  1. Vào blogger > Cài đặt > Bài đăng và nhận xét
  2. Vị trí nhận xét bạn chọn Được Nhúng
Bây giờ chúng ta sẽ tiến hành thực hiện trong template
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Chọn mở rộng mẫu Tiện Ích
Bước 3: 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='Link ảnh Logo của blog' property='og:image'/> 
<meta content='FACEBOOK 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>
  • Link ảnh Logo của blog bạn thay bằng link ảnh có kích cỡ 30 x 30px 
  • FACEBOOK APP ID bạn thay bằng ID đã tạo ở những bước trên
Bước 4: Tìm thẻ <html và thay bằng đoạn bên dưới
<html xmlns:fb='http://www.facebook.com/2008/fbml'

  • Nếu tìm trong template có xmlns:fb='http://www.facebook.com/2008/fbml' rồi thì bỏ qua bước này nhé
Bước 5: Tìm ]]></b:skin> và dán trước nó code bên dưới
.comments-page {  background-color: #f2f2f2; width:450px;}
    #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;}
  • Thay đổi những phần tô đậm sao cho phù hợp với blog của bạn lần lượt là màu nền và độ rộng khung comments
Bước 6: Tìm code bên dưới
<div class='comments' id='comments'>
  •  Chèn code bên dưới sau tất cả những code bạn đã tìm được bên trên

<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://huyco-troll.googlecode.com/svn/trunk/icon/cmfb.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://huyco-troll.googlecode.com/svn/trunk/icon/cmbg.png'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>

<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='450'/>
</b:if>
</div>
  • 450 là độ rộng của khung comments bằng facebook
  • Khi bạn lưu lại template mà báo lỗi thì xóa đoạn code được bôi màu đỏ đi 
Bước 7: Lưu lại template
Đây là bài hướng dẫn cơ bản thôi, bạn hãy dựa theo bài viết mà sáng tạo cho phù hợp với blog của mình
9 Comments
Comments

9 comments

30/11/12
hay quá, cảm ơn Huy nhiều
11/4/13
À Huy ơi làm sao để nó hiển thị cả ở các trang tĩnh nhỉ?
19/10/13
Chào huy ! Hôm nay đã sang xin bài viết hiệu ứng trỏ chuột về blog của mình rồi cuối bài mình có ghi (Theo Trollvl.com)Cảm ơn huy nhiều nhé !
Còn cái này rất tuyệt mình khoái từ khi có thông báo nhưng ngặt 1 nỗi những hình chỉ dẫn phía trên kia nhỏ mà mờ quá nên thực hiện hình như chưa đúng huy xem làm cho to và rõ nhũng chữ trong đó hơn được không ?Cảm ơn huy nhiều nhé ! Chúc an lành và thành đạt .
19/10/13
Bác chuột phải vào hình ảnh sau đó chọn mở ảnh tại cửa sổ mới(Open image in new tab) rồi dùng công cụ zoom sẵn có của trình duyệt phóng to ảnh lên nhé!
19/11/13
Cách này có thông báo ở fb cho mình biết khi có cm mới không bạn, mình đã áp dụng khá nhiều cách mà k có notify :(
19/11/13
Bạn có thể vào https://developers.facebook.com/tools/comments sau đó chọn app cần xem comment bạn đã tạo ở các bước trên
22/11/13
Không rõ mình làm sai ở đâu, vì mình cm test nhưng vào link bạn gửi thì k hề có gì
23/11/13
Sau khi vào link trên bạn phải chọn app tương ứng với comment hiển thị trên blog bạn đã tạo ở trên nằm ở phía bên trái như hình dưới
http://2.bp.blogspot.com/-SuY15Z2IRH8/UpDRNrJf3sI/AAAAAAAAMv0/RwlmoHlOrkM/s320/comment.jpg

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->