#ref-menu
Thêm Facebook ChatBox vào website |
Tamhoangdk - Cấp bậc:  |
18-04-2016
Bài viết này sẽ hướng dẫn các bạn thêm khung chat (ChatBox) của Facebook vào website. Phục vụ cho công việc support khách xem website, rất thích hợp cho các trang về doanh nghiệp hay bán hàng online. Demo : http://silemypham.com
Hướng dẫn thêm Facebook Chatbox và website
Đầu tiên các bạn phải tạo 1 Facebook App ở trang này: https://developers.facebook.com/ . Về cách đăng ký và tạo App FB này thì rất dễ, các bạn có thể tự đăng ký hoặc tìm trên Google để xem các bài hướng dẫn nhé. 2 cái chủ yếu ta sẽ lấy là AppID và domain sử dụng cho app. Ở đây mình đã tạo và đăng ký cho website http://silemypham.com
Sau khi tạo xong, các bạn vào trang này: https://developers.facebook.com/docs/plugins/page-plugin
Ở đây các bạn thay:[list][*]Facebook Page URL : bằng link facebook page của các bạn , ví dụ của mình là: https://www.facebook.com/silemypham.com202[*]Width : tùy theo các bạn muốn box chat dài bao nhiêu thì set vào[*]Height: độ cao của chatbox[*]Các tùy chọn khác như : hiển thị mặt (avatar) , show ảnh cover, header của boxchat dạng nhỏ…thì tùy thích các bạn chọn hay không[/list]
Nó sẽ trông như thế này:
Xong các bạn bấm vào nút “Get Code” . Copy đoạn bên trên bỏ vào dưới thẻ body trong HTML của các bạn, và đoạn thứ 2 là để hiển thị chatbox.
Hướng dẫn style CSS cho Facebook Chatbox
Như các bạn thấy demo http://silemypham.com . Mình đã style cho nó và trang trí tí xíu để nhìn trực quan hơn. Chatbox sẽ trượt theo bên phải của trình duyệt, có nút Tắt/ Mở Chatbox để tránh làm phiền người dùng. Khi bấm vào nút Tắt/Mở sẽ lưu sự kiện vào “local stogare” của trình duyệt để biết người dùng có bấm tắt hay không , nếu tắt thì khi load những trang khác sẽ không mở chatbox lên nữa (nếu bấm vào lại thì sẽ mở, tất nhiên rồi )
Lưu ý 1 điều, các bạn phải thêm đoạn này vào “Đoạn 2″ code của Facebook để biến Like page thành chatbox:
data-tabs=”messages”
Đầy đủ đoạn chatbox của mình sẽ như sau:
Và javascript như sau để xử lý Tắt/Mở chatbox:
Chỉ đơn giản thế thôi là các bạn đã có 1 chatbox bằng Facebook mà không phải sử dụng các dịch vụ rờm rà khác
Hướng dẫn thêm Facebook Chatbox và website
Đầu tiên các bạn phải tạo 1 Facebook App ở trang này: https://developers.facebook.com/ . Về cách đăng ký và tạo App FB này thì rất dễ, các bạn có thể tự đăng ký hoặc tìm trên Google để xem các bài hướng dẫn nhé. 2 cái chủ yếu ta sẽ lấy là AppID và domain sử dụng cho app. Ở đây mình đã tạo và đăng ký cho website http://silemypham.com
Sau khi tạo xong, các bạn vào trang này: https://developers.facebook.com/docs/plugins/page-plugin
Ở đây các bạn thay:[list][*]Facebook Page URL : bằng link facebook page của các bạn , ví dụ của mình là: https://www.facebook.com/silemypham.com202[*]Width : tùy theo các bạn muốn box chat dài bao nhiêu thì set vào[*]Height: độ cao của chatbox[*]Các tùy chọn khác như : hiển thị mặt (avatar) , show ảnh cover, header của boxchat dạng nhỏ…thì tùy thích các bạn chọn hay không[/list]
Nó sẽ trông như thế này:
Xong các bạn bấm vào nút “Get Code” . Copy đoạn bên trên bỏ vào dưới thẻ body trong HTML của các bạn, và đoạn thứ 2 là để hiển thị chatbox.
Hướng dẫn style CSS cho Facebook Chatbox
Như các bạn thấy demo http://silemypham.com . Mình đã style cho nó và trang trí tí xíu để nhìn trực quan hơn. Chatbox sẽ trượt theo bên phải của trình duyệt, có nút Tắt/ Mở Chatbox để tránh làm phiền người dùng. Khi bấm vào nút Tắt/Mở sẽ lưu sự kiện vào “local stogare” của trình duyệt để biết người dùng có bấm tắt hay không , nếu tắt thì khi load những trang khác sẽ không mở chatbox lên nữa (nếu bấm vào lại thì sẽ mở, tất nhiên rồi )
Lưu ý 1 điều, các bạn phải thêm đoạn này vào “Đoạn 2″ code của Facebook để biến Like page thành chatbox:
data-tabs=”messages”
Đầy đủ đoạn chatbox của mình sẽ như sau:
<div class="fbchatbox hidden-xs" style="position:fixed;right:5px;bottom:135px;z-index:9999"><div class="fb-page" data-href="https://www.facebook.com/silemypham.com202" data-small-header="true" data-adapt-container-width="false" data-height="300" data-width="300" data-hide-cover="true" data-show-facepile="true" data-show-posts="false" data-tabs="messages"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/silemypham.com202"><a href="https://www.facebook.com/silemypham.com202">Silemypham.com</a></blockquote></div></div><span id="closefbchat" style="white-space: nowrap;position:absolute;right:2px;bottom:299px;padding: 3px 15px;background: #44619D;color: #fff;cursor: pointer;">Tắt Chat</span></div>
Copy code
Copy code
Và javascript như sau để xử lý Tắt/Mở chatbox:
<script>if(localStorage.getItem("fbchatclose") == 1){jQuery('.fb-page').toggleClass('hide');jQuery('#closefbchat').html('<i class="fa fa-comments fa-2x"></i> Chat Tư Vấn').css({'bottom':0});}jQuery('#closefbchat').click(function(){jQuery('.fb-page').toggleClass('hide');if(jQuery('.fb-page').hasClass('hide')){localStorage.setItem("fbchatclose", 1);jQuery('#closefbchat').html('<i class="fa fa-comments fa-2x"></i> Chat Tư Vấn').css({'bottom':0});}else{localStorage.setItem("fbchatclose", 0);jQuery('#closefbchat').text('Tắt Chat').css({'bottom':299});}});</script>
Copy code
Copy code
Chỉ đơn giản thế thôi là các bạn đã có 1 chatbox bằng Facebook mà không phải sử dụng các dịch vụ rờm rà khác
Tổng số: 1| - Share: BBCode: Link: |