Trước đây mình có bài viết hướng dẫn các bạn sử dụng song song
nhận xét Blogger và Facebook, và sau một thời gian thì có một bạn phản hồi muốn mình hướng dẫn "áp dụng dụng chung" 3 hệ thống nhận xét Blogger, Facebook và Google+ luôn. Nếu suy nghĩ ra thì cũng khá hợp lý và mình lập ra bài viết này hướng dẫn cho bạn đó cũng như những bạn có chung như cầu như vậy sử dụng chung luôn cả 3 hệ thống này.
Demo cho các bạn đây:
http://ksltest92.blogspot.com/2014/06/test3.html
Dùng chung nhận xét Blogger, Facebook, Google+
Do công đoạn thực hiện bài viết này khá tương tự với bài viết trước, nên mình sẽ không hướng dẫn từ đầu nữa. Các bạn hay tìm đến bài viết hướng dẫn sử dụng
nhận xét Blogger và Facebook, làm từ đầu tới cái đoạn mã dài nhất thì dừng lại.
Thay vì sử dụng đoạn mã đó để chèn vào trước thẻ đóng </b:includable> của
<b:includable id='post' var='post'>
thì bạn hãy sử dụng đoạn mã này
<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>
</div>
</b:if>
Ở đ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é.
Sau khi hoàn thành thì lưu lại là bạn đã có ngay bộ ba sát thủ nhận xét ngay trên blog của mình. Lưu ý nhỏ là cũng như bài viết trước của mình thì nếu bạn nào muốn ẩn nhận xét cho tới khi khách chọn vào hệ thống bình luận thì thêm đoạn mã nhỏ này lên trên thẻ ]]></b:skin>
#comments { display :none }
như vậy là xong.
Lời kết
Lý do trước đây mình không hướng dẫn các bạn sử dụng chung luôn 3 thằng này chung với nhau là vì Blogger với Google+ thì cũng sử dụng chung Google do vậy thì người dùng thấy 1 trong 2 cái này trước thì thường nhận xét trên đó, ngoài ra thì Google+ lại bắt buộc điền tay chiều rộng (quá chi là chán). Nhưng bữa nay có bạn thắc mắc thì mình cũng xin có bài viết hướng dẫn để giải đáp bạn ấy cũng như những bạn có thắc mắc tương tự.
Belum ada tanggapan untuk "Dùng chung nhận xét Blogger, Facebook, Google+"
Post a Comment