Chào các bạn, hôm nay mình hướng dẫn các bạn một đoạn code ngắn tích hợp Chat Live Facebook vào Website!
Giúp website của các bạn tương tác với khách hàng chuyên nghiệp, hiệu quả cao
Để tích hợp khung chat facebook lên website bạn cần thêm những dòng code vào những file sau:
Chèn đoạn mã chat live vào nội dung của widget Custom HTML<div class="support-icon-right"> <h3><i class="fa fa-hand-o-right"></i> Chat Live Facebook</h3> <div class="online-support"> <div class="fb-page" data-href="https://www.facebook.com/SunShiune.Angle data-height="300" data-width="250" data-tabs="messages" data-adapt-container-width="false" data-show-facepile="false" data-hide-cover="false" data-show-posts="false"> </div> </div> </div>
Lưu ý: thay link màu đỏ, thành link page của các bạn!
Tiếp theo bạn chèn đoạn js xử lý ẩn hiện khung chat.
Tiếp theo bạn chèn đoạn js xử lý ẩn hiện khung chat.
$(document).ready(function(){ $('.online-support').hide(); $('.support-icon-right h3').click(function(e){ e.stopPropagation(); $('.online-support').slideToggle(); }); $('.online-support').click(function(e){ e.stopPropagation(); }); $(document).click(function(){ $('.online-support').slideUp(); }); });
Và cuối cùng trang trí khung cho nó đẹp xíu, các bạn chèn đoạn sau vào trong thẻ <b:skin>
.support-icon-right { background: #F0F3EF; position: fixed; right: 0; bottom: 0; z-index: 9; overflow: hidden; width: 250px; color: #fff!important; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .support-icon-right h3 { text-transform: uppercase; font-weight: bold; font-size: 13px!important; font-family: Arial; color: #fff!important; margin: 0!important; background-color: #5CB85C; cursor: pointer; } .support-icon-right i { background-color: #D9534F; padding: 15px 15px 12px 15px; } .online-support { display: none; }Các bạn có thể chèn trực tiế vào trong code Mẫu - chỉnh sửa html trước thẻ đóng </body>
<script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $('.online-support').hide(); $('.support-icon-right h3').click(function(e){ e.stopPropagation(); $('.online-support').slideToggle(); }); $('.online-support').click(function(e){ e.stopPropagation(); }); $(document).click(function(){ $('.online-support').slideUp(); }); }); //]]> </script> <div class="support-icon-right"> <h3><i class="fa fa-hand-o-right"></i> Chat Live Facebook</h3> <div class="online-support"> <div class="fb-page" data-href="https://www.facebook.com/SunShiune.Angle" data-small-header="true" data-height="300" data-width="250" data-tabs="messages" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false" data-show-posts="false"> </div> </div> </div> <style> .support-icon-right { background: #F0F3EF; position: fixed; right: 0; bottom: 0; z-index: 9; overflow: hidden; width: 250px; color: #fff!important; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .support-icon-right h3 { text-transform: uppercase; font-weight: bold; font-size: 13px!important; font-family: Arial; color: #fff!important; margin: 0!important; background-color: #5CB85C; cursor: pointer; } .support-icon-right i { background-color: #D9534F; padding: 15px 15px 12px 15px; } .online-support { display: none; } </style>
Chúc các bạn thành công xem demo kết quả ở đây : www.thucleblogs.tk
Chat live facebook cho blogger |
Comments
Post a Comment
► Comments Lịch Sự - Không Spam.
► Viết Tiếng Việt Có Dấu - Giữ lịch sự, văn hóa.
► Tích vào ô Thông báo cho tôi để nhận thông báo phản hồi.
► Bình luận của bạn sẽ được giải đáp sớm nhất bạn nhớ check mail để xem phản hồi từ mình và các bạn khác nhé