How To Build Custom Fans Facebook

Artikel info kali ini Koben akan membicarakan mengenai bagaimana cara membuat tampilan fan facebook berbeda alias customized. Secara default hanya terdapat pilihan opsi light & dark saja. Sekarang kita akan buat gimana menerapkan supaya tampilan fan-facebook bisa kita sisipkan background dan beberapa customize lainnya. Temanya saja sudah fans FB, ya kalian harus sudah punya dulu dong. Kalau belum punya silahkan baca cara bikin fans facebook.
Sebenarnya Beben cuma mau memperjelas saja tutorial how to build custom facebook fan box :D Biarin sedikit basi juga yah bro and bri ;)) Siapa tahu penjelasan ane lebih masuk ketimbang penjelasan² yang sudah ada :D Pasti source yg aku tawarkan mumpuni punya deh.

Demo Custom Fan Facebook

Perhatikan struktur berikut

<div style="padding:5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhanSJw-7Egchc7aIArbrjTq0dil3Cz2EGePtZ6mdaoOD_IL-A2_YglVnqksWsYdQYvx1K0Vo0dTriPRhmIPXrvMGD-YBHafFDMa6_JGXyYGwGdLtTsiw8peCGjJT5yuJNbVikg1i0FnuKD/) repeat;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow:inset 0 0 0px #333;-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inset 0 0 3px #333;width:290px;height:205px">

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript">
</script>

<script type="text/javascript">
FB.init("ISIKAN DENGAN KODE App Secret KALIAN");
</script>

<fb:fan connections="10" css="https://sites.google.com/site/misstemplate88/fanboxstyle.css" height="205" logobar="0" profile_id="ISIKAN DENGAN ID PROFILE KALIAN" stream="0" width="290" class=" FB_fan FB_ElementReady">
</fb:fan>

</div>

Fokuskan perhatian pada tulisan kode berwarna. Kode External Style Sheet itulah code ramuan ajaib agar dapat melakukan hal ini :P Daleman isi coded CSS tersebut bisa kalian rubah lagi apabila warna link kurang sesuai. Ingat hanya warna dan jenis font yg boleh dirubah ya!!!

Coded CSS Facebook Fans Box

/* 
Created by: Miss Rinda
URI: http://rindastemplates.com/
Developer by: Mr Beben
URI: http://beben-koben.blogspot.com/
DO NOT REMOVE MY LINK. YOU JUST ALLOWED TO CHANGE FONT & COLOR.
*/

.fan_box a:hover {
 text-decoration: none;
}
.fan_box .full_widget {
 height: 200px;
   padding-left: 5px;
 border: 0 !important;
 background: none !important;
 position: relative;
}
.fan_box .connect_top {
 background: none !important;
 padding: 0 !important;
}
.fan_box .profileimage {float: left;width: 40px;height: 40px;padding: 0 5px 0 0;margin: 0 0 1px 0}
.fan_box .connect_action {padding: 0 0 0 8px}
.fan_box .connect_action .name {line-height: 15px;font-size: 12px;font-style: normal;color: #000;font-family: Arial,Serif,Tahoma}
.fan_box .connect_action {padding: 0 !important;}
.fan_box .connections {
 padding: 0 !important;
 border: 0 !important;
 font-family: Tahoma;
 font-size: 11px;
 font-weight: normal;
 color: #000;
}
span.total {color: #000;font-weight: normal;}
.fan_box .connections .connections_grid {padding-top: 5px !important;}
.fan_box .connections_grid .grid_item {padding: 0 7px 0px 0 !important;}
.fan_box .connections_grid .grid_item .name {
 font-family: Arial,Serif,Tahoma;font-size: 9px;
 color: #000 !important;
 padding-top: 1px !important;
}
.fan_box .connect_widget .connect_widget_text {padding: 0}
.fan_box .connect_widget td.connect_widget_vertical_center {height: 20px}
.fan_box .connect_widget td.connect_widget_vertical_center a.connect_widget_like_button {margin-right: 7px}
.fan_box .connect_widget .connect_widget_interactive_area {margin: 5px 0 0}
.button_count a.connect_widget_like_button {padding: 2px 4px}
.button_count a.connect_widget_like_button span {line-height: 14px}
a.connect_widget_like_button:hover {text-decoration: none}
.connect_widget_number_cloud {background: #666;border: 1px solid #000;height: 24px;padding-top: 5px;text-align: center}
.connect_widget_like_button .corner {background-image: url(http://static.ak.fbcdn.net/rsrc.php/v1/zb/r/L6P2fymQtet.png);height: 6px;width: 6px;display: block}
.connect_widget_like_button .topleft {top: -6px;left: -3px}
.connect_widget_like_button .topleft .corner {margin: 0}
.connect_widget_like_button .topright {top: -6px;right: 0}
.connect_widget_like_button .topright .corner {margin: 0 0 0 -3px}
.connect_widget_like_button .bottomright {bottom: 0;right: 0}
.connect_widget_like_button .bottomright .corner {margin: -3px 0 0 -3px}
.connect_widget_like_button .bottomleft {bottom: 0;left: -3px}
.connect_widget_like_button .bottomleft .corner {margin: -3px 0 0 0}
.connect_widget_like_button .liketext {color:#000;display:block;padding-left: 17px;background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zb/r/L6P2fymQtet.png) -1px -33px no-repeat;white-space: nowrap}
.connect_widget_like_button .fbLikeButtonTrackingPixel {display: inline;height: 0;width: 0}

Hostingkan seluruh CSS diatas. Gantikan link CSS https://sites.google.com/site/misstemplate88/fanboxstyle.css dengan hasil karya kalian masing² :)
Resource by: http://www.rindastemplates.com/2011/06/stylish-facebook-fan-page.html
Bila sobat ingin tahu lebih banyak mengenai custome sekitaran facebook, silahkan mampir disini Daddy Design.

Ekstra explanation:
ISIKAN DENGAN KODE App Secret KALIAN
Go to Facebook Developers and look App Secret

ISIKAN DENGAN ID PROFILE KALIAN
Dibawah App Secret dua jajar, ambil saja deretan angka yg paling dibelakang :D
Semoga bermanfaat :)
Happy FB Fanz \m/