Thư viện

Trải nghiệm

Thứ Hai, tháng 5 06, 2013

Chèn khung Comment Facebook cho Blogspot / Website

Thêm comment facebook theo link trang chủ chung cho tất cả các bài viết trên blogspot giúp tăng traffic.

Chia sẻ:
Hôm nay Namkna sẽ giới thiệu thêm cho các bạn một cách đơn giản để thêm khung bình luận của Facebook vào blogger. Với khung commnet facebook này bạn có thể tận dụng được lượng độc giả rất lớn từ hơn 1 tỷ người dùng faceboobk trên toàn thế giới.
Hãy xem ảnh minh họa.
Facebook Comment Box cho Blogspot / Website

Xem demo: VIEW DEMO

» Một số ưu điểm của thủ thuật Comment Facebook đơn giản này.

  1. Không cần phải đăng ký và lấy Id trên facebook. Chỉ cần dùng URL blog của bạn là oke.
  2. Khắc phục chỉ hiển thị khi có 1 commnet của blogger với mẫu threadcommnet.

» Cách thêm khung Comment Facebook vào blog.

1- Đăng nhập vào blog
2- Chọn mẫu (Template)
3- Chọn chỉnh sửa HTML (Edit HTML)
4- Thêm đoạn mã bên dưới vào trước thẻ </body>.
<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/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
5- Tìm một trong các đoạn code như sau: 
- Đoạn 1:
<div class='post-footer'>
- Đoạn 2:
<div class='post-footer-line post-footer-line-1'>
- Đoạn 3:
<div class='post-footer-line post-footer-line-2'>
- Đoạn 4:
<div class='post-footer-line post-footer-line-3'>
Lưu ý: mỗi đoạn cod trên đều có 2 đoạn giống hệt nhau và chỉ có 1 đoạn có tác dụng thôi nha.

- Dán ngay vào sau một trong các đoạn code cừa tìm được đoạn code sau:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-comments" data-href="http://namkna.blogspot.com/" data-width="470" data-num-posts="10"></div>
</b:if>
Trong đó:
  • Thay http://namkna.blogspot.com/ thành địa chỉ blog của bạn.
  • data-width="470" là chiều rộng của khung nhận xét facebook.
  • data-num-posts="10" Là số comment sẽ hiển thị trên khung nhận xét.

Note: Ngoài ra bạn cũng có thể dán code trên vào tiện ích HTML/Javarscrip ngay dưới bài đăng của bạn.

» Để thêm vào web site!

- Để thêm vào web site bạn dán file script vào giữa 2 thẻ <body>---</body>

88 nhận xét:

  1. Cảm ơn Anh Namkna nhé. Em mong đợi cái này lâu lắm rồi. Tiếc là blog của em bị xóa rồi. Không lấy lại được bài viết nên em cũng không còn đam mê nhiều với nó nữa. Nhưng vẫn cập nhật liên tục bài mới của anh :D

    Trả lờiXóa
  2. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  3. Em thực hiện thành công rồi ạ. Nhưng nó vẫn bị lỗi nè.

    ảnh

    Và cho em hỏi bỏ commnent google được không anh.

    Trả lờiXóa
    Trả lời
    1. Nhận xét này đã bị tác giả xóa.

      Xóa
    2. Cảm ơn em đã ủng hộ blog anh
      LỖi trên là do em chèn đoạn code bước 5 ở 2 vị trí rồi. Để bỏ comment google em vào

      1- đăng nhập vào tài khoản Blogger.
      2- Bấm vào blog bạn muốn thêm..Bấm chọn tab Google+
      3- Bỏ dấu chọn vào mục Sử dụng tính năng Nhận xét của Google+ trên blog này (Use Google+ Comments on this Blog). Đối với các mẫu mặc định, đó là tất cả nhũng gì các bạn càn làmcác bạn cần làm (Bạn phải là admin của một blog để có thể xem tùy chọn này).

      nói cung làm ngược bài này: XEM

      Xóa
    3. Anh Namkna ơi.

      - Em chèn ở 1 vị trí thôi. Nhưng khi em chèn ở vị trí khác. Comment lại nằm ở sau tiêu đề.
      Em gửi code vào mail: tavannam01@gmail.com rồi ạ. Anh xem giúp em nhé....!

      - Lúc nãy em nói chưa rõ, em muốn bỏ hẵn comment của blogger được không không anh.

      Xóa
    4. Anh ơi. Em gửi cho anh lâu rồi. Anh trả lời giúp em với ạ

      Xóa
    5. Xin lỗi mấy hôm nay anh bân quá.
      Anh đã trả lời em rùi đấy.

      Xóa
    6. Cảm ơn anh. Em nhận được rồi ạ.
      Anh namkna ơi. Em vẫn thấy xuất hiện lỗi ạ. Khi anh comment ở 1 bài viết. Thì khi sang các bài viết khác. Comment đó vẫn hiện ra ạ.

      Links đây anh nhé

      Xóa
    7. Tiện ích này dùng URL để hoạt động do vậy các commnet sdex chung nếu muốn khác nhau. Thì phải dùng 2 ves đầu tiên em ak.

      Xóa
  4. Cái này áp dụng được cho blog mình (Các cách cũ không làm được, temp mình dùng không có <html ). Nhưng lại không biết được ai đã comment ở đâu! Có cách nào khắc phục điều này không namkna ?

    Trả lờiXóa
    Trả lời
    1. Tất cả các blog đều có thẻ <html bạn ak. Thẻ này bắt buộc phải có (nó giống như đi xe phải đổ xăng vậy). Bạn có thể tìm thấy nó trong phần CHỉnh sửa HTML.

      Xóa
  5. Anh ơi, nếu làm như vậy thì có quản lý comment được không vậy

    Trả lờiXóa
    Trả lời
    1. MỖi cái có một hạn chế em ak. Với mẫu này thì không thẻ quản lý comment được.
      Muốn quản lý comment em vui lòng xem ves2 XEM NGAY

      Xóa
  6. sao blog của mình khi làm cái này nó hiện cmt ở 1 bài sang toàn bộ các bài còn lại vậy nhỉ? :(

    Trả lờiXóa
    Trả lời
    1. THay:

      <div class="fb-comments" data-href="http://namkna.blogspot.com/" data-width="470" data-num-posts="10"></div>

      thành:

      <div class="fb-comments" data-href="data:post.url" data-width="470" data-num-posts="10"></div>

      Xóa
    2. Không được đâu admin. tất cả các bài đều như nhau nha. Vì dùng chung 1 URL mà.

      Xóa
  7. anh Namkna ơi. Em spam xíu. Anh làm bài hướng dẫn chèn Blogger Code Converter vào blog đi ạ. Links đây anh nhé

    Trả lờiXóa
  8. post-footer-line post-footer-line-3
    Chỉ đoạn đó được nhưng mà trong label bài nào cũng có chỗ comment facebook híc...

    Trả lờiXóa
    Trả lời
    1. Bạn thêm đoạn code bước 5 vào giữa 2 thẻ b:if như sau:

      <b:if cond='data:blog.pageType == "item"'>
      <div class="fb-comments" data-href="http://namkna.blogspot.com/" data-width="470" data-num-posts="10"></div>
      </b:if>

      Xóa
    2. Bạn cho mình hỏi tại sao trang của mình bài mới nào cũng có phần comment face nhỉ,mình comment 1 bài và bài mới nào đăng cũng có phàn comment của bài khác,mình đã làm giống bạn mà vẫn k khắc phục được lỗi,rất mong bạn hồi âm sớm giúp mình nhé,Thanks bạn!

      Xóa
    3. Hiện tại nó khai báo theo URL nên khi conment một bài nó sẽ hiển thị ở các bài khác. Mình sẽ cập nhật lỗi này trong bài tới.

      Xóa
  9. Demo: http://demo-namkna.blogspot.com/2013/05/chen-khung-comment-facebook-cho-blogspo.html

    Trả lờiXóa
    Trả lời
    1. Dc rồi Bác ơi ^^
      Mà cho e hỏi thêm. Cái Template e mua của traidatmui. Caid đặt không cho hiển thị comment thì nó không có bài viết liên quan :( chỉ cài dc cái hiển thị lên thôi à :)
      Có cách nào fix chỉ e với ^^
      Demo: http://www.xiteen.mobi/2013/05/ionline-tranh-tai-va-sanh-vai-cung.html?m=1

      Xóa
    2. Sử dụng tiện ích bài viết liên quan khác :)

      Xóa
  10. Mình đang dùng mẫu V2, nhưng không thể quản lý comment được, bởi vì comment thì biết, nhưng không biết người ta comment ở bài viết nào
    có cách nào xem được họ comment cho bài viết nào không ?

    Trả lờiXóa
    Trả lời
    1. Bạn đăng nhập vào tài khoản facebook của bạn trên trang facebook sẽ thấy có thông báo. bấm vào link đó sẽ được chuyển đến bài viết.

      Xóa
  11. bạn Ơi trong temlate của mình có 2 thẻ body nhưng lại không có mấy thẻ 1234

    thì phải làm thế nào

    Trả lờiXóa
    Trả lời
    1. Bạn hãy dùng chức năng tìm kiếm nội tuyến sẽ thấy vì blog nào cũng có các thẻ đó nha:

      - nếu không biết cách tìm kiếm nội tuyến thì hãy xem bài viết này: Blogger thay đổi giao diện Edit HTML

      Xóa
  12. Mình đặt comment vào thì ok rồi, nhưng mình thử comment ở bài thứ nhất, xong sang bài khác commnet thì vẫn nhìn thấy comment đó.
    Không comment cho từng bài viết được hả Nam Ta? Thế này mình ko biết được mọi người comment ở bài nào để mà trả lời :(

    Trả lờiXóa
    Trả lời
    1. Thủ thuật này commnet dựa trên URL ở dòng data-href="http://namkna.blogspot.com/" do vạy nó sẽ xuất hiện ở tất cả các bài.

      - Nếu muốn riêng biệt từng bài hãy xem bài này: http://namkna.blogspot.com/2012/10/them-comments-facebook-cho-blogger-ves2.html

      Xóa
  13. minh làm như vậy oy mà ko có đc,với lại của mih bị lỗi là ko hiện các lời nhận xet bạn sửa giúp với

    Trả lờiXóa
    Trả lời
    1. Hãy để lại URL log đã áp dụng để được suppost.

      Xóa
  14. Bạn cho mình hỏi cách xóa bớt các hồ sơ nhận xét, vì mặc định blog có khá nhiều, trong khi không dc thông dụng, kiểu như: Live Journal, AIM, OpenID ... Thay vào đó, mình muốn đổi thành các hồ sơ của google, facebook, yahoo có dc không ?

    Trả lờiXóa
  15. anh ơi làm xong có tới 3 ô cmt facebook lận làm sao xóa bớt đây anh

    Trả lờiXóa
    Trả lời
    1. Em chèn đoạn code buwocs 5 3 lần nên nó xuất hiện 3 ô. Để xoá nó đi em chỉ cần xoá bớt 2 đoạn đi nha.

      Xóa
  16. bài này hay quá .. xin cảm ơn

    Trả lờiXóa
  17. Mình cũng áp dụng thì thấy comment ở 1 bài thì bài nào cũng có comment này. Tuy nhiên tìm hiểu thêm trên mạng thì đã khắc phục được, comment ở bài nào thì chỉ có trên bài đó

    Trả lờiXóa
  18. làm sao chèn cmt thế này đựo anh, blog đẹp quá

    Trả lờiXóa
    Trả lời
    1. Làm như anh hướng dẫn là được thôi em ak.,

      Xóa
  19. Chào anh? Em làm được như anh hướng dẫn rồi. Nhưng đang gặp một vấn đề là nó không tự post lên facebook mà cần phải ấn pushlish rồi ấn okay thì mới pushlish lên được.... hjhxjx. anh giúp em nha. mail em là: dank49cntt@gmail.com.
    thanks anh
    Blog của em đây:http://blog-haivl.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Em để tùy chọn Post to Facebook do vậy nó sẽ hỏi em có muốn công khai hay không là đúng rồi.

      Xóa
    2. vậy em phải chỉnh lại thế nào ạ?

      Xóa
    3. Trên khung comment có một ô để tích chọn Post to Facebook em bỏ dấu tích đó đi nó sẽ không hiển thị khung đó nữa nha,

      Xóa
  20. Mình làm y chang như bạn, nó hiện ra nhưng kì quá.
    1. Nó lại hiện ra ngay trang chủ luôn. (đáng lẽ nó chỉ hiện trong bài giống khung comment mặc định của blogger thôi chứ.)
    2. Khi mình thử commment 1 bài thì tất cả các bài khác đồng loạt có comment giống vậy. (nhìn xấu lắm)
    3. Code của nó xung đột với code của Featured Posts làm cho Featured Posts đứng yên không chạy nữa.

    Nam Tạ có cách nào khắc phục không, chỉ mình với. Nhân tiện, bạn cho mình hỏi cách chuyển hướng tên miền được không. Mình mới mua tên miền .com, khi mình truy cập vào tên miền cũ (blogspot.com) thì tên miền cũ vẫn hiện y chang có logo, còn truy cập vào tên miền mới (.com) thì tên miền mới cũng xuât hiện nhung không có logo. Điều này có thể làm cho người đọc không biết đâu là trang web của mình. Mình muốn khi truy cập vào tên miền cũ hay mới thì nó đều chuyển hướng sang địa chỉ của tên miền mới và có cả logo luôn. Nam Ta có bài nào hướng dẫn mình không, chia sẻ cho mình với nhá. Hơn nữa bạn có bài nào chỉ cách đặt Social Plugins (nút chia sẻ bài viết lên mạng xã hội) bên dưới mỗi bài viết không? chỉ mình luôn nha. Thanks bạn nhiều.
    Blog mình: http://yeutienganh123.blogspot.com/ hoặc http://www.yeutienganh123.com/

    Trả lờiXóa
  21. Nam ơi, sao trong Newfeeds của blogger, mình thấy bài viết của bạn hiện tiêu đề và nội dung bài viết, còn của mình chỉ hiện tiêu đề, không có nội dung, mà chỉ có noreply@blogger.com là sao vậy, trong RSS cũng y chang vậy: chỉ có tiêu đề mà ko có nội dung, chỉ mình cách khắc phục nhé. thanks

    Trả lờiXóa
    Trả lời
    1. 1, Mình đã cập nhật lại code để nó chỉ hiện ở trang bài viết nha bạn,

      2. Hiện tại thủ thuật này khai báo theo URL nên bài nào cũng có, nếu muốn riềng biệt thì bạn xem bài sau nha: XEM NGAY VES 2

      3- Featured Posts chỵ bằng Jquery trong khi đây chỉ là một mã embed do vậy khồng sảy ra xung đột đâu bạn ak. Do bạn sử dụng nhầm thủ thuật khác thoi.

      4- Cài tên miền: TÊN MIỀN

      5- Các nút like: bạn chọn ở đây XEM

      6- Newfeeds của blogger hiện tiêu để + nội dung theo đấu ngắt của bạn nha,

      Xóa
  22. Cám on Nam nha, Nam cho mình liên kết blog nhé. Thông tin trang web: LINK: http://yeutienganh123.blogspot.com/ - TÊN HIỂN THỊ: Learning American English Online - LOGO: http://yeutienganh123.blogspot.com - KÍCH CỠ LOGO: cao = "16px", rộng = "16px." - MÔ TẢ: Đây là trang học Tiếng Mỹ miễn phí nhanh nhất.

    Trả lờiXóa
  23. Nam có bài viết nào chỉ tuyệt chiêu tăng traffic cho blog không?

    Trả lờiXóa
    Trả lời
    1. Tăng trafix thì mình không viết vì các cách kéo trafix ảnh hưởng rất nhiều tới xếp hạng blog của bạn,

      Xóa
  24. Nam thêm giùm mình mô tả Blog: Trang học Tiếng Mỹ miễn phí nhanh nhất. Tên Blog: Learning American English Online. Cám ơn Nam nha.

    Trả lờiXóa
  25. Chào bạn,

    Mình mắc phải lỗi là sau khi ấn like trong recommendation box hay comt trong facebook comment, đều hiện ra bảng confirm và bảng với dòng chữ lỗi kết nối. và mình không biết bị lỗi ở đâu, rất mong sự bạn giúp đỡ của bạn. Blog của mình: http://yeughibli.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Mình chưa rõ lỗi bạn nói lắm nhưng mình vào bấm test trên blog bạn thấy mọi thứ vẫn bình thường mà bạn. Không hề xuất hiện lỗi như bạn nói. Bạn hãy đăng nhập vào mộ tài khoản face book khác và test xem sao nhé.

      Xóa
    2. Mỗi mình lần like trong bảng recommendation đều hiển thị bảng thông báo confirm bạn ạ, rất phiền phức :(

      Xóa
    3. Bạn thử thêm đoạn code bên dưới sau thẻ <head> nếu trong blog của bạn chưa có nha:

      <meta content='article' property='og:type'/>
      <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
      <meta expr:content='data:blog.title' property='og:site_name'/>
      <meta expr:content='data:blog.pageName' property='og:title'/>
      <b:if cond='data:blog.metaDescription != ""'>
      <meta expr:content='data:blog.metaDescription' name='description'/>
      </b:if>

      Xóa
    4. Cám ơn bạn nhưng mà vẫn không được ạ :(( Hiện trạng thực tế của blog mình là nhưu thế này: Mình thêm comment và like cho blog của mình thì nó báo This comment has not yet been published to Facebook. Nút like hay follow cũng vậy, nó cần Confim và hiện lên bảng thông báo mới thực hiện được.

      Xóa
    5. Thông báo This comment has not yet been published to Facebook hiện lên khi bạn đặt tùy chọn puplish to your page. Bạn chỉ cần bỏ dấu tích ở mục đó trog phần comment là sẽ hết lỗi thôi mà,

      Xóa
    6. Thanh recommendation mỗi lần like nó đều bắt mọi nngười Confirm và hiện lên một bảng kết nối tới fb. Bạn có thể chỉ mình cách khắc phục không, thanks <3

      Xóa
    7. Bạn hãy mời mail tavananam01@gmail.com của mình làm quản trị viên tạm thời mình cỉnh cho nha, tại vì lỗi này đến nay chỉ có bạn mơi mắc phải nếu nguyên nhân không phải bạn dùng id của trang khác thì mình cần phải xem cụ thể mới trả lời được bạn ak.

      Xóa
    8. Mình đã gửi lời mời rồi á. bạn sửa lỗi giúp mình nha, thanks <3

      Xóa
    9. Oke lát mình sẽ check ngay :)

      Xóa
    10. thanks bạn, khi nào bạn chấp nhận lời mời thì pm mình qua skype yaourtkute92 để mình thiết lập quyền quản trị nhé <3

      Xóa
  26. Chào anh Namkna. Em muốn dùng tiện ích này như một chatbox facebook. Em phải thực hiện như thế nào ạ. Em thử nhiều cách rồi mà không được. "

    Ví: Em muốn thêm tiện ích chatsbox đó dưới bài viết xem nhiều.
    Anh xem qua Website của em: Đội 2 Mùa Hè Xanh

    Em cảm ơn anh nhiều ạ

    Trả lờiXóa
    Trả lời
    1. Tiện ích comment này hả em, Nếu là tiện ích này thì em xem bài viết này nha

      Ẩn hiện khung comment với Jquery cho blogger

      Xóa
  27. Anh Namkna không hiểu ý của em. Em muốn dán code trên vào tiện ích HTML/Javarscrip . r Và có thể đặt nó ở bất cứ đâu, ví dụ như cột bên phải của Blog, dưới tab Bài viết xem nhiều.

    Trả lờiXóa
    Trả lời
    1. Code comment của blogger không thể tách ra khỏi phần xml của template em ak. Bình thường nếu em xóa đi nó sẽ được tự động thêm lại. Do vậy muốn làm như em là điều không thể.

      Xóa
  28. Mình chèn thành công rồi, nhưng sao nó không hiện tiếng Việt chỗ các chữ comment, like, post ... mà chỉ hiện tiếng Tây Ban Nha hay gì đó thôi ah, hic. Admin giúp mình với nhé!

    Trả lờiXóa
    Trả lời
    1. Bạn hãy thử truy cập bằng một tài khoản face khác xem còn gặp lỗi đó nữa không nha.

      Xóa
  29. bạn ơi mình muốn comment theo từng URL thì sao bạn? (hình như là comment facebook động)

    Trả lờiXóa
  30. chào b, mình đã thêm vào nhưng blog mình nó ko hiện box cmt face đâu cả, chỉ có box cmt google+ thôi, vậy thì lỗi gì đây b? thank

    blog mình: http://hotgirlbuonchuyen.blogspot.com

    Trả lờiXóa
  31. Mình vào thấy bạn đang sử dụng ves 2 bạn nha. Nó hoạt động rồi đó.

    Trả lờiXóa
  32. Làm sao để tạo cho mỗi bài viết được hả cậu ?

    Trả lờiXóa
  33. Mình chèn code theo cách này nhưng khi có người comment ở 1 entry thì mình mở entry nào ra cũng thấy xuất hiện comment fb đó hết là sao nhỉ? Bạn Namkna chỉ giúp mình với nha! Thannks!

    Trả lờiXóa
  34. Muốn nó hiện luôn ngay dưới bài viết ngoài trang chủ luôn thì sao hả a? Kiểu như giống comment của mấy trang trên FB luôn ấy.

    Trả lờiXóa
  35. Thêm comment Facebook vào Blogspot Blogger (Mới) 100% thành công: https://www.youtube.com/watch?v=vElOHRFK3Mk

    Trả lờiXóa
  36. nó không hiện ra bạn ơi
    https://tpvtinhoc.blogspot.com

    Trả lờiXóa
  37. nó không hiện ra bạn ơi
    https://tpvtinhoc.blogspot.com

    Trả lờiXóa
  38. Em chào anh!
    Đọc các bài viết của ah thấy rất hay và e áp dụng nhiều cái đã thành công. Tuy nhiên, blog của em sau một thời gian thì khung comment facebook lại bị lỗi không đăng bình luận được.
    Em đã thử nhiều cách và vì không hiểu nhiều về code lắm nên muốn nhờ ah xem giúp được không?
    em sẽ gửi code vào email cho ah, xem giúp e nhé ! Thank a !

    Trả lờiXóa