NIỆM STYLE BLOGGER ™
  • Bảo trợ bởi
  • Home
  • About
  • Contact
  • Policy
  • Sitemap

Tạo live chat fanpage đơn giản cho blogspot hoặc website (P2)

Mình đã có một bài trước chia sẻ cách tạo live chat facebook cho blogspot đơn giản. Cập nhật xu hướng mới nên lần này mình sẽ hướng dẫn làm một cái live chat fanpage mới mẽ và chuyên nghiệp hơn, cũng với một đoạn code đơn giản thôi.
Các bạn sao chép đơn code sau và dán vào trên thẻ đóng /body hoặc trên thẻ đóng </style> tùy cấu trúc từng template hoặc website của các bạn:
<style>
    .fb-livechat,
    .fb-widget {
        display: none
    }
    .ctrlq.fb-button,
    .ctrlq.fb-close {
        position: fixed;
        right: 10px;
        cursor: pointer
    }
    .ctrlq.fb-button {
        z-index: 999;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;
        width: 60px;
        height: 60px;
        text-align: center;
        bottom: 35px;
        border: 0;
        outline: 0;
        border-radius: 60px;
        -webkit-border-radius: 60px;
        -moz-border-radius: 60px;
        -ms-border-radius: 60px;
        -o-border-radius: 60px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
        -webkit-transition: box-shadow .2s ease;
        background-size: 80%;
        transition: all .2s ease-in-out
    }
    .ctrlq.fb-button:focus,
    .ctrlq.fb-button:hover {
        transform: scale(1.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .09), 0 4px 40px rgba(0, 0, 0, .24)
    }
    .fb-widget {
        background: #fff;
        z-index: 1000;
        position: fixed;
        width: 360px;
        height: 435px;
        overflow: hidden;
        opacity: 0;
        bottom: 0;
        right: 24px;
        border-radius: 6px;
        -o-border-radius: 6px;
        -webkit-border-radius: 6px;
        box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
        -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
        -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
        -o-box-shadow: 0 5px 40px rgba(0, 0, 0, .16)
    }
    .fb-credit {
        text-align: center;
        margin-top: 8px
    }
    .fb-credit a {
        transition: none;
        color: #bec2c9;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 12px;
        text-decoration: none;
        border: 0;
        font-weight: 400
    }
    .ctrlq.fb-overlay {
        z-index: 0;
        position: fixed;
        height: 100vh;
        width: 100vw;
        -webkit-transition: opacity .4s, visibility .4s;
        transition: opacity .4s, visibility .4s;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .05);
        display: none
    }
    .ctrlq.fb-close {
        z-index: 4;
        padding: 0 6px;
        background: #365899;
        font-weight: 700;
        font-size: 11px;
        color: #fff;
        margin: 5px 20px;
        border-radius: 3px
    }
    .ctrlq.fb-close::after {
        content: &quot;
        X&quot;
        ;
        font-family: sans-serif
    }
    .bubble {
        width: 20px;
        height: 20px;
        background: #c00;
        color: #fff;
        position: absolute;
        z-index: 999999999;
        text-align: center;
        vertical-align: middle;
        top: -2px;
        left: -5px;
        border-radius: 50%;
    }
    .bubble-msg {
        width: 120px;
        left: -140px;
        top: 5px;
        position: relative;
        background: rgba(59, 89, 152, .8);
        color: #fff;
        padding: 5px 8px;
        border-radius: 8px;
        text-align: center;
        font-size: 13px;
    }
</style>
<div class='fb-livechat'>
    <div class='ctrlq fb-overlay' />
    <div class='fb-widget'>
        <div class='ctrlq fb-close' />
        <div class='fb-page' data-height='400' data-hide-cover='true' data-href='https://www.facebook.com/hoachatsapa.vn' data-show-facepile='false' data-small-header='true' data-tabs='messages' data-width='360'> </div>
        <div class='fb-credit'> <a href='https://www.niemstyle.com/' target='_blank'>Powered by Niemstyle</a> </div>
        <div id='fb-root' />
    </div><a class='ctrlq fb-button' href='https://m.me/hoachatsapa.vn' title='Gửi tin nhắn cho chúng tôi qua Facebook'>
        <div class='bubble'>1</div>
        <div class='bubble-msg'>Bạn cần hỗ trợ?</div>
    </a>
</div>
<script src='https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.9' /><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/><script>$(document).ready(function(){function detectmob(){if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ){return true;}else{return false;}}var t={delay: 125, overlay: $(&quot;.fb-overlay&quot;), widget: $(&quot;.fb-widget&quot;), button: $(&quot;.fb-button&quot;)}; setTimeout(function(){$(&quot;div.fb-livechat&quot;).fadeIn()}, 8 * t.delay); if(!detectmob()){$(&quot;.ctrlq&quot;).on(&quot;click&quot;, function(e){e.preventDefault(), t.overlay.is(&quot;:visible&quot;) ? (t.overlay.fadeOut(t.delay), t.widget.stop().animate({bottom: 0, opacity: 0}, 2 * t.delay, function(){$(this).hide(&quot;slow&quot;), t.button.show()})) : t.button.fadeOut(&quot;medium&quot;, function(){t.widget.stop().show().animate({bottom: &quot;30px&quot;, opacity: 1}, 2 * t.delay), t.overlay.fadeIn(t.delay)})})}});</script>
Thay link fanpage mà mình tô đỏ thành tên fanpage các bạn nhé! Chúc các bạn thành công.
Xem thêm: Tạo live chat facebook cho blogspot mới nhất (P1)

Đăng nhận xét

8 Nhận xét

  1. Có ảnh hưởng đến tốc độ tải trang k a

    Trả lờiXóa
    Trả lời
    1. js đương nhiên là có rồi, nó cũng như mọi live chat khác thôi mà

      Xóa
    2. Trước e cài cái plugin chat bot message kia kìa , có js mà đo google speeds lên điểm tốc độ :)) v: ko hiểu luôn

      Xóa
    3. cái test speeds đó tào lao lắm e, e f5 vài lần nó nhảy kết quả khác liền.

      Xóa
  2. Ôi mấy hôm trc thấy đoán của anh bị lỗi tưởng a chuyển sang cái khác r

    Trả lờiXóa