Chatbox cho blog và web cá nhân

Chắc hẳn bạn đã từng nhìn thấy chatbox ở đâu đó trên những blog hoặc web cá nhân mà bạn từng ghé qua. Có một chatbox sẽ làm cho blog hoặc web cá nhân của bạn trở lên chuyên nghiệp hơn và cũng tạo ra thêm tính năng cho người dùng khi ghé qua blog của bạn. Với chatbox bạn cùng visitors hoàn toàn có thể trao đổi trực tiếp với nhau trên blog mà không cần phải thông qua các comment. Bài viết này mình xin giới thiệu một số chatbox đơn giản để bạn có thể ứng dụng vào blog hoặc web cá nhân của mình.

Chatbox 1: Đây là chatbox mình từng thấy trên một số blog có ứng dụng sau đó thì đã viewsource và xem được.

Đây là style cho chatbox, bạn hãy copy và đặt vào trong thẻ head:

<style type='text/css'>
.gb_fixed{position:fixed;top:30px;right:0px;z-index:+10;}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:4px solid #bf3989;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#fff;
padding:0 3px 3px 3px;
}
</style>

Đây là phần code của trong thẻ body:

<div class='gb_fixed'>
<table cellpadding='0' cellspacing='0' id='hidden_gb2'>
<tr><td><div><a href='javascript:void(0)' onclick='gb_showHideGB()'><b><center>[ Đóng Chat Box ]</center></b></a></div>
Code chatbox ở đây</td></tr></table></div>

<script type='text/javascript'>

var gb_obj = document.getElementById("hidden_gb2");
var gb_finish = false;

function gb_setInitBehaviour() {
gb_obj.isHidden = true;
gb_setOpacity(gb_obj, "0.01");
}
function gb_setOpacity(obj, opacity) {
opacity = opacity.substr(0, 4);
obj.style.opacity = opacity;
obj.style.filter = "alpha(opacity=" + (Math.floor(parseFloat(opacity) * 100)).toString() + ")";
//writex(opacity);
}
function gb_showGB() {
gb_obj.style.display = "block";
gb_changeOpacityTo(1, "");
gb_obj.isHidden = false;
}
function gb_hideGB() {
gb_changeOpacityTo(0.01, "gb_obj.style.display = \"none\"");
gb_obj.isHidden = true;
}
function gb_changeOpacityTo(fin, funcStr) {
var init = parseFloat(gb_obj.style.opacity.substr(0, 4));
var d = init <= 0.2 ? 0.04 : init <= 0.6 ? 0.08 : 0.20;
var m = fin > init ? 1 : -1;
var opacity = init + d * m;
if ((fin - opacity) * (fin - init) < 0) { opacity = fin; }
gb_setOpacity(gb_obj, opacity.toString());
if (opacity != fin) { setTimeout("gb_changeOpacityTo(" + fin.toString() + ", '" + funcStr + "')", 50); }
else { eval(funcStr); }
}
function gb_showHideGB() {
if (gb_obj.isHidden) { gb_showGB(); }
else { gb_hideGB(); }
}
function writex(str) {
document.getElementById("wx").innerHTML += str + " ";
}
gb_setInitBehaviour();

</script>

<div class='gb_fixed' style='z-index:+5'>
<a href='javascript:void(0)' onclick='gb_showHideGB()'>
<img border='0' src='http://goo.gl/Y4jua'/>
</a></div>

Bạn có thể vào các trang cung cấp dịch vụ chatbox miễn phí và get code của họ rồi paste vào chỗ dòng chữ màu đỏ. Bạn có thể vào cbox.ws , sbox.ws, myshoutbox.com, chatango.com. Mình đã đăng kí một chatbox trên cbox vào đây là đoạn code mình lấy được.

<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=565567&boxtag=xx02bd&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-565567" style="border:#ababab 1px solid;" id="cboxmain7-565567"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=565567&boxtag=xx02bd&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-565567" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-565567"></iframe></div>
</div>

Và mình đã thử nghiệm đoạn code này trên trang này. Bạn có thể nhìn sang bên.

Chatbox này có ưu điểm là nhanh và giao diện có vẻ mượt hơn giao diện của các chatbox mà các trang chatbox free cung cấp cho chúng ta. Nhưng nó có một nhược điểm nhỏ là bạn phải kích vào nó để mở nó ra và phải đóng tắt lại khi bạn không muốn dùng nữa. Mình nghĩ cái này cũng không phải điều gì quá lớn có thể bỏ qua được. Nếu bạn muốn nó ẩn hiện thì hãy thêm các event hover và onblur để nó tự động ẩn hiện theo ý muốn.

[ Đóng Chat Box ]

Chatbox 2: Ngoài cách tự tạo một style riêng cho chatbox của mình thì bạn cũng có thể dùng style của các trang cung cấp chatbox tool free. Giao diện tuy khó chỉnh hoặc cũng có thể không chỉnh được. Nhưng nếu bạn không rành về cách chỉnh style thì cũng có thể dùng style chatbox của họ. Đây là chatbox mình đã đăng kí trên chatango.com.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script id="sid0010000008922765662"> (function () { function async_load() { s.id = "cid0010000008922765662"; s.src = 'http://st.chatango.com/js/gz/emb.js'; s.style.cssText = "width:250px;height:360px;"; s.async = true; s.text = '{"handle":"webzoomzchatbox","styles":{"b":60,"f":50,"l":"999999","q":"999999","r":100,"s":1}}'; var ss = document.getElementsByTagName('script'); for (var i = 0, l = ss.length; i < l; i++) { if (ss[i].id == 'sid0010000008922765662') { ss[i].id += '_'; ss[i].parentNode.insertBefore(s, ss[i]); break; } } } var s = document.createElement('script'); if (s.async == undefined) { if (window.addEventListener) { addEventListener('load', async_load, false); } else if (window.attachEvent) { attachEvent('onload', async_load); } } else { async_load(); } })();</script>

Chatbox kiểu này có chút nhược điểm là bạn khó chỉnh style mặc dù nhà cung cấp có cho bạn chọn và chỉnh style khi bạn đăng kí. Và một nhược điểm của loại này là hơi chậm 1 chút do bạn phải load 1 script khá nặng.

Hi vọng với 2 loại chatbox trên bạn có thể tô điểm thêm cho blog hoặc web cá nhân của mình đẹp hơn. Chúc các bạn thành công ^_^!