Written By jariliar on Thursday, February 21, 2013 | 6:24 AM

Cara Mudah & Praktis Membuat Fans page Facebook

Di Blog Tampilan Auto hidden

Cara Membuat Fans page Facebook Di Blog Tampilan Auto hidden / Tersembunyi. Fans fage facebook adalah salah satu widget favorit para blogger. kenapa tidak? karena dengan Membuat Fans page Facebook Di Blog akan menambah "reputasi" blog kita di Facebook.

Tampilan Fans page Facebook bisa Anda lihat keluar dan muncul pada samping kanan blog dan tidak mengganggu anda karena dengan klik exit maka kotak tersebut akan sembunyi di samping kanan. gimana minat tidak memasangnya ?!

Oke langsung saja Bagaimana Cara Membuat Fans page Facebook Di Blog Tampilan Tersembunyi, berikut caranya:

Pasang kode jquery ini pada template Anda dan letakkan pas diatas </head>

Berikut kodenya :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Kemudian setelah kode tersebut terpasang lalu langkah selanjutnya adalah pemasangan kode facebook fanpage pada widget dengan menambahkan gadget.

Silahkan menuju tata letak / Layout kalau dalam bahasa inggris

Tambah gadget dan pilih html/javascript

Lalu copy dan paste kode berikut :
<script src="http://infonetmu.googlecode.com/files/slidboxordinary.js" type="text/javascript"></script><div id="fbslidebox" style="position: fixed; width: 330px; overflow: hidden; bottom: 20px; right: 10px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO69tgjL8sEUs2gLrsQnAzgPG4CMGgzCJm_ht_f8vfNhRN7-9sBwWpibXdAeCy3th0mq6wfQjnoSS2mhVYqmstyS1LffQfYQrxhuYpj338Z7qdeb1xwYPIzWNxf1vy9Z5QDTIq5WSr8lT1/s0/bo-bg-html.gif") repeat scroll 0% 0% transparent; -moz-border-radius: 15px 15px 15px 15px; border: 2px solid rgb(17, 17, 17); display: block;">
<div style="width: 320px; padding: 10px; margin: 0pt auto; overflow: hidden;">
<a id="fbcloseslidebox" style="float: right; color: rgb(153, 153, 153); padding: 0pt 3px; border: 1px solid rgb(204, 204, 204); text-decoration: none; font-size: 9px; font-family: Verdana,Geneva,sans-serif;" href="http://www.blogger.com/post-create.g?blogID=4155701203275692831#">Exit</a>
<strong style="color: rgb(102, 173, 61);">Jangan Lupa Klik Like Ya</strong>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FInfonetmu&width=300&height=290&colorscheme=dark&show_faces=true&border_color=ff0000&stream=false&header=true&appId=287998221248983" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowtransparency="true"></iframe>
</div></div>

Kemudian save

Catatan : Ganti kode yang berwarna biru dengan kode frame yang kamu dapat saat membuat fanpage facebook. Bagi Anda yang belum punya kode warna merah tersebut silahkan menuju facebook dan buat fanpage terlebih dahulu.

1. Langkah pertama Anda login terlebih dahulu di account Facebook Anda :
2. Lalu buka halaman : Facebook Page
3. Pilih/klik opsi Merek atau Produk

4. Pilih opsi no.1"website" dan isikan no.2"nama Page" sesuai dengan yang anda diinginkan. centang "Persetujuan" dan klik "Mulai" :

5. Kemudian masuk ke halaman Facebook Page yang Anda telah buat. 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.

CATATAN : Sebelum lanjut langkah berikutnya, copy url Facebook Fan Page yang telah Anda dibuat. Fungsinya sebagai spesifikasi url untuk like box yang nantinya hendak dibuat.

Contoh url-nya: http://www.facebook.com/pages/K-T-B/300432780037612

6. Kemudian Anda pilih menu nomer 5 dan klik "add like box" atau bisa dengan membuka halaman : Like Box

7. Selanjutnya, isikan spesifikasi :

Setting Facebook Like Box:

1. Facebook Page url: paste url Facebook Page yang di copy tadi

2. Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget pada blog Anda.

3. Height: adalah tinggi like box, sesuaikan juga dengan widget pada blog Anda.

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

5. Show Faces: Centang bila anda ingin menampilkan foto profil likers.

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

7. Show stream: Centang bila anda ingin menampilkan informasi/posting terakhir di like box.

8. Show header: Centang bila anda ingin menampilkan tulisan header "Temukan kami di Facebook".

Lihat preview tampilan :

8. Kemudian setelah settingan yang dibuat sudah selesai, klik Get Code. setelah itu akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, XFBML dan IFRAME pilih salah satu dan copy kodenya. (Untuk Blogger, disarankan pilih HTML 5).