Tùy biến livechat facebook

Thảo luận trong 'Hỗ trợ về mã nguồn, code' bắt đầu bởi dinhdung91, 29/10/15.

  1. dinhdung91

    dinhdung91 Active Member

    Bài viết:
    42
    Đã thích:
    7
    Cách cài đặt livechat facebook đã được mod hướng dẫn. Nhưng nhiều người không biết tùy biến.
    Mình sẽ hướng dẫn mọi người tùy biến để giống live chat bình thường.
    1. Kích thước livechat


    Đây là đoạn mã gốc mà mod cấp. Những thứ bạn có thể tùy biến: kích thước rộng, kích thước cao, ẩn hiện ảnh cover page,...
    Để dễ dàng thì các bạn vào luôn trang: https://developers.facebook.com/docs/plugins/page-plugin để chỉnh sửa.
    Sau đó lấy mã code mà facebook cung cấp, chỉ cần thêm đoạn: data-tabs="messages" như code trên là được.

    2. Ẩn livechat khi vào điện thoại - Dùng responsive

    Các bác dùng CSS cho nhẹ nhàng.
    Bước 1: Cho đoạn code live chat vào 1 div mẹ
    code:
    Mã:
    <div id="
    	
    chatbox">
    ..Đoạn code livechat
    </div>
    Bước 2: CSS - web bạn phải hỗ trợ sẵn Responsive (giờ nhiều trang làm rồi)
    Mã:
    <style>
    @media screen and (max-width: 700px){
    #chatbox{ display:none}
    
    }
    Hiểu là:
    max kích thước màn hình là 700px thì sẽ cài thuộc tính display: none cho #chatbox
    Bạn có thể tùy chỉnh 700 thành 400 hoặc kích thước nào tùy bạn chọn.
    Bác nào mà web chưa có responsive thì lại lên mạng search. Hoặc yêu cầu, mình sẽ bổ sung vào bài viết này.
    demo của mình sử dụng css responsive:
    Mã:
    http://hongiayviet.com
    3. Có dòng click to chat giống các ứng dụng web chat bình thường
    Nợ, sẽ bổ sung sau ạ. Đang nghiên cứu. :D

    4. Chèn lỗi ở blogspot:
    Thay

    Mã:
    js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.5";
    bằng dòng:
    Mã:
    js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.5";
    code chat của bạn sẽ như sau:
    Mã:
    <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&amp;version=v2.5";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div style="position:fixed; z-index:9999999; right:10px; bottom:10px;" class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/hongiayviet" data-width="250" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div>
     
    Đang tải...
    Chỉnh sửa cuối: 29/10/15
    thanhnn and banga like this.
  2. Thức Nguyễn

    Thức Nguyễn Member

    Bài viết:
    14
    Đã thích:
    1
    Dễ hiểu hơn này
    Đối với wordpress các bạn thêm đoạn này vào file style.css (Trong phần sửa giao diện)
    Mã:
    @media all and (max-width: 768px) {
    .livechatfb {display: none}
    }
    Rồi lồng 1 thẻ div vào đoạn code livechat nữa là được.
    Mã:
    <div class="livechatfb">
    ..Đoạn code livechat
    </div>
     
    Chỉnh sửa cuối: 29/10/15
  3. lysons

    lysons Well-Known Member

    Bài viết:
    89
    Đã thích:
    6
    Bạn nào chèn Web joomla rồi hướng dẫn mình với, mình mới làm quen với joomla nên chưa rành lắm
     
  4. GolfTourism

    GolfTourism Well-Known Member

    Bài viết:
    152
    Đã thích:
    17
    cần lắm mục số 3 thớt ơi, hi, nếu có cái đó nữa là tuyệt vời cho mọi website rồi
     
  5. ichiase24h

    ichiase24h Well-Known Member

    Bài viết:
    318
    Đã thích:
    26
    mình có làm theo hướng dẫn mà vẫn ko được web của em bằng blogspot bác nào chỉ em sửa code sao cho nó hiển thị với
     
  6. phambaohp

    phambaohp Active Member

    Bài viết:
    37
    Đã thích:
    1
    Đã test thử thành công với blogspot thanks pro <3
     
  7. dinhdung91

    dinhdung91 Active Member

    Bài viết:
    42
    Đã thích:
    7
    bạn xem lại phần 4 nhé.
     
  8. Thức Nguyễn

    Thức Nguyễn Member

    Bài viết:
    14
    Đã thích:
    1
  9. thanhnn

    thanhnn Member

    Bài viết:
    17
    Đã thích:
    0
    M vẫn k add được cho blogspot là sao nhỉ, code k báo lỗi mà k hiểu sao n k hiện :(
     
  10. gamehayst

    gamehayst Well-Known Member

    Bài viết:
    812
    Đã thích:
    62
    Thật sự thì tool này nếu áp dụng vào Blogspot thì cũng hơi chậm. Như mọi ng đã biết là dạo này bị chặn hay sao ấy. Vào fb load mãi, bây giờ Blogspot đã chậm, thêm cả fb chậm thành ra ng dùng k thoải mái. Chịu khó cài cái subbiz chat hoặc cái gì đó tương tự là Ok hơn
     
Đang tải...
Đang tải...