Nothing is impossible

Blog cá nhân tổng hợp những kiến thức về website và Mar online (^_^)

Hướng dẫn tích hợp Facebook Chat vào blog/ website

Hướng dẫn tích hợp Facebook Chat vào blog/ website 


Không thể phủ nhận được rằng Facebook đang có sự ảnh hưởng ngày càng lớn đối với nền thương mại điện tử trên thế giới nói chung và tại Việt Nam nói riêng.
Ngày nay, hầu như tất cả mọi người dùng internet đều sở hữu cho mình tài khoản Facebook, đặc biệt là những người trẻ tuổi. Rất nhiều doanh nghiệp, cá nhân cũng nhờ đó mà tìm kiếm được khách hàng thông qua mạng xã hội này. Nếu bạn cũng đang kinh doanh online thì việc tích hợp Facebook Chat (Facebook Messenger) vào website của mình để tăng cường khả năng tương tác với khách hàng là một ý tưởng không thể tuyệt vời hơn.



HƯỚNG DẪN TÍCH HỢP LIVE CHAT FACEBOOK VÀO WEBSITE.

Bạn copy đoạn code bên dưới và chèn vào trước thẻ </body> của Website.
<div id="fb-root"></div>
  <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 = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  <style>#cfacebook{position:fixed;bottom:0px;right:20px;z-index:999999999999999;width:250px;height:auto;box-shadow:6px 6px 6px 10px rgba(0,0,0,0.2);border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden;}#cfacebook .fchat{float:left;width:100%;height:270px;overflow:hidden;display:none;background-color:#fff;}#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;text-shadow:0 1px 0 rgba(0,0,0,0.1);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAqCAMAAABFoMFOAAAAWlBMV…8/UxBxQDQuFwlpqgBZBq6+P+unVY1GnDgwqbD2zGz5e1lBdwvGGPE6OgAAAABJRU5ErkJggg==);background-repeat:repeat-x;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:yellow;text-decoration:none;}</style>
  <script>
  jQuery(document).ready(function () {
  jQuery(".chat_fb").click(function() {
jQuery('.fchat').toggle('slow');
  });
  });
  </script>
  <div id="cfacebook">
  <a href="javascript:;" class="chat_fb" onclick="return:false;"><i class="fa fa-facebook-square"></i> Phản hồi của bạn</a>
  <div class="fchat">
  <div class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/canhofullhouse/" data-width="250" data-height="400" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div>
  </div>
  </div>

Trong đó bạn cần sửa lại:
§ Sửa https://www.facebook.com/canhofullhouse/ thành địa chỉ Fanpage của bạn.
§ Nếu bạn muốn đoạn live chat hiển thị lệch qua bên trái hay dịch sang phải thì bạn thay đổi số 100px thành con số nào bạn muốn. Tú đang để là 100px có nghĩa là nó sẽ cách bên phải 100px (mục dích là muốn nó ko đè lên nút BACK TO TOP).
Vậy là xong.

HƯỚNG DẪN VỚI BẠN BẠN DÙNG WORDPRESS.

Truy cập Admin => Appearance ==> Editor => Tìm file footer.php
Tìm thẻ </body> và thêm đoạn code xuống dưới.

Lưu lại để hoàn tất.
Cách 2:
1. Đầu tiên, các bạn cần phải cài đặt và kích hoạt plugin WP Facebook Messenger.

2. Truy cập vào Settings => Facebook Messenger và thiết lập các thông số cần thiết cho plugin.

Trong đó, cần lưu ý các thông số sau:
· Your Facebook Fan Page URL: địa chỉ fanpage trên Facebook của bạn.
· Custom text for button: tùy biến dòng chữ của nút Messenger trong giao diện WooCommerce.
· Upload icon or image: lựa chọn icon hoặc hình ảnh cho nút Messenger.
· Main Color: lựa chọn màu sắc cho nút Messenger.
· Custom text for open Messenger app button: tùy biến dòng chữ của nút mở ứng dụng Messenger.
· Language: lựa chọn ngôn ngữ cho giao diện Messenger.
· Display: các tùy chọn hiển thị (Display all pages but except – hiển thị ở tất cả các trang, ngoại trừ những trang bạn chọn ở bên dưới; Display for page… – hiển thị trong trang do bạn chọn ở bên dưới).
Những mục khác các bạn không cần phải quan tâm bởi vì chúng chỉ dành cho bản PRO (trả phí).
Click nút Save để lưu lại sau khi hoàn tất.
4. Nếu bạn sử dụng WooCommerce để tạo shop bán hàng trực tuyến, một nút Messenger sẽ tự động được thêm vào giao diện giúp khách hàng liên hệ nhanh chóng hơn.


5. Nếu bạn muốn chèn thêm nút Messenger vào sidebar hoặc footer, hãy sử dụng widget Facebook Messenger.

Và kết quả sẽ trông giống như thế này.

HƯỚNG DẪN CHO BLOGSPOT

Vào Admin => Chọn Mẫu => Chỉnh sửa HTML

Nhấn lưu để hoàn tất.
Rất đơn giản vậy thôi, không tùy chỉnh thêm gì cả. Bạn nào biết CSS có thể tùy biến theo ý thích của mình ở trong <style>.
Chúc bạn thành công.

Share on Google Plus

About Vietnguyen

Blog tổng hợp các kiến thức về website và marketing online. Chia sẻ là niềm vui ! Tôi làm được bạn cũng làm được. Nothing im possible
    Blogger Comment
    Facebook Comment

0 nhận xét:

Đăng nhận xét