Tích hợp Chat Live Facebook vào website Blogger/Blogspot

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.

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

Nguồn tham khảo : http://www.kenit.net/tich-hop-chat-live-facebook-vao-website.html