Salam 1Malaysia..
Aku pasti ramai yang baca blog ni ada blog sendiri dan masing-masing mempunyai facebook fanpage sendiri. Bagi yang tak ada lagi, aku galakkan korang buat fanpage untuk blog korang, tapi pastikan blog dah ada pembaca tetap. Kalau blog baru sehari rasanya tak perlu kot fanpage..hehe..
Siapa-siapa yang tak ada fanpage tu bolehlah rujuk entri “Tutorial Cara-Cara Membuat Fan Page Di FaceBook” di 2dayblogger.com.
Untuk entri kali ni, aku akan tunjuk l cara-cara nak “”customize” atau ubah penampilan widget fanpage supaya lebih menarik. Lama dah aku nak customize’kan facebook fanpage ni, tapi tak tau nak mula kat mana. Godek-godek kat google, akhirnya aku jumpa caranya.
Sebenarnya idea ni tercetus lepas tengok facebook fanpage widget blog ariffshah. So thanks sifu 
Langkah 1:
Tutorial ni senang je. Pertama sekali, copy script faceboook fanpage ni.
<script type=”text/javascript” src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US”></script><script type=”text/javascript”>FB.init(“1690883eb733618b294e98cb1dfba95a”);</script><fb:fan profile_id=”facebook fanpage ID korang” stream=”0″ connections=”8″ logobar=”0″ width=”260″ height=”200″css=”http://blogkorang.com/wp-content/themes/nama_theme/style.css?1″></fb:fan>
Script kat atas korang boleh customize ikut kesesuaian, contohnya connection aku letak 8, kalau rasa sikit sangat, korang letaklah 80..hehe.. Width dan height tu korang adjust ikut width sidebar blog korang. Pastu perhatikan pada css=”http://blogkorang.com/wp-content/themes/nama_theme/style.css?1″></fb:fan>. Perasan tak css?1 tu. Nombor 1 tu korang kena ubah ikut berapa kali korang update style.css. Kalau korang dah update style.css tu sebanyak 5 kali, so tukar 1 tu kepada 5. Kalau tak widget facebook korang takkan follow setting yang dekat css.
Lagi satu, script kat atas tidak menggunakan link fanpage, tapi menggunakan fanpage ID. Macam fanpage TarmiziShukri’s Blog, aku dah tukar ID tu kepada nama, so bila korang nak pegi fanpage TarmiziShukri’s Blog, korang cuma perlu taip fb.me/tarmizishukriblog. Masalah kat sini, macam mana nak dapatkan ID tu? Ok, senang je, apa yang korang perlu buat ialah mouseover pada gambar profil fanpage, fanpage ID akan terpapar pada bahagian bawah kiri browser, dalam kes ni, aku pakai Chrome, Firefox pun sama kot.
+ taip no ID dalam notepad
Salin no ID tadi, dan masukkan dalam script facebook fanpage. Lepas tu korang tukar “css=”http://blogkorang.com/wp-content/themes/nama_theme/style.css?1″></fb:fan>” ikut direktori style.css blog masing-masing. Sekarang masukkan script kat text widget.
+ pastikan no ID dan direktori style.css betul
Sekarang fanpage blog korang akan jadi seperti ini:
+ widget facebook fanpage yang telah diubahsuai
Langkah 2:
Habis bahagian pertama, sekarang kita pegi ke bahagian kedua pulak. Dalam bahagian kedua, fanpage widget tadi akan di “style”kan menggunakan CSS. Apa yang korang perlu buat ialah, copy script css di bawah, lepas tu paste ke dalam style.css.
/*fanpage box*/
.fan_box a:hover{
text-decoration: none;
}
.fan_box .full_widget{
height: 200px;
border: 0 !important;
background: none !important;
position: relative;
}
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
display: none;
}
.fan_box .connect_action{
padding: 0 !important;
}
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #fff !important;
}
span.total{
color: #fff;
font-weight: bold;
padding-top: 5 !important;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: “lucida grande”,tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #fff !important;
padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0;
left: 2px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
Save style.css dan hasilnya seperti dibawah:
Korang boleh ubah penampilan facebook fanpage ikut kreativiti masing-masing. Tapi seperti yang aku bagitau awal-awal tadi, pastikan nilai …css?1 diubah bergantung kepada beberapa kali korang edit kod CSS fanpage.
****
Amacam? Nampak lebih kemas kan? Kalau ada soalan, silalah bertanya ya, jangan malu-malu..hehe..
Related posts:
24 Comments to “Ubah Penampilan Widget Facebook Fanpage”