Hướng dẫn chèn plugin chat Facebook Messenger vào Blogger mới nhất

Cách chèn plugin chat Facebook vào Blogger theo phương pháp đơn giản, dễ hiễu không cần biết nhiều về code cũng có thể làm được.


Bạn đang tìm kiếm cách chèn plugin chat Facebook Messenger vào trang web cụ thể là trang Blogger mà chưa làm được vì làm theo cách cũ trên mạng có thể không còn tác dụng nữa vì chính sách hiện nay của Facebook đang rất khắt khe với những trang có tên miền mới.

Hướng dẫn chèn plugin chat Facebook Messenger vào Blogger mới nhất
Plugin Messenger giúp tăng tương tác giữa khách hàng và trang web

Đề xuất cho bạn: Tạo các hàm function để load tệp css và js từ nguồn bên ngoài

Nếu bạn áp dụng theo phương pháp của mình dưới đây mà không hiện thì chắc chắn trang web Blogger của bạn đã bị Facebook chặn rồi. Cách làm như sau

Những yêu cầu bắt buộc

Thứ nhất, bạn đã có sẵn fanpage, nếu chưa có thì tạo mới hoặc không nữa bạn cũng phải có bạn bè của bạn có fanpage chứ không có fanpage thì không làm gì được.

Thứ hai, khi đã có fanpage rồi bạn hay bạn của bạn cụ thể là admin của page phải cài đặt bật tính năng nhắn tin thì mới có tùy chọn Thêm Messenger vào trang web.

Thứ ba, trong cài đặt Nhắn tin nâng cao bạn cần thêm tên miền vào mục Miền được đưa vào danh sách hợp lệ, bạn có thể thêm nhiều tên miền bao gồm sub domain, miễn sao miền đó chưa bị Facebook chặn là được.

Thứ tư, bạn cài đặt tùy chọn cho đoạn mã HTML dưới đây:

<div attribution='setup_tool' class='fb-customerchat' logged_in_greeting='Xin chào! Tuấn có thể giúp gì được cho bạn?' logged_out_greeting='Xin chào! Tuấn có thể giúp gì được cho bạn?' page_id='175961486580201' theme_color='#0084ff'></div>

Bạn sửa lại các dòng in đậm theo ý thích của bạn nhé nhớ thay page id nhé còn mã màu để mặc định cũng được.

Đề xuất cho bạn: Hiển thị view Blog khi tắt hoặc chặn js mặc định

Cách chèn plugin chat Facebook Messenger vào Blogger

Code chat Facebook Messenger

<div id='fb-root'></div>
<div attribution='setup_tool' class='fb-customerchat' logged_in_greeting='Xin chào! Tuấn có thể giúp gì được cho bạn?' logged_out_greeting='Xin chào! Tuấn có thể giúp gì được cho bạn?' page_id='175961486580201' theme_color='#0084ff'></div>
<script>//<![CDATA[
  function appendChildBody(name,type){
    if(type=='js')var src=document.createElement('script');src.setAttribute('async','');src.setAttribute('src',name)
    if(typeof src!='undefined')document.getElementsByTagName('body')[0].appendChild(src)
  }
  window.addEventListener('load',function(){
    var load_sdk=0
    function sdk(){
      if(load_sdk==0){
        load_sdk=1
        window.fbAsyncInit=function(){FB.init({xfbml:true,version:'v7.0'})}
        appendChildBody('https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js','js')
      }
    }
    window.addEventListener('scroll',function(){sdk()})
    window.addEventListener('mousemove',function(){sdk()})
    if(document.documentElement.scrollTop>0)sdk()
    setTimeout(function(){sdk()},3000)
  })
//]]></script>

Cách 1: Đơn giản nhất không cần chèn code vào theme mà chỉ cần chèn code trong tiện ích HTML/JavaScript trong bố cục tiện ích là xong. Trong phần Bố cục tiện ích chọn thêm mới tiện ích HTML/JavaScript xong chèn code vào.

Cách 2: Cầu kỳ hơn chèn code trong theme. Trong chỉnh sửa HTML của theme các bạn chèn code bên trên trước thẻ đóng </body> của theme.

Cách 3: Cầu kỳ hơn nữa chèn code trong theme nhưng thêm thẻ đóng b:includable và b:include, các bạn chèn theo mẫu sau:

<head>
<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
<b:includable id='facebook'>
  // Chèn code chat Facebook Messenger
</b:includable>
  </b:defaultmarkup>
</b:defaultmarkups>
</head>
<body>
<b:include name='facebook'/>
</body>

Tham khảo thêm: Cách sử dụng thẻ b:includable và b:include trong blogspot