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

Từ khóa

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.

23 bình luận

Sao chỉ hiển thị poup thôi chứ ko hiển thị textbox nhỉ?

Rất hữu ích :) thử luôn thủ thuật hay cho blogspot trên DatLun.Com

Cảm ơn nhiều, Đã thành công cho
blog tôi chia sẻ

Cái ông Hiệp này chỉ được cái chia sẻ hay thôi..Like luôn:))
Dành cho bạn nào thích xăm nghệ thuật: Blog hình xăm độc chào mừng các bạn :3

Hôm qua có người yêu cầu, thế là sáng nay mới viết bài đó chứ :v dạo này bận quá chả viết được

Ít mà cứ chất như này các bạn lại fai sang comment với like luôn :3

em đã comment đầu tiên, mà sao lại không có, huhuhuhuhuhuhu
https://www.facebook.com/letuan.dgm + 130

nhầm, bác xóa giúp em cái nhé

một pha lag à :v thôi cứ để đấy cũng được, tính cái bên kia mà

Bác Hiệp cho mình xin code sitemap được hơm :3

view code lên mà lấy bạn êi, ko chơi giả gái nhá

Đã tạo thành công cho http://www.vinhblog.info/, cảm ơn chia sẻ của bạn

up code vào vậy mà chẳng làm được

Cảm ơn bạn đã chia sẻ tut hay.
Cho mình hỏi để chuyển nó sang vị trí khác thì chỉnh sửa code nào vậy bạn.

Code còn sài được không anh?? Sao em test mấy blog luôn mà không blog nào được... :((

còn dùng được, mình vừa làm cho blog này luôn mà. Xem kỹ cái code fb-root. Nếu bị trùng code thì nó không hoạt động đâu

header là thằng nào thế anh, em không biết chèn vào đâu cả

Sao mình lấy về click nó không lên hộp box nhỉ

Trang của mình: http://lammatnhaxuong.com.vn thì nó ra thế này!!! Giúp mình nhé, thanks add!

Nhận xét này đã bị tác giả xóa.

Mọi người cho e hỏi sao e nhấp vô "Hỗ trợ trực tuyến" nhưng nó lại ko hiểu javacrip nhìn phía dưới javascript:; Nhờ a e giúp mình với. Cảm ơn a e rất nhiều

Anh ơi a có thể giúp e 1 chút được không ạ? e làm hiện lên chatbox mà ấn vào thì ko được a ạ
https://www.facebook.com/pham.viettien.3
cảm ơn a


EmoticonEmoticon