Thêm hộp thoại Facebook livechat vào Blogspot

Bạn muốn chèn một hộp thoại để các độc giả có thể phản hồi những ý kiến, những thắc mắc một cách nhanh nhất. Bạn muốn đưa chính hộp thoại chat trên Facebook vào blog của mình... Trong bài viết này, mình chia sẻ với các bạn cách để thực hiện các mục đích đó bằng cách sử dụng Fan page message làm live chat trên chính blog của bạn.

Một vài ưu điểm :
► Độc giả dùng tài khoản Facebook để gửi tin và nhận phản hồi ngay cả khi đã thoát khỏi website.
► Quản lý tin nhắn của độc giả thông qua hộp thư của fan page, không cần cài đặt ứng dụng riêng.
► Thích hợp với các shop bán hàng cả trên kênh fan page, muốn thống nhất 1 kênh chăm sóc khách hàng.

Nhược điểm:

► Chỉ hiển thị khung chat khi người dùng đăng nhập Facebook trên trình duyệt đó, khả năng tùy biến giao diện còn kém…

Thêm Facebook livechat cho Blogger và Website
Hướng dẫn cách cài đặt:
1. Đăng nhập vào blog
2. Vào Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn đoạn code dưới đây vào trước thẻ đóng </body> của blog, thay đoạn link: https://www.facebook.com/Chinhtrucblog/ bằng link Fanpage của bạn :

<style type="text/css">
.liveChat-Box{
position: fixed;
width: 260px;
right: 5px;
bottom: -5px;
padding: 5px;
z-index: 100000000000}
.liveChat-bar{
text-align: center;
background-color: #5B74A8;
/* border: solid 1px #c3c3c3; */
border-radius: 4px 4px 0px 0px;
height: 30px;
line-height: 30px;
color: #fff}
.liveChat-panel{
height:300px;
display: none;
background:#fff}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".liveChat-bar").click(function(){
$(".liveChat-panel").toggle();
});
});
</script>
<div class="liveChat-Box">
<div class="liveChat-bar">Chat với chúng tôi</div>
<div class="liveChat-panel">
<div id="fb-root"></div>
<script type="text/javascript">
(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>
<div style="position:fixed; z-index:9999999; right:10px; bottom:0px;" class="fb-page" data-tabs="messages" data-href="https://www.facebook.com/Chinhtrucblog" data-width="250" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false" data-show-posts="false"></div>
</div>
</div>

5. Truy cập lại vào blog và tận hưởng thành quả. ^_^
Lưu ý:
►Nhớ thay đoạn bôi vàng thành địa chỉ blog của bạn.
►Bạn phải đăng nhập Facebook trên trình duyệt thì blog mới hiển thị khung chat này.
►Đoạn code trên đã được tùy chỉnh để khung chat hiển thị ở góc phải màn hình. Các bạn có thể tùy biến thêm để phù hợp với blog của bạn.

Good luck !!!