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

Thảo luận trong 'SEO Onpage - Tối Ưu Website' bắt đầu bởi caothanhtrung87, 30/10/15.

Trạng thái chủ đề:
Không mở trả lời sau này.
  1. caothanhtrung87

    caothanhtrung87 Well-Known Member

    Bài viết:
    77
    Đã thích:
    15
    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/***[/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
    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();
      });
    });
    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 : http://***/threads/tich-hop-chat-live-facebook-vao-website.2472/
     
    Đang tải...
  2. Lê Anh

    Lê Anh My girl, where are you?

    Bài viết:
    623
    Đã thích:
    318
Trạng thái chủ đề:
Không mở trả lời sau này.
Đang tải...
Đang tải...