Sử dụng song song nhận xét Blogger và Facebook
Như các bạn cũng biết, người dùng Việt Nam chúng ta khá là ưa chuộng và mình nghĩ hầu như lúc nào tài khoản facebook lúc nào cũng trong trạng thái đã đăng nhập, do đó việc thêm nhận xét của facebook vào blog là một trong những việc giúp cho người dùng nhận xét một cách dễ nhất.
Trước đây mình có hướng dẫn các bạn hai thủ thuật là thêm nhận xét của Facebook vào Blogger và cách để sử dụng song song nhận xét Blogger và Google Plus, và hôm nay kết hợp chúng mình sẽ hướng dẫn các bạn một thủ thuật sử dụng song song nhận xét của Blogger và Facebook.
Tiếp tục tìm đến đoạn mã sau đây
Bạn có thể tham khảo qua video qua video hướng dẫn sau đây: http://youtu.be/Wgk2qJ3maao
Trước đây mình có hướng dẫn các bạn hai thủ thuật là thêm nhận xét của Facebook vào Blogger và cách để sử dụng song song nhận xét Blogger và Google Plus, và hôm nay kết hợp chúng mình sẽ hướng dẫn các bạn một thủ thuật sử dụng song song nhận xét của Blogger và Facebook.
Sử dụng song song nhận xét Blogger và Facebook
Đầu tiên để khung nhận xét facebook có thể hiện trên blog của chúng ta, bạn phải chèn đoạn mã sau đây vào sau 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.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>nếu có đoạn mã tương tự thì bạn có thể bỏ qua, nhưng tốt nhất là nếu có thì nên sao chép và dán đè lên đoạn mã có sẵn.Tiếp tục tìm đến đoạn mã sau đây
<b:includable id='comments' var='post'>đặt đoạn mã dưới đây vào trước thẻ đóng </b:includable> của nó
<div id="fb_comments" style="height:0;visibility: hidden;"> <div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div> </div>sau khi làm xong thì đoạn mã trong template của bạn sẽ như sau
<b:includable id='comments' var='post'> ... ... ... <div id="fb_comments" style="height:0;visibility: hidden;"> <div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div> </div> </b:includable>Lại tiếp tục tìm đến đoạn mã sau và làm tương tự như trên
<b:includable id='threaded_comments' var='post'>Bước cuối cùng bạn tìm đến đoạn mã sau
<b:includable id='post' var='post'>chèn đoạn mã dưới đây vào trước thẻ đóng </b:includable> của nó
<b:if cond='data:blog.pageType == "item"'>
<div id="Button1" style="margin:70px 0 30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='block';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button1.style.display='none';Button2.style.display='block';">Blogger Comments</div>
<div id="Button2" style="display:none;margin:70px 0 30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='block';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button1.style.display='block';Button2.style.display='none';">Blogger Comments</div>
<div id="Button3" style="margin:70px 0 30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='none';fb_comments.style.height='100%';fb_comments.style.visibility='visible';Button3.style.display='none';Button4.style.display='block';">Facebook Comments</div>
<div id="Button4" style="display:none;margin:70px 0 30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px" onclick="document.getElementById('comments').style.display='none';fb_comments.style.height='100%';fb_comments.style.visibility='visible';Button3.style.display='block';Button4.style.display='none';">Facebook Comments</div>
</b:if>Tùy chọn thêm
Nếu bạn không thích hiện bình luận của Blogger trước khi người dùng chọn để hiện lên, thì bạn có thể thêm đoạn css sau vào blog của bạn (chèn lên thẻ ]]></b:skin>)#comments { display :none }như vậy thì chỉ khi người dụng chọn vào một trong 2 hệ thông bình luận thì chúng mới bắt đầu hiện lên.Bạn có thể tham khảo qua video qua video hướng dẫn sau đây: http://youtu.be/Wgk2qJ3maao
lúc 00:03 1 tháng 7, 2014
Bạn ơi, có cách nào để mình thay đổi màu chữ trong phần comment tích hợp Face không? Mình làm theo hướng dẫn ok rồi. Nhưng màu chữ thì không ổn mấy.
lúc 08:54 1 tháng 7, 2014
Nếu blog của chị có màu tối thì thì chị thử thay cái data-colorscheme='light' thành 'dark', thì em nghĩ chắc ổn
lúc 11:07 1 tháng 7, 2014
Chị tìm trong hệ thống code nhưng không có data-colorscheme='light' em ơi. Mình còn cách nào không Lâm?
lúc 11:14 1 tháng 7, 2014
Quên, chị dùng bộ code THÊM NHẬN XÉT CỦA FACE VÀO BLOGGER nha. Không phải bộ code "SONG SONG". Vui lòng hướng dẫn giúp chị xem làm thế nào bi giờ nha.
Cảm ơn em.
lúc 13:30 1 tháng 7, 2014
Ok vậy chị tìm <div class="fb-comments" hoặc <div class='fb-comments'
rồi thêm bên canh nó cái đoạn data-colorscheme='dark' thử xem sao nhé. Có nghĩa đoạn code trên nó như thế này <div class='fb-comments' data-colorscheme='dark' ......>
lúc 15:58 1 tháng 7, 2014
Chị tìm ra chỗ code em chỉ nhưng khi dán chèn vô thì NHẬN XÉT FACE bị biến mất tiêu trên giao diện comment. Làm sao bi giờ em?
lúc 16:35 1 tháng 7, 2014
Bây giờ chị thử thế này nhé, chị bỏ hết mấy cái đoạn code mà chị thêm vào facebook comment đi mà chị sẵn thêm vào blog của chị đi. Em hướng dẫn làm từ đầu này, tìm đến <body> rồi chèn vào sau nó
<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.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Tiếp tục tìm tới <b:include data='post' name='post'/> và thêm vào sau nó
<b:if cond='data:blog.pageType == "item"'>
<div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div>
</b:if>
Thử rồi báo em biết nhé ^^
lúc 17:17 1 tháng 7, 2014
Okey rồi. Thích thật í. Giá mà ở gần chị sẽ cảm ơn nhóc bằng món gà rán KFC ngay! Em giỏi quá. Thích lắm!!!
lúc 16:19 7 tháng 7, 2014
hi bạn, mình áp dụng thủ thuật này và thủ thuật comment song song google plus với blogger của bạn thành công trên bài viết, còn muốn áp dụng thủ thuật facebook cho 1 trang (page) thì phải làm như thế nào vậy bạn?
nếu áp dụng chung 3 cái này với nhau mà để mặc định như bạn hướng dẫn, mình thấy nó hơi rối, nếu người ta muốn comment google plus đôi khi cũng ko bik phải click vào hình chữ G+, bạn có thể giúp mình fix cho google plus để cho nó cũng nằm thành 1 tab giống như tab facebook comment ko? Như vậy nhìn nó rõ ràng hơn. Tks bạn nhiều.
Blog mình đang áp dụng 2 thủ thuật của bạn: usbtphcm.blogspot.com
lúc 19:02 7 tháng 7, 2014
Ok, nay mình hơi bận một tý, để hôm sau mình sẽ hướng dẫn bạn.
lúc 18:50 31 tháng 7, 2014
Em đã làm theo cách của Anh nhưng tự nhiên bị lỗi một chỗ đó là Em đã để form comment bằng facebook bằng "dark" nhưng sau khi comment xong thì phần comment lại bị trong suốt. Mong Anh ghé qua blog Em đang test và chỉ cho em cách khắc phục.
Blog: http://ttest02.blogspot.com/2013/11/sample-post-with-links-paragraphs-and.html
lúc 20:27 31 tháng 7, 2014
Ok mình có xem qua blog bạn rồi, đẹp đấy :D.
Bạn chèn đoạn css sao lên trên thẻ ]]></b:skin> nhé
.fb-comments span {
background-color: #141823;
}
theo mình như thế là hợp.
lúc 20:59 31 tháng 7, 2014
Cám ơn Anh đã ghé qua blog Em.
Nhưng Em đã thêm code trên rồi mà vẫn không được.
lúc 21:05 31 tháng 7, 2014
Hình như đoạn css đó nó không nhận thì phải, bạn thử tìm một thẻ </style> bất kì rồi bỏ nó vào lại xem sao nhé.
lúc 21:16 31 tháng 7, 2014
Cám ơn Anh.
Em làm được rồi, phải tạo thẻ "style" và cho đoạn code vào đó và đặt trước thẻ "/body" mới được.
Tiện đây cho Em hỏi cách làm comments như của Anh, tên "người nhận xét" thì màu đỏ, còn "ngày giờ comment" thì màu trắng nên màu xanh đó Anh
lúc 11:02 5 tháng 9, 2014
Làm sao để Comment của Facebook hiện ra luôn bạn nhỉ?
lúc 11:08 5 tháng 9, 2014
Bạn bỏ qua bước chèn đoạn dài nhất, và cái tùy chọn thêm đi.
1 cái nữa là thay vì chèn
<div id="fb_comments" style="height:0;visibility: hidden;">
<div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div>
</div>
thì bạn hãy chèn
<div class="fb-comments" expr:data-href='data:post.url' data-width="100%" data-numposts="5" data-colorscheme="light"></div>
lúc 11:42 5 tháng 10, 2014
Bạn giúp mình cái này được không? Mình dùng template linezap có sẵn comment facebook song song blogger rồi nhưng khi tạo một trang thì nó không hiển thị như bình thường. Bạn xem giúp với www.dakhoaquangnam.com/p/lien-he.html
thanks bạn nhiều
lúc 12:08 5 tháng 10, 2014
Template đó, bạn tìm đến thẻ đầu tiên
<b:if cond='data:blog.pageType == "item"'>
ở dưới thẻ </b:skin> xóa nó đi và cũng nhớ xóa luôn thẻ </b:if> của nó nhé.
lúc 19:23 6 tháng 10, 2014
Hay quá! Thanks bạn nhé. Cho mình hỏi thêm một tý nữa, mình tạo trang như trên nhưng phần post-info lại không hiển thị mà chỉ có cái khung thôi, hix mò mãi chẳng ra? Lại làm phiền bạn thêm lần nữa :P
lúc 19:33 6 tháng 10, 2014
Mặc định trang của Blogger không có thông tin trên đó ở trang nha, biện pháp bây giờ là ẩn cái khung đó đi, bạn chèn đoạn mã này lên trên thẻ </head> nhé
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
.post-info { display: none; }
</style>
</b:if>
lúc 21:45 20 tháng 10, 2014
Bạn để lại địa chỉ blog của bạn cho mình nhé, chứ bạn nói thế mình thua rồi :(
lúc 19:27 23 tháng 10, 2014
Gía có thêm phần thống kê lượng comments ở từng tab thì ngon!
lúc 20:04 24 tháng 10, 2014
Ghi nhận ý kiến của bác và rất có thể sẽ có trong thời gian sắp tới ^^!
lúc 11:46 13 tháng 11, 2014
Bài viết rất OK !
bạn cho mình hỏi thêm 1 vấn đề là :
- Khi Comment thì Blogpot ko đếm số Coment của FACEBOOK, chỉ đếm của Google !
Bạn có cách giải quyết ko ?
lúc 11:47 13 tháng 11, 2014
Bạn xem qua bài viết này của mình nhé
http://www.kslzone.net/2014/10/tong-nhan-xet-cua-tung-tab-facebook-va-blogger.html
nếu không hiểu thì mình có thể sẽ hỗ trợ sau nha.
lúc 14:01 13 tháng 11, 2014
Bạn xem hình này nha !
https://drive.google.com/file/d/0B8EJv6TOb3Z3cTZRMldnTko2NmM/view?usp=sharing
lúc 14:09 13 tháng 11, 2014
Ok bài viết tới mình sẽ viết hướng dẫn nhé.
lúc 17:07 7 tháng 12, 2014
Lâm có thể chia sẻ thêm một chút với mình,
Mình đã làm và có kết quả tốt,
Mình muốn thêm 1 khung nhận xét nữa là Google+ vào nằm song song với 2 khung ở trên, cảm ơn Lâm!
lúc 18:01 7 tháng 12, 2014
http://www.kslzone.net/2014/07/nhat-xet-blogger-facebook-google-plus.html Bạn xem bài này của anh Lâm này hi.
lúc 18:42 7 tháng 12, 2014
Đúng rồi thank Việt :D
lúc 19:39 7 tháng 12, 2014
Thanks anh đã viết bài bài này :D
lúc 17:18 5 tháng 4, 2015
Lâm cho mình hỏi, mình dùng theme Your Mag đã có sẵn 2 mục bình luận này rồi, nhưng giờ mình muốn chỉnh sửa 2 thứ:
1. Muốn cài đặt quản trị được comment facebook, biết được ai cmt, và có thể xóa được luôn
2. Hiện bình luận facebook trước bình luận của Blogger
Mong Lâm giải đáp. Cảm ơn :D
lúc 21:51 6 tháng 4, 2015
Cái này thì chắc phải teamview làm cho bạn thì dễ hơn :D
1. Mình xem sơ qua thấy bạn có tạo facebook apps rồi thì phải, mình có kiểm tra qua template mặc định, có đoạn appId : 'YOUR_APPLICATION_ID' ở ngay dưới thẻ body mà hình như bạn mang xuống trên thẻ /body thì phải. Bạn có thể lôi lên để kiếm tra lại.
2. Sorry để sửa thì phải giải mã ra chứ mình xem qua thử mấy đoạn script không mã hóa thì không có :D Mà cái vụ giải mã thì mình vẫn còn ngu ngơ lắm.
thử rồi báo mình biết nhé. Còn không được nữa có thể teamview mình xem cho dễ.
lúc 21:09 7 tháng 4, 2015
Cái chỗ AppID mình cũng đã thay app id vào rồi :D Nó có 2 chỗ appid, 1 ở thẻ meta trên <head và một ở fbapp trong thẻ <body Mình đã thay cả rồi :)
Vì là temp free nên họ mã hóa các script, vụ này mình cũng đành chịu :P
Mình mail cho Lâm qua phần liên hệ nhé :) Bạn onl tầm nào để mình biết liên hệ :D
Cảm ơn bạn nhiều :D
lúc 20:09 16 tháng 5, 2015
Ad cho mình hỏi là mình dùng temp free nên nó cũng có sẵn commemt fb và comment blog nhưng có một vấn đề là khi dùng trên điện thoại thì mình không thể chọn được phần comment facebook được, còn trên máy tính thì bình thường.
Và còn một vấn đề nữa giống bạn Khiem Vu hỏi ở trên là có để mặc định hiện comment facebook, không biết ad đã giải quyết được chưa?
Cảm ơn ad nhiều!
lúc 20:12 16 tháng 5, 2015
Trang web của mình: http://www.camnangnhatban.com
mà tiện hỏi ad luôn là mình mua domain của godaddy nhưng mình thiết lập thế nào của không thể bỏ phần www của web được nếu không có www thì nó lại về trang của Godaddy. hichic..
lúc 09:37 17 tháng 5, 2015
Bạn tham khảo bài này
http://www.kslzone.net/2013/12/huong-dan-su-dung-ten-mien-tuy-chon-cho.html
từ mục thứ 5 bạn làm theo là ok nhé.
lúc 09:18 18 tháng 5, 2015
Cảm ơn ad nhé! Còn vấn đề của comment facebook không chọn được trên điện thoại ở trên ad giúp mình được không?
Cảm ơn ad nhiều!
lúc 08:57 27 tháng 7, 2015
cho em hỏi em đã cài và nó cũng hiện song son 2 comment r mà sao e kích vào comment facebook thì nó không hiện ra ,,,dù e đã cài đặt comment facebook cho blog r ạ a có thể giúp em
lúc 14:26 27 tháng 7, 2015
thay đổi chiều rộng tiêu đề blogger và face vậy bạn, của mình nó rộng quá nên bị lệch, bạn giúp mình sửa với,
xem link hình bên dưới nhé
http://i.minus.com/jbhVhMY2ckGVhn.jpg
lúc 14:27 2 tháng 8, 2015
Xem hình thì bó tay mình không thể nào check mà sửa được.
lúc 21:24 2 tháng 8, 2015
bạn tạo thanh trượt cho comment cho khỏi dài ra được không bạn,
mình không biết chèn thêm chữ trả lời và xóa comment blogger, nhờ bạn hướng dẫn luôn, được cái nào hay cái đó
lúc 21:32 23 tháng 8, 2015
Bạn ơi xem blog mình với. làm sao xóa được khoảng tráng ở zua thanh bình luận tới song song 3 kiểu bl với ạ. tiện thể bạn chỉ cách xóa chử nhận xét bị trùng ở phần google comments. thân kuxubunu.blogspot.com
lúc 18:46 28 tháng 8, 2015
Sorry nhiều nhé, bận quá giờ mới trả lời được, bạn tìm
<div style='width:100%;height:auto;postion:relative;margin:70px 0 30px;padding:0'>
thay bằng
<div style='width:100%;height:auto;postion:relative;margin:70px 0 30px;padding:0;overflow:hidden;'>
lúc 21:27 6 tháng 4, 2016
Cảm ơn tác giả bài viết. Nhưng có 1 vấn đề mình muốn nhờ tác giả được không ạ. Vì code tác giả viết dành cho máy tính. Nhưng phần lớn bây giờ mọi người dùng di động. Mình thử truy cập trên di động thì chỉ hiển thị đc bình luận bằng blog. Tác giả có thể viết bài hướng dẫn hiển thị cả 3 chức năng cmt trên cả di động không ạ. Tks nhiều
lúc 16:10 17 tháng 4, 2016
Mình bấm vào Facebook Comments nhưng k có gì hiện ra là sao nhỉ
lúc 16:46 25 tháng 5, 2016
Làm sao để em xóa được comment G+ vậy AD :( !
Mà có vẻ như giờ làm theo cách của AD nó không được nữa rồi ạ :(
lúc 08:08 26 tháng 5, 2016
mình thấy dạo này nhiều mẫu có sẵn rất có khung comment kết hợp rất đẹp bạn, kiếm cái khác dùng thử đi
lúc 18:39 26 tháng 6, 2016
Ơ ! Bị gì vậy :( ! E comment không được nữa :((
lúc 18:51 26 tháng 6, 2016
AD ơi ! Làm sao để em có thể kích hoạt ID APP COMMENT FB vào code của AD ạ :(