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.

Sử dụng song song nhận xét Blogger và Facebook

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 == &quot;item&quot;'>
<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ời kết

Những đoãn mã mà mình đã hướng dẫn bạn ở trên thì hoàn toàn sử dụng Javascript chứ không đụng chạm gì đến jQuery nên bạn có thể yên tâm về tốc độ hoạt động trên blog của bạn vì tốc độ xử lý của Javascript nhanh hơn jQuery khá nhiều. Mong rằng sau khi sử dụng song song hai hệ thống bình luận này thì blog của bạn sẽ nhận được nhiều nhận xét hơn.

51 bình luận

  1. avatar says

    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.

  2. avatar says

    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

  3. avatar says

    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?

  4. avatar says

    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.

  5. avatar says

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

  6. avatar says

    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?

  7. avatar says

    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 == &quot;item&quot;'>
    <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é ^^

  8. avatar says

    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!!!

  9. avatar says

    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

  10. avatar says

    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.

  11. avatar says

    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

  12. avatar says

    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.

  13. avatar says

    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.

  14. avatar says

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

  15. avatar says

    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

  16. avatar says

    lúc 11:02 5 tháng 9, 2014

    Làm sao để Comment của Facebook hiện ra luôn bạn nhỉ?

  17. avatar says

    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>

  18. avatar says

    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

  19. avatar says

    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 == &quot;item&quot;'>
    ở dưới thẻ </b:skin> xóa nó đi và cũng nhớ xóa luôn thẻ </b:if> của nó nhé.

  20. avatar says

    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

  21. avatar says

    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 == &quot;item&quot;'>
    <style type="text/css">
    .post-info { display: none; }
    </style>
    </b:if>

  22. avatar says

    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 :(

  23. avatar says

    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!

  24. avatar says

    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 ^^!

  25. avatar says

    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 ?

  26. avatar says

    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.

  27. avatar says

    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

  28. avatar says

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

  29. avatar says

    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!

  30. avatar Nặc danh says

    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.

  31. avatar says

    lúc 18:42 7 tháng 12, 2014

    Đúng rồi thank Việt :D

  32. avatar Nặc danh says

    lúc 19:39 7 tháng 12, 2014

    Thanks anh đã viết bài bài này :D

  33. avatar says

    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

  34. avatar says

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

  35. avatar says

    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

  36. avatar says

    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!

  37. avatar says

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

  38. avatar says

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

  39. avatar says

    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!

  40. avatar says

    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

  41. avatar says

    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

  42. avatar says

    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.

  43. avatar says

    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 đó

  44. avatar says

    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

  45. avatar says

    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;'>

  46. avatar says

    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

  47. avatar says

    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ỉ

  48. avatar says

    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 ạ :(

  49. avatar says

    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

  50. avatar says

    lúc 18:39 26 tháng 6, 2016

    Ơ ! Bị gì vậy :( ! E comment không được nữa :((

  51. avatar says

    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 ạ :(

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.