Nhatthienkt.net - Thủ thuật Blogger- Blogspot tuần này hướng dẫn cách chèn Commnet (khung bình luận) của Facebook (fb) vào blogspot theo cách đơn giản nhất.
Yêu cầu:
- Nếu bạn có page facebook thì tốt.
Trang facebook của mình:
Bước 1: Tạo app và lấy ID cho trang
1.1. Đăng nhập vào Facebook và truy cập trang
1.2. Bấm vào Create APP
1.3. Chọn WWW
1.4. Nhập tên App và bấm Create New Facebook App ID
1.5. Tùy chọn như hình
1.6. Bạn sẽ nhận được đoạn mã
- Thay màu đỏ thành ID ứng dụng của bạn
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '561754050673848',
xfbml : true,
version : 'v2.8'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Bước 2: Cài đặt cho website/blogger
2.1. Vào cài đặt Theme trong blogspot
2.2. Thêm code facebook vào blogger
Tìm đến thẻ
Tìm đến thẻ
</body>
2.3. Thêm khung bình luận facebook vào bài viết
Ở đây nếu bạn muốn chèn khung bình luận vào vị trí cuối bài viết thì xem cách dưới đây. Nếu không bạn có thể chèn bất cứ vị trí nào bạn thích.:))
Tìm đến thẻ
<data:post.body/>
Và chèn code dưới đây sau nó. Chú ý bạn sẽ tìm thấy vài thẻ như trên, hãy lần lượt thay thế, đúng vị trí mới hiện thị.
<div class='fb-comments' data-num-posts='5' data-width='100%' expr:href='data:post.canonicalUrl'/>
Thay các thông số phù hợp:
data-num-posts='5' : Tức là chỉ load tự động 5 bình luận
data-width= : Độ rộng của khung bình luận
data-width= : Độ rộng của khung bình luận
2.5. Thêm thuộc tính quản trị (tức thêm thẻ Meta)
<meta content='561754050673848' property='fb:app_id'/><meta content='100001822631280' property='fb:admins'/><meta content='https://www.facebook.com/561754050673848/' property='article:publisher'/><meta content='https://www.facebook.com/100001822631280/' property='article:author'/>
Thêm các thẻ Meta trên sau thẻ
<head>
Thay màu đỏ thành ID app của bạn đã làm ở bước 1.6
Riêng fb:admins (màu xanh) là ID facebook cá nhân của bạn.
Tìm ID facebook cá nhân của bạn bằng cách sử dụng trang web Lookup-id.com
+ Nhập link facebook của bạn
+ Bấm nút Lookup để nhận ID
Vậy là xong rồi nhé, khung commnet của bạn sẽ như thế này
Nếu đến đây bạn vẫn không hiện thị được khung comment bạn hãy xem trang web của bạn có bị Facebook chặn không? Nếu bị chặn domain thì nó không cho hiện khung bình luận. Mặc khác với blogspot thì HTML phải đầy đủ như dưới (version='2' class='v2' hoặc version='1' class='v1' đều được)
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='vi' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Lời kết: Trên đây là cách chèn commnet facebook vào Blogger-Blogspot cập nhật mới nhất, các bạn tham khảo thêm và góp ý nếu có thắc mắc.
Cập nhật
Nhiều bạn vẫn không thể nhìn thấy thông báo bình luận trên Facebook khi có người comment facebook trên website. Bạn hãy chắc chắn đã thực hiện cài đặt 2 nội dung sau.
Thứ 1: Bạn vào https://developers.facebook.com/tools/comments/
Lựa chọn ứng dụng app, ví dụ:
Thứ 2: Bạn nhấp vào cài đặt chọn Bật thông báo
- Tiếp theo chuyển qua tab Moderators
- Nhập tên người quản lý và thêm vào đây
- Cuối cùng lưu lại.
Chúc các bạn thành công!
Tóm lại làm 3 bước nhé
Cập nhật
Nhiều bạn vẫn không thể nhìn thấy thông báo bình luận trên Facebook khi có người comment facebook trên website. Bạn hãy chắc chắn đã thực hiện cài đặt 2 nội dung sau.
Thứ 1: Bạn vào https://developers.facebook.com/tools/comments/
Lựa chọn ứng dụng app, ví dụ:
- Thủ Thuật Hay
- ID ứng dụng 561754050673848
Thứ 2: Bạn nhấp vào cài đặt chọn Bật thông báo
- Nhập tên người quản lý và thêm vào đây
- Cuối cùng lưu lại.
Tóm lại làm 3 bước nhé
1. Chèn 4 thẻ meta như hướng dẫn
<meta content='561754050673888' property='fb:app_id'/> <meta content='100001822631680' property='fb:admins'/> <meta content='//www.facebook.com/561754050673888/' property='article:publisher'/> <meta content='//www.facebook.com/100001822631680/' property='article:author'/>
2. Chèn trước thẻ </body>
<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.async=true; js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.7&appId="; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
3. Chọn vị trí muốn chèn
<div class='fb-comments' data-num-posts='5' data-width='100%' expr:href='data:post.canonicalUrl'/>
19 Nhận xét
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaem vẫn chưa rõ lắm
Trả lờiXóaChào e, em gặp vấn đề gì? không rõ chỗ nào?
XóaHi bạn
Trả lờiXóaComments này chạy tốt ở giao diện desktop, còn giao diện mobile (?m=1) không hiển thị được comments. VD như blog mình link này
http://www.nhuygialai.com/2011/03/loi-tinh-cuoi.html
Bạn nghiên cứu giúp nhé.
Rất cám ơn
Cảm ơn bạn đã có ý kiến hay, đối với blog của mình nó hiện thị comment facebook bình thường trên mobile (m=1), để hiện thị bạn nên tắt mẫu dành cho di động (vào Mẫu/Điện thoại di động)
XóaAd ơ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.
Trả lờiXóakhi 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é
Bạn thử thay đổi data-width='100%' thành data-width='300' hoặc một giá trị bất kỳ.
Xóacái này mình từng nghĩ tới,mình từng thay nhiều giá trị mà vẫn k dc j cả
Xóaad xem giúp mình với
https://blogstory1st.blogspot.com/
Mình đã làm được! Cảm ơn Ad, bài viết rất hay và ý nghĩa. Nếu bạn nào có nhu cầu làm mô hình kiến trúc hãy liên hệ với mình nha. Click link "mô hình kiến trúc" ủng hộ mình. Cảm ơn cả nhà!
Trả lờiXóaTest !
Trả lờiXóaIn bạt Decal Hà Nội
Anh đã thực hiện theo đúng hướng dẫn nhưng vẫn chưa được em ơi. Em vào blog của anh thử coi nó có xuất hiện khung bình luận Facebook không nhé, chưa anh vào kiểm tra thì chả thấy nó đâu hết. Link blog của anh http://www.cungdieuphuongnam.tk
Trả lờiXóaCó hiện thị rồi mà anh ở tab Facebook Comments nhé
Xóađể khung bình luận giống của anh như thế nào vậy.
Trả lờiXóa
XóaChèn đoạn này cuối bài viết nhé'
<div class='fb-comments' data-num-posts='5' data-width='100%' expr:href='data:post.canonicalUrl'/>
a ơi cho e xin code chống coppy chặn javascript của a đc ko ak, e thấy code của a khá hữu dụng... e cám ơn ạ
Trả lờiXóaĐoạn code như thế này nhé:
Xóa<script type='text/javascript'>
jQuery(document).ready(function(){
var ctrlDown = false;
var ctrlKey = 17, vKey = 86, cKey = 67;
jQuery(document).keydown(function(e){
if (e.keyCode == ctrlKey) ctrlDown = true;
}).keyup(function(e){
if (e.keyCode == ctrlKey) ctrlDown = false;});
jQuery(document).keydown(function(e){
if (ctrlDown && e.keyCode == cKey){alert('Vui lòng ghi Nguồn: www.nhatthienkt.net nếu copy nhé!');}
return true;});});
</script>
tkssssss a
Xóaa ơi ng ta chặn javasript e vẫn bị coppy...
XóaĐã áp dụng thành công. Thank ad. Hihi. Chúc blog phát triển vững mạnh.
Trả lờiXóaDemo của mình nè:
http://www.thegioitin24h.com
Vui lòng viết comment Tiếng Việt có dấu.
Emoji- Bạn có thể gửi mail trực tiếp qua địa chỉ: nhatthienkt.s@gmail.com
- Nhận xét không hỗ trợ cho người dùng ẩn danh
- Lưu ý những nhận xét với mục đích backlink không liên quan đến nội dung bài viết sẽ bị xóa bỏ
- Bạn muốn theo dõi cập nhật trả lời sớm nhất từ adm vui lòng tick vào ô "Thông báo cho tôi" rồi xuất bản nhận xét của mình.