Cara Membuat LikeBox Fanspage Facebook Melayang di Blog itulah judul artikel kali ini. Apabila anda memiliki sebuah halaman fanspage facebook yang akan di tempatkan pada blog atau web anda alangkah baiknya jika hal tersebut di buat melayang agar supaya pengunjung blog melihat dan me like nya. Hal ini termasuk juga dalam uapaya peningkatan pengunjung pada situs kita. Contoh LikeBox fanspage facebook seperti gambar berikut.
 |
| Cara Membuat LikeBox Fanspage Facebook Melayang di Blog |
Setelah membuat halaman fanspage, anda juga harus membuat likebox di facebook yang nantinya anda akan di beri kode untuk di masukkan di blog. caranya masuk ke halaman ini https://developers.facebook.com/docs/reference/plugins/like-box/. Masukkan url fanspage anda dan atur tinggi dan lebar kotaknya sesuai keinginan anda kemudian tekan get code.
Setelah itu, nantinya terdapat dua buah kotak kode. Kode pada kotak pertama itu harus di masukkan ke template anda. Caranya copy code tersebut lalu masuk ke perancangan template cari <body> . Untuk lebih mudah tekan Ctrl+F kemudian setelah di dapatkan paste kode tadi di bawah <body> lalu simpan template anda.
contohnya:
<body>
<div id="fb-root"></div>
<script>(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/id_ID/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Nah sampai disitu ada langkah yang anda lakukan lagi yaitu :
1.Setelah itu masuk ke perancangan tata letak.
2. pilih tambah gadget
3. pilih HTML/Javascript
4. Masukkan kode berikut
<!-- Script kotak like Facebook Melayang BlogSEOArul -->
<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<table border="1" bgcolor="FFFFFF">
<tr>
<td>
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8EVmoB3sxxU0YsHczNgAnlYKo5B4W2D_r-C1hg_x8msrNHLRORF-Wr2rXXhAsbN78YONLNpsDHf_Qf4lSxsfLY8Jw8UDbKVEqUXzoex112L0Q82remgsx-I6jFGz-6qSexXWyBkwVG_mR/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">
<div class="fb-like-box" data-href="https://www.facebook.com/AmalkanIlmuBerbagiUntukSemua?ref=hl" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>
</div>
</center></td>
</tr>
</table>
</div>
<!-- End Like Fan Page Melayang BlogSEOArul -->
ket: ganti kode merah di atas dengan kode likebox fanspage facebook anda. tepatnya kode yang berada pada kotak kedua.
5. Simpan dan lihat hasilnya.
itulah tadi artikel tentang Cara Membuat LikeBox Fanspage Facebook Melayang di Blog semoga bermanfaat bagi anda.
