[SHARE] Cách dùng chung nhận xét Blogger, Facebook, Google+ style 1

Xin chào các bạn, hôm nay mình sẽ share lại cho ae bộ code của Kslzone, chắc hẳn ai là độc giả quen thuộc của StarThảo-IT cũng nhớ rằng mình đã share cho ae cách sử dụng song song nhận xét của Blogger và Facebook phải không nào. Còn hôm nay mình sẽ thêm vào đó bình luận của Google + đó. Mục đích là ... chẳng để làm gì cả :))

Chiến luôn cho nóng nhé :D
Bước 1: Các bạn truy cập Blogger => Chủ Đề => Chỉnh Sửa HTML
Bước 2: Các bạn tìm thẻ <body> và thêm vào sau nó đoạn code sau:

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

Lưu ý: Các bạn hãy tìm xem trong template của mình xem có đoạn code nào tương tự không, nếu có thì hãy xóa nó đi hoặc để đấy or dán đè lên nó nhé. Không thêm vào lại xảy ra xung đột thì khổ :(
Bước 3: Các bạn tìm đoạn code sau : <b:includable id='comments' var='post'> và thêm đoạn code sau vào trước thẻ đóng </b:includable> của nó:

Copy

<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ước 4: Các bạn tiếp tục tìm đến đoạn mã sau: <b:includable id='threaded_comments' var='post'> và thêm vào trước thẻ </b:includable> của nó đoạn code sau:

Copy

<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ước 5: Các bạn tìm đến đoạn mã sau : <b:includable id='post' var='post'> và chèn đoạn code sau vào trước thẻ đóng </b:includable> của nó:

<b:if cond='data:blog.pageType == "item"'>
<div style='width:100%;height:auto;postion:relative;margin:70px 0 30px;padding:0'>
<div id='Button1' onclick='document.getElementById('comments').style.display='block';g_comments.style.display='none';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button1.style.display='none';Button2.style.display='block';' style='margin-bottom:30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px;display:block'>Blogger Comments</div>

<div id='Button2' onclick='document.getElementById('comments').style.display='block';g_comments.style.display='none';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button1.style.display='block';Button2.style.display='none';' style='display:none;margin-bottom:30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px'>Blogger Comments</div>

<div id='Button3' onclick='document.getElementById('comments').style.display='none';g_comments.style.display='none';fb_comments.style.height='100%';fb_comments.style.visibility='visible';Button3.style.display='none';Button4.style.display='block';' style='margin-bottom:30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px'>Facebook Comments</div>

<div id='Button4' onclick='document.getElementById('comments').style.display='none';g_comments.style.display='none';fb_comments.style.height='100%';fb_comments.style.visibility='visible';Button3.style.display='block';Button4.style.display='none';' style='display:none;margin-bottom:30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px'>Facebook Comments</div>

<div id='Button5' onclick='document.getElementById('comments').style.display='none';g_comments.style.display='block';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button5.style.display='none';Button6.style.display='block';' style='float:right;margin-bottom:30px;margin-right:33.3%;margin-top:-65px;padding:0;text-align:center;background:#CB4437;color:#fff;font-weight:700;cursor:pointer;width:33.5%;height:35px;line-height:35px'>Google Comments</div>

<div id='Button6' onclick='document.getElementById('comments').style.display='none';g_comments.style.display='block';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button5.style.display='block';Button6.style.display='none';' style='display:none;float:right;margin-bottom:30px;margin-right:33.3%;margin-top:-65px;padding:0;text-align:center;background:#CB4437;color:#fff;font-weight:700;cursor:pointer;width:33.5%;height:35px;line-height:35px'>Google Comments</div>
</div>

<div id='g_comments' style='display:none;text-align:center'>
<script src="https://apis.google.com/js/plusone.js"></script>
<div id='gcontainer' style="max-width:100%"><div class="g-comments" expr:data-href='data:post.canonicalUrl' data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD" data-width="642"/></div>

Ở đoạn mã này thì các bạn thay data-width="642" bằng kích thước khung Google+ Comment cho phù hợp với blog của bạn. Bác Google không hỗ trợ data-witdh="100%" như bác Facebook đâu nên các bạn phải đặt kích thước một cách thủ công nhé.
Bước 6: Lưu mẫu và xem kết quả.
Code: Kslzone
Cảm ơn bác đã viết lên bộ code tuyệt vời này.
Chúc các bạn thành công.

HIỆN ĐANG CÓ 4 bình luận
BÌNH LUẬN NGAY

Admin MEMBER

December 18, 2017 at 7:45 PM

Còn demo cho cái này không bác ?

TRẢ LỜI

StarThảo-IT MEMBER

December 19, 2017 at 5:41 AM

để tôi tìm lại nha

December 19, 2017 at 6:32 PM

Oke bác :V

December 19, 2017 at 6:45 PM

đây bác: http://ksltest92.blogspot.com/2014/09/kieu-thanh-thuys-blog-ornare-fusce.html

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Hãy xem hướng dẫn để bình luận theo đúng ý nhé.

Hướng dẫn bình luận

Tiện ích

Dùng những công cụ ở dưới để viết chữ theo ý muốn, chèn link

Chèn hình ảnh

Nếu muốn chèn hình ảnh, video từ Youtube vào khung bình luận, bạn chỉ việc paste trực tiếp link hình ảnh, link video youtube vào đó

Upload ảnh

Sử dụng công cụ này để upload ảnh nếu bạn chưa upload

Chèn một đoạn Code

Đầu tiên sử dụng công cụ mã hóa code phía dưới để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code] hoặc [pre] CODE_ĐÃ_MÃ_HÓA [/pre] rồi paste vào khung bình luận

Hiện EmoticonsẨn Emoticons Hiện Upload ảnhẨn Upload ảnh

Click vào icon để bôi đen mã, sau đó copy mã
Ctrl + V hoặc Right click chọn Paste vào ô nhận xét để chèn Emoticon
Nếu dùng nhiều Emoticon giữa chúng ngăn cách bằng 1 dấu cách

Mã Hóa Code