chatbox versi facebook [tutorial]

salam readers, oke harinie I nak buat tutorial, disebabkan paper I dah habis, cuti sem pon bermula so I jadi rajin sikit nak buat tutorial untuk korang

ada beberapa orang tanye macam maner nak buat chatbox macam I?? chatbox versi facebook, nampak unik sikit kan, erkkk

PERINGATAN

sila buat salinan kod shoutbox korang sebagai langkah berjaga-jaga kalau korang takut tak menjadi

chatbox versi facebook nie boleh digunakan oleh semua pengguna seperti blogspot, wordpress, wordpress.com atau ape-ape sahaja asalkan html disokong

oke for first, korang pergi halaman facebook plugin di 'http://developers.facebook.com/plugins'

then keluar seperti gambarajah di atas, korang pilih "Live Stream" yang terletak di belah kanan bawah sekali

isi kotak tersebut dengan cara di bawah :

App ID: 'jangan ubah ape-ape' (jangan pulak korang tukar app ID tu ikut sejibi macam dalam gambar kat atas nie, dalam gambar tu app ID I) =.=

Width: 'saiz lebar chatbox yang korang nak'

XID: 'saiz ketinggian chatbox yang korang nak'

Via Attribution URL: 'biarkan kosong'

Always post to friends: 'pastikan korang tick pada kotak tersebut, kalau tak mesej tersebut akan dipaparkan ke wall fb u all' 

akhir sekali klik 'get code'

satu pop-up windows akan keluar, salin code di bahagian 'iframe' dan letakkan di notepad dahulu

bukak dashboard >> design >> add a gadget >> HTML/javascript, copy (Ctrl+C) code di bawah : 

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZD20wUZ9L1RTcPCMNxUoksPxLKFZyfndABOkOf7UW7dpa1DxN8sV4VWE9wAeWBC16ab0FwEyN1TpjL8e-4k3G1nVZNFSVEuCHIsyslQWtTcXPS7pjuksu6Ns-pHEk-WsAvp2Xz4LkgWpy/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">   </div>
<div class="gbcontent">
Masukkan kod dari facebook di sini
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

gantikan "Masukkan kod dari facebook di sini" dengan code 'iframe' yang korang copy kat notepad tadi, SAVE

cube tengok jadi ke tak?? if ada error bagitau I, harap korang berjaya =)

p/s: credit to fakhri ^^

---

Tweet

LIKE DAN SHARE ENTRY INI KALAU SUKA, TQ

---