Neh Gwe punya cara untuk membuat chat box ala Facebook.
langsung anda test aja ya
1. kamu login facebook dan langsung masuk ke
http://developers.facebook.com/setup/
create new app
2. setelah selesai proses register akan muncul
3. Langkah selanjutnya masuk ke sini
http://developers.facebook.com/docs/...ns/live-stream
4. Masukkan App id anda pada kolom
App Id
5. jika sudah klik tombol
get code dan akan muncul kolom kode hasil app tadi.copy code
iframe
contoh kode yg di dapat
<iframe src="http://www.facebook.com/plugins/live_stream_box.php?app_id=
App Id Anda&width=400&height=500&via_url&always_post_to_friends=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:500px;" allowTransparency="true"></iframe><
isi
app id dengan
app id anda
6. Untuk Hide & Show chat box nya tambahin kode ini
<style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:201px; width:35px; float:left; cursor:pointer; background:url('http://2.bp.blogspot.com/_EW8LhmljFgI/TPaK7K2wxKI/AAAAAAAAAIA/G1Gac0K4M_M/s1600/Chatbox+copy.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #ffffff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#000000; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent"> <!-- live stream - -->
KODE FACEBOOK LIVE STREAM
<!-- End live stream -->
<div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>
ganti tulisan berwarna merah di atas dengan kode facebook live stream kamu
7. Untuk Memasangnya pada blog silahkan login pada blog dan masuk ke bagian rancangan.
8. Pilih add gadget HTML/JavaScript dan pastein kode gabungan antara hide chat dan facebook live stream kamu tadi.lalu save
jika kamu gak mo pusing² copy paste aja kode di bawah ini dan masukkan ke HTML/JavaScript kamu
<style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:201px; width:35px; float:left; cursor:pointer; background:url('http://2.bp.blogspot.com/_EW8LhmljFgI/TPaK7K2wxKI/AAAAAAAAAIA/G1Gac0K4M_M/s1600/Chatbox+copy.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #ffffff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#000000; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent"> <!-- live stream - -->
<iframe src="http://www.facebook.com/plugins/live_stream_box.php?app_id=255955255198
&width=400&height=500&via_url&always_post_to_friends=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:500px;" allowTransparency="true"></iframe>
<!-- End live stream -->
<div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>
semoga berhasil ya
Share