Chèn comment facebook vào blogspot mới nhất

Như đã có nói đến trong bài cách chèn fanpage facebook vào blogspot, vì Facebook cập nhật và thay đổi nhiều plugin mới nên những hướng dẫn chèn comment facebook vào blogspot trước đây đều không thể quản lý được comment (hiển thị, trả lời, ẩn hoặc cấm người dùng).

Chú ý: Do Facebook cập nhật Plugin mới (API 2.7) nên giao diện khác rất nhiều khiến nhiều bạn thực hiện không thành công. Vì thế mình đã tạo tài khoản mới sau đó test lại và đã ok. Các bạn thực hiện hướng dẫn trong video và link sau nhé!


Nhiều bạn khi thực hiện tính năng này đều mắc phải những lỗi sau:
  • Comment facebook chỉ hiện "thủ công" ở từng bài viết (tức là sau khi viết bài xong thì phải chuyển qua chế độ HTML của công cụ soạn thảo văn bản và chèn đoạn code comment facebook vào) hoặc 1 comment hiện giống nhau ở tất cả các bài viết.
  • Chèn comment facebook vào blogspot thành công nhưng không quản lý được (chỉ thấy bình luận của người dùng, không được thông báo, không biết comment đó của bài viết nào, không ẩn comment được).
Vì lý do này mà ở bài viết hôm nay, mình sẽ hướng dẫn các bạn cách chèn comment facebook vào blogspot mới nhất, có thể quản lý được comment của người dùng, nhận được thông báo facebook khi có người dùng bình luận vào bất cứ bài viết nào trên blog.

Ok. Giờ thì bắt tay vào làm nhé!

1. Tạo app facebook 2015 đơn giản


Truy cập đường link: https://developers.facebook.com/ trên thanh menu chọn My Apps -> Register as a Developer (Nếu như đã có tài khoản App rồi thì hãy tạo một App mới bằng cách chọn Add  a New App).

tao-app-facebook-1
Hình 1. Tạo App Facebook 2015

Facebook sẽ hiện bảng thông báo Register as a Facebook Developer, các bạn chọn Yes như hình 2.

tạo-app-facebook-2
Hình 2. Tạo App Facebook 2015
tao-app-facebook-3
Hình 3. Tạo App Facebook 2015
Tại bảng Add a New App các bạn chọn advanced setup theo như hình 4.

tao-app-facebook-4
Hình 4. Tạo App Facebook 2015
Tiếp tục thực hiện như hình 5.

tao-app-facebook-5
Hình 5. Tạo App Facebook 2015
Chọn hình theo yêu cầu kiểm tra bảo mật

tao-app-facebook-6
Hình 6. Tạo App Facebook 2015
Ở hình tiếp theo các bạn Copy lại mã App ID để một lát chèn vào code ở những bước tiếp theo

tao-app-facebook-7
Hình 7. Tạo App Facebook 2015
Mục Settings các bạn thiết lập như hình 8.
  • Phần App Domains: với những blog trỏ tên miền riêng thì các bạn nhập cả phần www. Với những blog có đuôi .blogspot.com thì các bạn chỉ cần nhập tên miền blog bình thường ví dụ như maylanhtotnhat.blogspot.com.
  • Phần Contact Email: các bạn nhập gmail quản lý và không được bỏ trống phần này.
  • Phần Site URL: sau khi click Add Platform thì các bạn sẽ thấy phần này, nhập trang blog của bạn vào đây bao gồm cả http://
Sau đó lưu lại (Save Changes)

tao-app-facebook-8
Hình 8. Tạo App Facebook 2015
Tiếp theo các bạn chọn mục Status & Review, sau đó click chọn Yes để kích hoạt chạy tài khoản App Facebook.

tao-app-facebook-9
Hình 9. Tạo App Facebook 2015
Thông báo hiện ra các bạn chọn chấp nhận

tao-app-facebook-10
Hình 10. Tạo App Facebook 2015

Trở lại phần Dashboard và copy sẵn mã App ID và thực hiện tiếp phần 2.

2. Chèn comment facebook vào blogspot


Chọn Mẫu-> Chỉnh sửa HTML->Ctr+f gõ tìm thẻ <head> và chèn đoạn code sau vào sau thẻ <head>

<meta content='App_ID' property='fb:app_id'/>

Thay App_ID bằng mã App của các bạn ở phần Dashboard (nếu quên các bạn xem lại hình 7).

chen-comment-facebook-vao-blogspot
Hình 11. Chèn comment facebook vào blogspot

Tiếp tục tìm đến thẻ <body> và chèn đoạn code sau vào sau thẻ <body>

<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;appId=App_id&amp;version=v2.3&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Thay thế App_id bằng mã App của các bạn

chen-comment-facebook-vao-blogspot-1
Hình 12. Chèn comment facebook vào blogspot

Tìm đến đoạn mã <b:include data='post' name='post'/> và chèn đoạn code sau vào bên dưới

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='10' data-width='747px' expr:data-href='data:blog.canonicalUrl'/>
</b:if>

Các bạn có thể chỉnh sửa thông số "747px" cho vừa với khung comment bài viết của blog các bạn.

chen-comment-facebook-vao-blogspot-2
Hình 13. Chèn comment facebook vào blogspot

Giờ thì lưu lại và xem ở mục comment ở một bài viết bất kỳ nhé. Nếu như thấy khung comment face book hiện Public Comments ·Moderator View là thành công.

chen-comment-facebook-vao-blogspot-3
Hình 14. Chèn comment facebook vào blogspot
Lưu ý: Một số Template có cấu trúc code khác sẽ không thể hiển thị khung comment facebook mặc dù các bạn đã thực hiện theo giống như trên (trường hợp này rất ít khi xảy ra). Nếu gặp trường hợp này thì các bạn có thể để lại lời nhắn bên dưới mình sẽ thiết lập giúp cho các bạn.

Đến bước này thì cơ bản các bạn đã hoàn thành chức năng gắn comment facebook cho blogspot. Tuy nhiên để có thể nhận được thông báo của facebook khi ai đó bình luận bài viết hoặc để quản lý comment của người dùng thì các bạn phải xác nhận tài khoản facebook bằng di động.

Cách thức làm như sau (xác nhận facebook là miễn phí nhưng khi nhắn tin qua các nhà mạng bạn sẽ tốn 10.000 đồng nhé. Mình đã tốn tổng cộng 20.000 đồng để thử và xác thực lại tính năng này :) nên các bạn có thể yên tâm).

Sau khi đăng nhập vào tài khoản Facebook các bạn chọn cài đặt->Di động-> Thêm số điện thoại. Sau đó nhập số điện thoại để xác nhận (nhập số điện thoại thật nhé các bạn và số này chưa từng xác nhận tài khoản facebook nào khác) và làm theo hướng dẫn của facebook. Nếu như chưa rõ thì làm theo hình phía dưới.

xac-nhan-tai-khoan-facebook
Chọn cài đặt tài khoản facebook của bạn

xac-nhan-tai-khoan-facebook-1
Tại mục di động các bạn chọn thêm số điện thoại

xac-nhan-tai-khoan-facebook-2
Chọn nhà mạng ứng với mạng của số điện thoại của bạn

xac-nhan-tai-khoan-facebook-3
Nhập số điện thoại của bạn vào và nhấn tiếp tục

xac-nhan-tai-khoan-facebook-4
Soạn tin nhắn như yêu cầu và nhập mã nhận được từ điện thoại của bạn vào như hình
Lưu ý: sau khi soạn tin nhắn thì các bạn nhớ hủy dịch vụ như thông báo trên di động của các bạn để không tốn tiền cho mỗi tháng nữa nhé.

xac-nhan-tai-khoan-facebook-5
Hiện như hình là đã xác nhận thành công nhé các bạn
Bây giờ thì đã hoàn thành rồi đấy các bạn. Hãy thử dùng một tài khoản facebook khác và bình luận vào một bài viết bất kỳ, các bạn sẽ nhận được thông báo chi tiết từ facebook về tin bình luận của bài viết mới nhất. Khi click vào thông báo bạn sẽ được chuyển đến trang quản lý comment facebook. Tại đây các bạn có thể ẩn bình luận hoặc cấm người dùng tùy ý.

thong-bao-comment-facebook
Thông báo facebook về comment bài viết
Vào nhanh trang quản lý comment facebook: https://developers.facebook.com/tools/comments sau đó thiết lập như hình dưới.

quan-ly-comment-facebook
Quản lý comment facebook
Trong quá trình thực hiện bài viết sẽ không tránh khỏi những thiếu sót. Nếu như các bạn bị vướng ở bước nào thì hãy để lại comment bên dưới mình sẽ giải đáp cụ thể. Ngoài ra, như đã có đề cập ở trên, mỗi template khác nhau cũng ảnh hưởng đến kết quả thực hiện khác nhau do đó các bạn nên xem kỹ từng bước và dựa vào đó để gắn comment facebook vào cho blog thích hợp nhất.

66 comments:

  1. Mình làm theo đúng tinh tinh như bạn chỉ, cũng ko thấy bão lỗi gì nhưng vẫn ko thể hiện khung comment lên bạn ạ

    ReplyDelete
  2. Hiện tại bây giờ load mấy lần chờ tải trang xong hết rồi trên web bạn vẫn ko thấy chỗ comment fb đâu nè

    ReplyDelete
    Replies
    1. Mình mới cập lại bước ở hình13 phần "Tìm đến đoạn mã..." bạn thực hiện lại thử nhé.

      Mình đổi template mà không để ý nên xảy ra lỗi này. Mình mới cập nhật lại. Cám ơn bạn nhiều nhé. Mong nhận hồi âm đã thành công của bạn sớm :)

      Delete
    2. Vậy chắc tại lỗi đó rồi, mình thử luôn và sẽ báo lại bạn

      Delete
    3. Mình đã làm đúng như bạn và hiện được ô comment dc rồi. Tuy nhiên mình đã đăng ký sdt mất 10k và lấy nick khác thử nhưng vẫn ko nhận dc notification, tức là khâu quản lý comment chưa được, mình làm đúng hết ko có báo lỗi gì mà vẫn ko dc :(

      Delete
    4. Bạn xem kỹ lại một số chú ý sau:
      - Đã thay App_ID bằng mã của bạn vào đoạn code chèn sau thẻ head chưa?
      - Đã thay App_ID bằng mã của bạn vào đoạn code chèn sau thẻ body chưa? (hình 12)
      - Đã chọn Yes ở phần Status & Review của tài khoản App chưa? (Hình 9)
      - Chỉ lấy mã app của tài khoản FB đầu tiên đã xác nhận sđt (Giữ tài khoản này để kiểm tra và đừng thay bằng tài khoản khác, đừng đổi mã khác luôn, nếu ko được thì kiểm tra lại các bước trên chứ đừng thay mã này)
      Bạn xem lại thử nhé. Nếu không được nữa thì có thể inbox mail levuongnam@gmail.com mình làm giúp bạn.

      Delete
    5. Cài này là sao: "Chỉ lấy mã app của tài khoản FB đầu tiên đã xác nhận sđt (Giữ tài khoản này để kiểm tra và đừng thay bằng tài khoản khác, đừng đổi mã khác luôn, nếu ko được thì kiểm tra lại các bước trên chứ đừng thay mã này)"
      Mình 1 1 fb cá nhân và có xác thực sdt từ ngày xưa rồi (chỉ chwua kích hoạt tin nhắn thôi). hôm nay chèn comment fb vào blog mới kích hoạt luôn cái sđt cũ đó

      Delete
    6. Mình đương nhiên chỉ dùng 1 tk fb và 1sdt duy nhất

      Delete
    7. Các bước sau đảm bảo đã làm chuẩn:
      - Đã thay App_ID bằng mã của bạn vào đoạn code chèn sau thẻ head chưa?
      - Đã thay App_ID bằng mã của bạn vào đoạn code chèn sau thẻ body chưa? (hình 12)
      - Đã chọn Yes ở phần Status & Review của tài khoản App chưa? (Hình 9)

      Delete
    8. Ý mình là tài khoản App chỉ cần tạo theo như trên và kích hoạt rồi thì nếu nó chưa thông báo thì không phải do lỗi này nên đừng thay đổi, chỉ xem lại các bước trước đó thôi :).

      Khi thực hiện lại để hướng dẫn bài này mình cũng đã xóa tài khoản App và tạo App mới ở 1 tài khoản mới, nhưng khi thông báo có comment thì nó báo về tài khoản FB đã xóa App :) nên bạn xem kỹ lại các bước ở trên thử nhé!

      Delete
    9. Vậy ngày trước mình có tạo 1 app cũng để comment fb và thực tế đã sử dụng 1 thời gian rồi, sau thấy quản lý cmt ko dc trơn tru lắm nên bỏ và mình vừa mớixóa app cũ đi rồi, để lại app mới vì mình cũng nghĩ nó đá nhau. Tuy nhiên từ sáng test thì vào cả 2 app đều ko thấy nhận notification nên đã xóa app cũ đi.

      Delete
    10. Cái app cũ là API 2.0 thôi nên mình nghĩ nó lạc hậu rồi, xóa

      Delete
    11. Thánh công rồi bạn nhé, nhận được notification ngay khi có người comment vào bài viết trên wen, comment ở bài nào biết chính xác bài đó luôn, cảm giác rất sướng. Các bạn nào chưa làm dc thì kiểm tra lại toàn bộ quá trình nhé, xong xuôi thì bình tĩnh đợi thêm khoản 1 ngày nó mới hoạt động chính xác ổn định. Mình làm đúng hướng dẫn và test nhưng ko nhận dc notification ngay, gmail cho bạn Vương Nam để nhờ bạn ấy kiểm tra chưa được nhưng đến hôm sau lại nhận dc hết notification lúc test, đến giờ thì nhận đủ hết kể cả comment mới. Bạn Vương Nam cũng rất nhiệt tình, ai vẫn ko làm dc thì mail hỏi bạn ấy nhé

      Delete
    12. Bạn ơi mình đã lên khung comment, đã add vào mục người quản lý nhưng chưa hiện chỗ để quản lý thêm sửa xóa commment cho quản trị viên :(

      Delete
  3. Mình cũng làm hệt theo mà ko được bạn ơi

    ReplyDelete
    Replies
    1. Bạn gặp lỗi sau đó thực hiện thành công thì có thể comment lại để các bạn khác tham khảo. chứ gửi vào mail mình ko thì mấy bạn khác đâu biết được :)

      Delete
    2. Làm đúng hướng dẫn và chờ khoảng 1 ngày nha bạn, mình làm dc rồi. Lúc mới làm xong cũng chưa nhận dc ngay đâu

      Delete
  4. mình bị lỗi lạ là dùng điện thoại thì thấy khung cmt fb nhưng trên laptop lại ko
    với lại khi có ng cmt cũng ko thấy thông báo của app
    bạn giúp mình đc chứ ???
    blog của mình: http://blogsonminh.blogspot.com

    ReplyDelete
    Replies
    1. Khung comment không hiện thì bạn gửi thông tin qua gmail mình vào xem code mới kiểm tra được bạn nhé. Còn thông báo nếu bạn mới làm và giống như trên thì bạn đợi một chút là sẽ có.

      Delete
    2. mình xin cái mail đc ko ?
      mình ko thấy thông tin mail của bạn đâu hết

      Delete
    3. levuongnam@gmail.com. Mình có ghi trong phần liên hệ đó bạn :)

      Delete
  5. Bạn Nam có mẫu blog dạng tin tức nào nhìn hiện đại và chuẩn seo ko gửi cho mình xin với, muốn làm thêm 1 cái blog mới, mong tin bạn :)

    ReplyDelete
    Replies
    1. Tối mình gửi cho bạn mấy mẫu. Tối ưu thì bạn cứ tối ưu. Xong nhắn mình xem mình góp ý thêm cho chuẩn.

      Delete
    2. mình mail sang bạn trước nhé. Mà dạo gần đây nhà mạng chặn blog ko hiển thị được ảnh (vào bằng 3G), mình làm theo http://www.truonganh.info/2015/04/sua-loi-anh-blospot-khong-hien-thi-do-bi-chan.html?showComment=1441266029091#c1985361565585038896 nhưng ko dc, bạn xem có cách nào để blog hiện lại ảnh với

      Delete
  6. thanks bạn nhiều nhé. đang cần

    ReplyDelete
  7. bị lỗi này nèk admin
    http://i.imgur.com/DfJh0z1.jpg
    làm đủ mọi cách...
    đủ kiểu mà vẫn bị lỗi không gởi được tin nhắn

    ReplyDelete
  8. Em bị lỗi này nè.
    Không hiểu sửa như thế nào nữa
    http://i.imgur.com/gJWy0N5.png

    ReplyDelete
  9. bạn ơi sao nut like với cái comment của tớ khi vào like hoặc cmt có chọn vào post lên dòng thời gian luôn
    nhưng vào trang cá nhân với nhật ký hoạt động ko thấy gì nhỉ
    ah với lại trong phần cài đặt cmt mình chọn là công khai nhưng khi có cmt mới vào phần kiểm duyệt thì nó vẫn hiển thị ở chổ cần xác nhận cmt này công khai nhỉ
    xin bạn giúp mình với cãm ơn nhiều

    ReplyDelete
  10. bạn ơi, mình làm như bạn hướng dẫn mà ko hiện lên, bạn chỉ thêm giúp mình nha, thanks bạn nhiều

    ReplyDelete
  11. Tuyệt vời, cảm ơn vì bài viết của Ad rất nhiều ! Thành công như mong đợi.

    ReplyDelete
  12. anh ơi cho e hỏi, lúc đký tên web ấy, e muốn đký blogspot thì ghi thế nào :) e ghi kiểu gì nó cũng lỗi :/

    ReplyDelete
    Replies
    1. Bạn xem kỹ lại các bước thế nào.

      Delete
  13. Lưu ý: Một số Template có cấu trúc code khác sẽ không thể hiển thị khung comment facebook mặc dù các bạn đã thực hiện theo giống như trên (trường hợp này rất ít khi xảy ra). Nếu gặp trường hợp này thì các bạn có thể để lại lời nhắn bên dưới mình sẽ thiết lập giúp cho các bạn.
    Của mình là trường hợp này, bạn thiết lập giúp mình nhé.
    Thanks b nhiều

    ReplyDelete
  14. Bạn xem hộ mình được không mình đã làm và chưa thành công. Mình mới thay template. Template cũ mình vẫn làm được

    ReplyDelete
  15. bạn ơi, mình chèn vào blogspot lúc chưa trỏ tên miền vào thì nó hoạt động tốt nhưng sau khi trỏ tên miền thì nó lại bị lỗi, comment không được

    ReplyDelete
    Replies
    1. Bạn đã làm lại các bước chưa vì một cái là .blogspot.com, còn cái kia là tên miền khác nhau hoàn toàn.

      Delete
  16. mình fb"Pi phan" trang của mình chèn cm facebook vào blog nó hiện 2 dòng cm

    ReplyDelete
  17. Cảm ơn bạn nhé mình làm theo dc rồi. CHo mình hỏi thêm 1 chút muốn xóa những bình luận không thích thì làm như nào hả bạn

    ReplyDelete
    Replies
    1. Ẩn bình luận hoặc cấm người dùng. Bạn chọn ngay góc phải của comment

      Delete
  18. Kg muốn nó dofolow thì làm thế nào bạn ơi
    Tks

    ReplyDelete
  19. Giờ mình muốn chèn comment trong trang thì phải làm thế nào hả bạn? THanks!

    ReplyDelete
    Replies
    1. Bạn chèn khung comment facebook vào khung soạn khảo bài viết của trang đó.

      Delete
  20. Sao em làm nó lại không hiện nick facebook mà lại hiện google ta

    ReplyDelete
  21. Làm sao để điều chỉnh chiều dài của khung zj anh ?

    ReplyDelete
    Replies
    1. Bạn sửa ngay chỗ width="747px"! tăng hoặc giảm số 747 nhé.

      Delete
  22. I LOVE http://www.levuongnam.com
    Nhờ bài viết này mà tôi làm được rất nhiều điều thú vị.
    Cmar ơn !

    ReplyDelete
  23. em làm chỗ miền ứng dụng điền vo toàn bị cảnh báo k an toàn ạ

    ReplyDelete
    Replies
    1. Do Facebook cập nhật nên bị tình trạng này. Bạn có thể xem bài hướng dẫn cập nhật cách gắn comment facebook ở đầu bài nhé!

      Delete
  24. Mình đã làm theo nhưng hiện được khung thì khi gửi bị lỗi ko gửi được tin nhắn, lập blog khác thì lại được mong nhận được giúp đỡ

    ReplyDelete
    Replies
    1. Không biết ở Blog bạn comment lỗi bạn đã từng tạo và xóa một App id nào chưa? Nếu đã từng xóa thì tất cả những ứng dụng của Facebook đối với domain/blog đó sẽ không thể hoạt động nữa (theo như thông báo khi xóa App id).

      Delete
  25. thế có cách nào khác phục không anh

    ReplyDelete
  26. do tên miền thôi đã khác phục được lỗi comment nhưng giờ lại gặp vấn đề là mình ko hiện cái phần quản lý comment fb dù đã thứ tạo app fb mới

    ReplyDelete
  27. không biết mình có làm được không đây

    ReplyDelete
  28. Ad ơi mình bị như bạn trên,thiết bị di động, kể cả ipad cũng không được,mà blog của mình vốn là tắt mẫu trên di động ui, mình tìm đủ cách mà không được,ad có thể xem hộ mình được không.
    khi test mình thấy nó chỉ chịu hiển thị với màn hình cỡ 1000x1300 trở lên
    Thank ad nhé

    ReplyDelete
    Replies
    1. "bị như bạn trên" là bị như thế nào bạn? Về việc sử dụng giao diện di động mặc định của Blogger cung cấp thì sẽ không hiện khung comment facebook trên di động nhé bạn.

      Delete
  29. Cái còm blogger của bạn đẹp quá, bạn cho mình xin đoạn code và css với

    ReplyDelete
  30. Cứ tương tác được với facebook là hay lắm rồi

    ReplyDelete

  31. cho mình hỏi, bình thường khung comment fb mặc định bình luận với tư cách là fb cá nhân, vậy có cách nào để mặc định bình luận với tư cách là 1 page hay không? cảm ơn bạn

    ReplyDelete