Chia sẻ Tích Hợp Chat Live Facebook Vào Website

Thảo luận trong 'Lập Trình PHP' bắt đầu bởi phamgiamedia, 30/10/15.

  1. 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 mã nguồn wordpress!

    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(); ?>
    Mã:
    <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="[COLOR=#ff0000]https://www.facebook.com/diendanseovip[/COLOR]"
    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!

    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 phamgiamedia. com phát triển thì bạn add đoạn trên vào file custom.js trong thư mục js
    Mã:
    $(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();
      });
    });
    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
    Mã:
    .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;
    }
    Đây là hình ảnh sau khi các bạn đã add xong! Chúc các bạn thành công, và tương tác với khách hàng tốt!

    [​IMG]

    Nguồn: fxuanloc. com
    Last edited by a moderator: 26/2/16
    trangsuc and admin like this.
     
  2. duanuuviet

    duanuuviet

    Bài viết:
    2
    Đã được thích:
    0
    Còn nếu không dung theme phamgia thì sao bạn. Có thể chỉ rõ cho minh hơn không

Chia sẻ trang này