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

69 Comments

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).

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.

Hình 2. Tạo App Facebook 2015

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.

Hình 4. Tạo App Facebook 2015

Tiếp tục thực hiện như hình 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

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

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)

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.

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

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).

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

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

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 == "item"'>
<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.

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.

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.

Chọn cài đặt tài khoản facebook của bạn

Tại mục di động các bạn chọn thêm số điện thoại

Chọn nhà mạng ứng với mạng của số điện thoại của bạn

Nhập số điện thoại của bạn vào và nhấn tiếp tục

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é.

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 ý.

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.

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.

69 comments:

Cam TrìnhAugust 12, 2015 at 4:06 PM
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
Replies
Cam TrìnhAugust 12, 2015 at 4:09 PM
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
UnknownAugust 14, 2015 at 1:19 AM
Mình cũng làm hệt theo mà ko được bạn ơi
ReplyDelete
Replies
UnknownAugust 25, 2015 at 3:08 PM
cảm ơn bác. chi tiết ghê
ReplyDelete
Replies
Stupid Mind (Sơn Minh)August 28, 2015 at 2:43 AM
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
Cam TrìnhSeptember 1, 2015 at 3:41 PM
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
UnknownOctober 5, 2015 at 8:20 PM
alo
ReplyDelete
Replies
UnknownOctober 22, 2015 at 12:53 AM
thanks bạn nhiều nhé. đang cần
ReplyDelete
Replies
Huynh TioNovember 22, 2015 at 9:54 PM
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
Replies
UnknownNovember 23, 2015 at 1:05 PM
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
Replies
Shang CTNovember 24, 2015 at 1:38 AM
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
Replies
Le Dang Trung HieuDecember 2, 2015 at 5:10 PM
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
Replies
LaptopHanoi.vnDecember 22, 2015 at 12:23 PM
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
Replies
UnknownDecember 23, 2015 at 5:14 PM
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
Buytot.comDecember 28, 2015 at 1:45 PM
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
Replies
UnknownJanuary 10, 2016 at 5:46 PM
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
Replies
Cừu Vui VẻMarch 4, 2016 at 2:03 AM
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
Anh phanMarch 10, 2016 at 9:53 AM
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
Replies
ngoMarch 10, 2016 at 11:55 AM
Cảm ơn bạn nhé mình làm theo dc rồi. CHo mình hỏi thêm 1 chút muốn xóa những bình luận không thích thì làm như nào hả bạn
ReplyDelete
Replies
UnknownMarch 16, 2016 at 5:32 PM
Kg muốn nó dofolow thì làm thế nào bạn ơi
Tks
ReplyDelete
Replies
pham toanApril 1, 2016 at 10:50 AM
Giờ mình muốn chèn comment trong trang thì phải làm thế nào hả bạn? THanks!
ReplyDelete
Replies
UnknownApril 2, 2016 at 5:11 PM
Sao em làm nó lại không hiện nick facebook mà lại hiện google ta
ReplyDelete
Replies
UnknownJune 15, 2016 at 10:01 AM
Làm sao để điều chỉnh chiều dài của khung zj anh ?
ReplyDelete
Replies
UnknownJune 25, 2016 at 10:02 PM
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
Replies
UnknownJuly 21, 2016 at 6:39 PM
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
UnknownOctober 9, 2016 at 2:08 PM
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
UnknownOctober 26, 2016 at 4:08 PM
thế có cách nào khác phục không anh
ReplyDelete
Replies
UnknownNovember 19, 2016 at 11:56 PM
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
Replies
Đặng TuyếnNovember 23, 2016 at 6:15 AM
không biết mình có làm được không đây
ReplyDelete
Replies
Mai Xuân QuýJanuary 8, 2017 at 2:44 AM
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
BloggerApril 5, 2017 at 11:41 PM
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
Replies
conquernatureJuly 24, 2017 at 4:36 PM
Cứ tương tác được với facebook là hay lắm rồi
ReplyDelete
Replies
hiep294November 3, 2017 at 11:24 AM

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
Replies
UnknownApril 21, 2018 at 11:29 PM
a ơi em tìm trong mẫu xủa em k có đoạn code
phải làm sao
ReplyDelete
Replies
Thegioitin24hJuly 20, 2018 at 12:45 PM
Đã áp dụng thành công. Thank ad. Hihi. Chúc blog phát triển vững mạnh.
Demo của mình nè http://www.thegioitin24h.com
ReplyDelete
Replies