logo logo

The next-generation blog, news, and magazine theme for you to start sharing your stories today!

The Blogzine

Save on Premium Membership

Get the insights report trusted by experts around the globe. Become a Member Today!

View pricing plans

New York, USA (HQ)

750 Sing Sing Rd, Horseheads, NY, 14845

Call: 469-537-2410 (Toll-free)

hello@blogzine.com
Chat

Tạo form Hỗ trợ trực tuyến bằng Facebook cho website

Chào các bạn, trước kia mình có giới thiệu cách nâng cấp tính năng chat cho Page Plugin . Tuy nhiên với hình thức đó thì chỉ có những người đã like Fanpage của bạn mới có thể chat. Hôm nay mình sẽ gi…

avatar
Giaodien.blog

Nhà thiết kế Web


  • 19/01/2016
  • Views
Chào các bạn, trước kia mình có giới thiệu cách nâng cấp tính năng chat cho Page Plugin. Tuy nhiên với hình thức đó thì chỉ có những người đã like Fanpage của bạn mới có thể chat. Hôm nay mình sẽ giới thiệu một kiểu Chat mới, cũng dựa trên nền tảng Facebook. Ở phiên bản này thì bất cứ khách truy cập nào đã đăng nhập Facebook đều có thể gửi tin nhắn đến Fanpage của bạn mà không cần phải like Fanpage.
Form chat bằng Facebook
Và nhìn nó khá chuyên nghiệp và giống như những Form hỗ trợ phổ biến khác. Nó sẽ hiển thị ở góc dưới bên phải màn hình.
Ok, các bạn dùng đoạn code sau nhé
<!-- Begin chatbox facebook Form -->
<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 = &quot;//connect.facebook.net/vi_VN/sdk.js#xfbml=1&amp;version=v2.5&quot;;
  fjs.parentNode.insertBefore(js, fjs);
  }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
  <style>#cfacebook{position:fixed;bottom:0px;right:8px;z-index:999999999999999;width:250px;height:auto;box-shadow:5px rgba(0,0,0,0.2);overflow:hidden;}#cfacebook .fchat{float:left;width:100%;height:270px;overflow:hidden;display:none;background-color:#f2f2f2;}#cfacebook .fchat .fb-page{margin-top:-130px;float:left;}#cfacebook a.chat_fb{float:left;padding:0 25px;width:250px;color:#fff;text-decoration:none;height:40px;line-height:40px;background-size:auto;background-position:0 0;background-color:#3a5795;border:0;border-bottom:1px solid #133783;z-index:9999999;margin-right:12px;font-size:18px;}#cfacebook a.chat_fb:hover{color:#ccc;text-decoration:none;}</style>
  <script>
  jQuery(document).ready(function () {
  jQuery(&quot;.chat_fb&quot;).click(function() {
jQuery(&#39;.fchat&#39;).toggle(&#39;slow&#39;);
  });
  });
  </script>
Và đoạn code này
<div id='cfacebook'>
  <a class='chat_fb' href='javascript:;' onclick='return:false;'><i class='fa fa-facebook-square'/>Hỗ trợ trực tuyến</a>
  <div class='fchat'>
  <div class='fb-page' data-adapt-container-width='true' data-height='400' data-hide-cover='false' data-href='https://www.facebook.com/AdvertiserSpace/' data-show-facepile='true' data-show-posts='false' data-small-header='false' data-tabs='messages' data-width='250'/>
  </div>
  </div>
Thay cái phần mình đánh dấu màu xanh là được
Các bạn có thể đặt đoạn code 1 ở trong phần Header của website, còn đoạn code 2 thì cho vào trước thẻ </body> là được.
Hi vọng tính năng này có ích đối với bạn.

Related post


avatar

Giaodien.blog

Nhà thiết kế Web
View Articles

Tôi là admin trang Giaodien.blog là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...

Share this article