Thêm Facebook chat vào website

Chào các bạn!
Nhiều người thích tích hợp các Social plugin của Facebook vào website vì tính phổ biến và tiện dụng của Facebook. Mình có làm vài dịch vụ liên quan đến Facebook cho nên việc tính hợp luôn chat box bằng Fanpage cho website cũng là điều cần thiết. Tiện đây thì viết lại cho các bạn xem luôn

Thực ra code của nó rất đơn giản. Nó gồm 2 đoạn code chính như sau. Các bạn có thể thêm 2 đoạn code này vào trong thẻ <body> của website cũng được
Đoạn code 1 - Đoạn code Facebook root, nếu bạn đã có sẵn đoạn code này trong web rồi thì không cần thêm vào nữa

<div id='fb-root'/>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APPLICATION_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>

Thay ID app của bạn vào (nếu có) còn không thì thôi.
Đoạn code 2 - Đây là đoạn code cho cái hộp chat bằng Fanpage, bạn cũng thêm vào trong thẻ <body>

<style>#cfacebook{position:fixed;bottom:0px;right:20px;z-index:999999999999999;width:250px;height:auto;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 12px;width:250px;color:#fff;text-decoration:none;height:40px;line-height:40px;text-shadow:0 1px 0 rgba(0,0,0,0.1);background-color:#3a5795;border:0;z-index:9999999;margin-right:12px;font-size:18px;}</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;">Liên hệ</a>
<div class="fchat">
<div class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/Ftrick.Official/" 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>

Trên đoạn code này thì có 3 phần, các bạn thích thì sửa thêm chút CSS cho phù hợp với website của bạn, còn không thì chỉ cần thay cái link mà mình đánh dấu thành link Fanpage của các bạn là được rồi. Các bạn có thể thấy phần ví dụ mình làm luôn ở góc phải màn hình nhé. Chúc các bạn thành công!

Liên hệ

Rated 4.6/5 based on 28 votes

Thêm Facebook chat vào website

0 Response to "Thêm Facebook chat vào website"

Đăng nhận xét