Cara membuat Fan page fecebook di blog dan bisa melayang

Apabila Anda ingin menambahkan Like Box di blog anda berikut ini cara cara daru Butuh Ilmu

langsung saja simak Cara membuat Fan page fecebook di blog dan bisa melayang

1. Ada beberapa langkah berbeda untuk membuat Facebook Page. Untuk langkah yang lebih mudah, sebaiknya anda telah login terlebih dahulu di account Facebook anda.

2. Kemudian buka halaman ini:  http://www.facebook.com/pages/create.php.

3. Pilih/klik opsi Brand or Product/Merek atau produk.

 4. Pilih opsi "website" dan isikan nama Page sesuai dengan yang diinginkan. centang "agreement" dan klik "Get Started", seperti contoh gambar berikut:

5. Selanjutnya anda akan masuk ke halaman Facebook Page yang telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalnya mengupload foto/gambar untuk Facebook Page, mengedit informasi, dan lain sebagainya, atau langsung membuat Facebook Like Box yang nantinya dapat dipasang di blog/website.

Cara Membuat dan Memasang Facebook Like Box di blog/website

1. Jika anda masih berada di halaman Facebook page anda tadi copy dulu URLnya sudah itu anda pergi ke alamat alternatif berikut : http://developers.facebook.com/docs/reference/plugins/like-box/
Contoh url-nya : http://www.facebook.com/pages/Butuh-Ilmu/298102476968214
2. Selanjutnya, isikan spesifikasi seperti gambar berikut:

Setting Facebook Like Box:

- Facebook Page url: url Facebook Page anda

- Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget.

- Color scheme: pilih light jika ingin tampilan terang, dan dark untuk tampilan gelap.

- Show Faces: Centang untuk menampilkan foto profil likers.

- Border color: Isikan dengan kode warna jika ingin memberi border atau kosongkan agar transparan.

- Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.

- Show header: Centang jika ingin menampilkan tulisan header "Find Us on Facebook".

Lihat preview tampilan di sebelah kanan form tersebut.

3. Jika settingan yang dibuat sudah beres, klik get code. Kemudian akan muncul pop-up window yang menampilkan 4 jenis kode, HTML5, XFBML, IFRAME dan URL pilih salah satu dan copy kodenya. (Untuk Blogger, saya sarankan pilih HTML 5) tapi kalau saya mencoba saya pilih XFBML hehe .

4. Buka Dashboard > Design/Rancangan > Klik add a gadget/tambah gadget.

5. Pilih opsi HTML/Javascript.
6. Masukkan kode yang telah dicopy ke dalam kotak kode.
7. Save.
8. Like box telah siap digunakan, dan setiap pengunjung blog/website yang menyukai blog/website anda dapat dengan mudah meng-klik like pada like box yag telah disediakan.

Peringatan :

Kalau anda ingin supaya Like Box tadi melayang anda cukup menambahkan kode di bawah ini terlebih dahulu, apabila anda di suruh pastekan kode Like Box anda anda pastekan di sana.

<style type="text/css">

#topbar{

position:absolute;

left:20px;

border: 2px red;

padding: 2px;

background-color: #f2f2f2;

width: 320px;

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>

<div class="clear"></div>

<div id="topbar">

<div style="text-align:right">

<a style="color: rgb(255, 0, 0); font-weight: bold; font-style: italic;" href="" onclick="closebar(); return false"><span><button>Tutup(X)</button></span></a></div><a style="font-weight: bold; color: black(51, 255, 51);">

</a><p><a style="font-weight: bold; color: black(51, 255, 51);" title=""><h2><center>Sebelum tutup(x)Like dulu ya sobat.</center></h2></a>

</p>

<left><table style="width: 300px; height: 130px;" border="0"><tbody><tr><td style="vertical-align: top;">

<center>
PASTEKAN URL LIKE BOX ANDA DISINI

</center>

<p></p><p></p></td></tr></tbody></table></left></div>

Hasil Akhir

Apabila kepanjangan atau kurang lebar anda bisa merubah sesuai kebutuhan di script yang saya berikan.