Customize Design Facebook Like-Box Widget

Sohib mungkin bosan dengan tampilan facebook Like Box yang biasa dipasang di widget. Dan ingin mengubahnya agar lebih sedap dipandang oleh pengunjung blog/situs sohib. Ada beberapa cara untuk merubah design tampilan facebook like Box, tapi pada dasarnya hampir sama. Di sini akan diperinci menjadi 3 langkah sederhana merubah design tampilan Facebook Like Box.
Lihat contoh Widget yang ane pasang disamping kanan.

1. Api Key


• Sohib harus punya API Key (Application Program Interface) dari facebook yang bisa didapat di sini : http://developers.facebook.com/setup/ . Fungsi api key adalah agar layanan (src : facebook) bisa menerima aplikasi yang akan dipasang. Api key merupakan kunci agar bisa masuk ke pintu layanan dimana api tersebut disediakan (dalam hal ini : Facebook).
  
• Setelah masuk ke link di atas, isi formnya. Untuk mengisi url : harus diakhiri dengan ( / ) contoh : url : http://cu.cx.cc/.
  
• Selesai pengisian form lanjutkan ke security check, masukkan kode sekuriti yang muncul.
  
• Lalu masuk ke sini : http://www.facebook.com/developers/apps.php. Kdang halaman ini tidak bisa load, tapi tidak menjadi masalah, yang penting masuk saja ke laman tersebut yang berarti sohib sudah mengeksekusi api key yang dibuat.
  
• Copy atau catat semua info dari api key yang telah dibuat.
  


2. Fan Page ID / Faceebook Like-Box ID. Untuk mendapatkannya Masuk ke Facebook Page, Klik kanan pada photo profile, copy link location. Seperti gambar ini :
   
   Facebook fan Page ID.
   Maka akan didapatkan link seperti ini : http://www.facebook.com/album.php?profile=1&id=130629243644369. Yang bold adalah id page tersebut.


3. Selanjutnya Copy code di bawah ini di tempat/posisi/sidebar yang kamu sukai: (jangan lupa memasukkan API Key dan Facebook Like Box ID di tempat yang telah tersedia)
   
   
   <div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("MASUKKAN-API-KEY-DI-SINI");</script>
<fb:fan profile_id="MASUKKAN FACEBOOK-FAN-PAGE-ID-DI-SINI" connections="18" width="403" height="360" css="http://ap.iblogger.org/fbstyle/style.css?1"></fb:fan>
   
   Ket :
   connection : jumlah fan yang akan ditampilkan
   css : (source) sumber style.css yang telah ada
   Note :
   Jika Tidak sesuai dengan contoh yang saya kasih, Silakan download STYLE.CSS nya di sini --- DOWNLOAD --- dan upload ke root web anda (atau di manapun : file hosting yg support directlink). (penting: setiap ada perubahan terhadap css tersebut maka sohib harus menambahkan jumlah perubahan yang telah dibuat di akhir link dimana css tersebut berada. Seperti sohib lihat ada ( ?1 ) berarti telah terjadi perubahan 1x terhadap file css tersebut). Jika mau lihat contoh yang lain coba css sourcenya sohib ganti dengan ini : http://custome-like-box.zymichost.com/style.css?1 atau ini : http://www.daddydesign.com/wordpress/wp-content/themes/DD_Blog_1.0/style.css?7

Selesai.. Semoga bermanfaat. Jika ada kesulitan atau masukan silakan meninggalkan jejak satu atau banyak kalimat di kolom comment di bawah ini.. Wassalamualaikum ..