Tạo live chat Facebook mới nhất 2018 cho Blogspot

 live chat Facebook mới nhất 2018 cho Blogspot

Đây là chat Facebook mới nhất 2018 được Facebook hỗ trợ với ưu điểm chat trực tiếp và nhận trả lời trực tiếp trong hộp thoại chat.
Khi người dùng rời khỏi website vẫn có thể trò chuyện tiếp tục trên facebook với tư cách Fanpage.

Ưu điểm: Vì không phải lúc nào mình cũng trực hộp chat trên fanpage hoặc online nên Live chat Fanpage là phù hợp với mục đích sử dụng của mình!
Hướng dẫn cài đặt live chat Fanpage 2018 này dành riêng cho nền tảng Blogspot.


CÁCH 1: CHAT FACEBOOK CHÍNH HÃNG TỪ FACEBOOK (HƠI PHỨT TẠP)

Bước 1: Tạo App id Facebook

Code chèn BÊN DƯỚI thẻ </head>
<!-- Load Facebook SDK for JavaScript -->
<div id='fb-root'/>
<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 = &#39;https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js#xfbml=1&amp;version=v2.12&amp;autoLogAppEvents=1&#39;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
Bạn chỉ thay dãy appId của bạn hoặc xóa bỏ appid như mình nếu không muốn quản lí thống kê...

Bước 2: Kích hoạt các Website được phép sử dụng Live chat Facebook

  1. Truy cập vào Cài đặt fanpage → Nền tảng Messenger
  2. Nhập các tên miền website mà bạn muốn áp dụng. Ví dụ: https://www.toilaquantri.com/
Tạo live chat Facebook mới nhất 2018 cho Blogspot
Thực hiện thao các bước hướng dẫn của ảnh

Tiếp theo cuộn xuống cuối trang và →thiết lập

Cuộn xuống dưới bạn sẽ thấy phần thiết lập cho plugin chat
Bạn cứ thiết lập như bình thường cho đến bước cuối cùng


  • Code này nếu copy và dán blogger sẽ bị lỗi nhé nên ta sẽ thực tiếp bước 3
  • Nguyên nhân là trong blogger không dùng được kí tự & mà phải mã hóa &&amp;

Bước 3: Chèn code Live chat Fanpage vào blogger


Chèn code chát Fanpage trên </body>

<div class='fb-customerchat' page_id='655736357895973'/>

  • Thay lại page_id của bạn là được rồi. ID page sẽ xem trong phần giới thiệu của Fanpage
  • Chỉ có 1 dòng code duy nhất

CÁCH 2: CODE LIVECHAT FACEBOOK (ĐƠN GIẢN HƠN)

Chèn trên </body> hoặc dưới </head>
Copy tất cả code bên dưới và thay vào là được

<style>.fb-livechat,.fb-widget{display:none}.ctrlq.fb-button,.ctrlq.fb-close{position:fixed;right:24px;cursor:pointer}.ctrlq.fb-button{z-index:1;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;width:60px;height:60px;text-align:center;bottom:24px;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:2;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:8px;border-radius:3px}.ctrlq.fb-close::after{content:&#39;x&#39;;font-family:sans-serif}
    .bubble-msg {animation: hottoilaquantri .4s infinite;
        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><!-- Your customer chat code -->
<div class='fb-livechat'>
    <div class='ctrlq fb-overlay'/>
    <div class='fb-widget'>
        <div class='ctrlq fb-close'/>
<div class='fb-header'>Hỗ trợ: 0932.913.631</div>
        <div class='fb-page' data-height='400' data-hide-cover='true' data-href='https://www.facebook.com/huynhphungblogger' data-show-facepile='false' data-small-header='true' data-tabs='messages' data-width='360'> </div>
        <div class='fb-credit'>Livechat Facebook Version 2.5</div>
        <div id='fb-root'/>
    </div>
<a class='ctrlq fb-button' rel="nofflow" target="_black" href='https://m.me/huynhphungblogger' 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>$(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>
Sửa lại tất cả các link mặc định thành fanpage của bạn
Các link cần thay lại

  1. https://www.facebook.com/huynhphungblogger
  2. https://m.me/huynhphungblogger

Chúc bạn thành công!

    Hãy cùng tham gia bình luận về bài viết này nhé!

    1. Em cũng làm như hướng dẫn ok nhưng. Khi khách chát qua web thì ở fanpage nhận được và nhắn lại cho khách nhưng khi ở trên web thì khách ko nhìn thấy tin nhắn đó

      Trả lờiXóa
    2. Sau khi làm theo như bạn thì trong bảng edit html hiện lên dòng

      div should not appear inside of head

      vào không thấy hiện lên biểu tượng live chat của facebook. Không biết có lỗi gì không nhỉ @@

      Trả lờiXóa
    3. Em dùng cả 2 cách nhưng không hiện biểu tượng chat lên luôn. Không biết bị cái gì

      Trả lờiXóa
    4. Làm hết các cách đều không hiển thị lên được bạn Huỳnh Phụng ơi

      Trả lờiXóa
      Trả lời
      1. Thế bó tay, liên hệ để mình teamview hỗ trợ nhé

        Xóa