Tutorial Letak Shoutbox Facebook Dalam Blog

14 Mac 2012

Tutorial Letak Shoutbox Facebook Dalam Blog

1. Pergi ke link developer live-stream facebook >>

2. Masukkan URL blog korang seperti gambar di atas atupun adjust size shoutbox korang.

3. Click Get Code.

4. Gambar yang ada border merah di bawah korang letakkan selepas <body attribute. Jangan lupa tukar APP_ID korang

5. Jika keluar error seperti dibawah:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The reference to entity "appId" must end with the ';' delimiter.

gantikan "//connect.facebook.net/en_US/all.js#appId= APP_ID &xfbml=1";
kepada " /connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1";

6. Manakala border biru korang masukkan dekat design >> add a gadget >> html/java script

7. Save dan siap korang punya shoutbox facebook.

8. Kalau korang xda lagi apps fb. Maka korang kena buat satu mcm gambar kat bawah. Link nak create new application ada masa korang click get code pada gambar no 2 di atas.

Extra >> Autohide Shoutbox Facebook
Semasa add gadget letakkan script border yang berwarna biru seperti gambar di atas pada text yang berwarna merah.

#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/AVvXsEh1V-Gt28FIUdVUabV8jgkwHNft_bljlCBe8q0Dq7VW3qaTfoeV0k3b4ybT90-knENS8Wz_hwhdFpLGwcAmWDqq4B1LuL4-1gSOntn36xEgOzjdAYNIkh9Q9T4evWLMmDRqnJp0XKUScTgO/s320/tabs.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #666666;

background:#F5F5F5;

padding:10px;

}

</style>

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 class="gbcontent">

[SCRIPT FACEBOOK LETAK KAT SINI]

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Kalau tak paham boleh tanya :D . Jgn lupa LIKE fanpage acik ;P