Cách chèn Chat Facebook vào trong web Wordpress

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 vào file footer.php  trên hàm <?php wp_footer(); ?>

<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/kenit.net"
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>

Lưu ý: thay link màu đỏ, thành link page của các bạn!
Các bạn cũng nên kiểm tra bạn đã có mã code này chưa nếu chưa thì hãy thêm vào thì mới hoạt động được nhé
<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.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.5";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

Tiếp theo bạn chèn đoạn js xử lý ẩn hiện khung chat, nếu bạn đang dùng theme do www.kenit.net phát triển thì bạn add đoạn trên vào file custom.js trong thư mục js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
 $(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>

Còn nếu bạn đang sử dụng theme khác, các bạn có thể chèn đoạn trên trong cặp thẻ  <script></script> sau đó chèn vào cuối file footer.php

Và cuối cùng trang trí khung cho nó đẹp xíu, các bạn chèn đoạn sau vào file style.css

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