Việc thêm comment vào Blog sẽ giúp người dùng có thêm sự lựa chọn khi muốn tương tác. Nhưng nó lại làm rối bố cục và không được đẹp khi các khung comments cứ show hết ra như hình dưới đây.
 |
| 3 khung comments khi chưa tích hợp |
Như đã nói ở bài Thêm comment Zalo vào Blogspot, bài này mình chia sẻ với các bạn cách để tích hợp cả 3 bình luận Facebook, Blogger và Zalo lại cho gọn bố cục. Thủ thuật này sẽ chỉ hiển thị khung bình luận mà người dùng click chọn và ẩn đi 2 cái còn lại. Các bạn xem demo dưới phần bình luận nhé 👇.
Do Zalo vẫn còn khá ít người dùng đăng nhập trên trình duyệt Web. Vì vậy, nếu bạn nào chỉ muốn sử dụng 2 bình luận song song Facebook và Blogger thôi thì mình cũng chia sẻ luôn ở phần dưới 👇 nhé. Thật chất nó cũng như nhau chỉ là bỏ bớt 1 cái và điều chỉnh lại CSS thôi 😊.
I - Tích hợp comments Facebook, Blogger và Zalo vào Blogspot
Bước 1: Thêm id cho code bình luận
<b:if cond='data:blog.pageType ==
"item"'>
<script type='text/javascript'>
document.write(fbcm);
</script>
<b:if cond='data:blog.pageType ==
"item"'>
<div id='fb_comments'>
<script
type='text/javascript'>
document.write(fbcm);
</script>
</div>
<b:if cond='data:blog.pageType ==
"item"'>
<div class='zalo-comment-plugin' data-appid='975026747660842962'
data-href='' data-size='15'/>
<b:if cond='data:blog.pageType ==
"item"'>
<div id='zalo_comments'>
<div class='zalo-comment-plugin' data-appid='975026747660842962' data-href='' data-size='15'/>
</div>
Bước 2: Thêm CSS
]]></b:skin>#comments,#fb_comments{display:none}
#Facebook-Comments{text-align:center;float: left;position:
relative;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:33.33%;height:35px;line-height:35px;}
#Google-Comments{text-align:center;float: left;position:
relative;left: 0%;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:33.33%;height:35px;line-height:35px;}
#Zalo-Comments{text-align:center;float:right;position:
relative;background:#008fe5;color:#fff;font-weight:700;cursor:pointer;width:33.33%;height:35px;line-height:35px;}
#Facebook-Comments:active,#Google-Comments:active,#Zalo-Comments:active{opacity:
50%;}
.Comments-bottom {display: inline-block;position: relative;
-webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform:
translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.Comments-bottom:before {pointer-events: none;position:
absolute;z-index: -1;content: '';border-style:
solid;-webkit-transition-duration: 0.3s;transition-duration:
0.3s;-webkit-transition-property: bottom;transition-property: bottom;left:
-webkit-calc(50% - 10px);left: calc(50% - 10px);bottom: 0;border-width: 10px
10px 0 10px;}
.Comments-bottom:hover:before {bottom: -10px;}
.Facebook-Comments:before{border-color: #3E5B99 transparent
transparent transparent;}
.Google-Comments:before{border-color: #FC9543 transparent
transparent transparent;}
.Zalo-Comments:before{border-color: #008fe5 transparent transparent transparent;}
Bước 3: Thêm code tích hợp bình luận
<b:if cond='data:blog.pageType ==
"item"'>
<p style='text-align: center;'>Vui lòng
đăng nhập <i aria-hidden='true' class='fa fa-sign-in' style='margin: 0px
5px;'/> tài khoản tương ứng trên trình duyệt của bạn trước khi bình luận!</p>
<div class='Comments-bottom Facebook-Comments' id='Facebook-Comments'
onclick='document.getElementById('comments').style.display='none';fb_comments.style.display='block';zalo_comments.style.display='none';'><i
aria-hidden='true' class='fa fa-facebook-official' style='margin: 0px
5px;'/>Facebook<i aria-hidden='true' class='fa fa-commenting'
style='margin: 0px 5px;'/></div>
<div class='Comments-bottom Google-Comments' id='Google-Comments'
onclick='document.getElementById('comments').style.display='block';fb_comments.style.display='none';zalo_comments.style.display='none';'><i
aria-hidden='true' class='fa fa-google-plus-square' style='margin: 0px
5px;'/>Google<i aria-hidden='true' class='fa fa-commenting' style='margin:
0px 5px;'/></div>
<div class='Comments-bottom Zalo-Comments' id='Zalo-Comments'
onclick='document.getElementById('zalo_comments').style.display='block';comments.style.display='none';fb_comments.style.display='none';'><i
aria-hidden='true' class='fa fa-comment-o' style='margin: 0px
5px;'/>Zalo<i aria-hidden='true' class='fa fa-commenting' style='margin:
0px 5px;'/></div>
</b:if>
II - Sử dụng 2 bình luận song song Facebook và Blogger
]]></b:skin>#comments{display:none}
#Facebook-Comments{text-align:center;float:left;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px;}
#Google-Comments{text-align:center;float:right;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:50%;height:35px;line-height:35px;}
.Comments-bottom {display: inline-block;position: relative; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);}
.Comments-bottom:before {pointer-events: none;position: absolute;z-index: -1;content: '';border-style: solid;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: bottom;transition-property: bottom;left: -webkit-calc(50% - 10px);left: calc(50% - 10px);bottom: 0;border-width: 10px 10px 0 10px;}
.Comments-bottom:hover:before {bottom: -10px;}
.Facebook-Comments:before{border-color: #3E5B99 transparent transparent transparent;}
.Google-Comments:before{border-color: #FC9543 transparent transparent transparent;}
<b:if cond='data:blog.pageType ==
"item"'>
<div class='Comments-bottom Facebook-Comments' id='Facebook-Comments' onclick='document.getElementById('comments').style.display='none';fb_comments.style.display='block';'><i aria-hidden='true' class='fa fa-facebook-official' style='margin: 0px 5px;'/>Facebook<i aria-hidden='true' class='fa fa-commenting' style='margin: 0px 5px;'/></div>
<div class='Comments-bottom Google-Comments' id='Google-Comments' onclick='document.getElementById('comments').style.display='block';fb_comments.style.display='none';'><i aria-hidden='true' class='fa fa-google-plus-square' style='margin: 0px 5px;'/>Google<i aria-hidden='true' class='fa fa-commenting' style='margin: 0px 5px;'/></div>
</b:if>
Facebook