Ubah Penampilan Widget Facebook Fanpage

Kongsi:

facebook fanpage Ubah Penampilan Widget Facebook Fanpage

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 icon smile Ubah Penampilan Widget Facebook Fanpage

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.

 

custom facebook fanpage Ubah Penampilan Widget Facebook Fanpage

+ 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.

 

custom facebook fanpage2 Ubah Penampilan Widget Facebook Fanpage

+ pastikan no ID dan direktori style.css betul

 

Sekarang fanpage blog korang akan jadi seperti ini:

custom facebook fanpage4 Ubah Penampilan Widget Facebook Fanpage

+ 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:

custom facebook fanpage3 Ubah Penampilan Widget Facebook Fanpage

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..

Ruang Sembang

  1. says

    thnks bro ats tutor nie..dh lame aku carik..aku pernah jmpa nie kt 1 blog bi tp aku xpaham die pnya explaination..ko pnye explaination simple..dah jadik aku bgtaw..hope jadik la :D

    • says

      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.

      yg tu cmne bro..aku tersangkut kt cnie plak..adess

    • says

      mcm ni.. lepas kita paste kod css tu ke dlm style.css, kita akan pakai nilai css?1. Kalau kita ada buat apa2 perubahan pada kod css fanpage, nilai 1 tu kena tukar, ikut berapa kali kita ubah dan update kod css. Kalau kita ubah kod css tu 3 kali, nilai css tu jadi css?3.

      tapi perlu di ingat, nilai tu hanya kita tukar kalau kita ubah kod css utk fanpage, kalau ubah kod css lain x payah tukar nilai 1 tu..

      kalau tak fhm lagi, aku tak tau dh nak explain macam mana, aku sendiri pun tak tau nak explain benda ni dengan ayat yang mudah :)

    • says

      oh tp asal xjadik ek bro..xkuar pape..dan utk tmbahan bro aku gune thesis theme..huhu..aku paste dkt custom.css

    • TarmiziShukri says

      Lepas masukkan css untuk fanpage tu, nilainya still css?1, editing sebelum tu tak dikira. Nilai css?1 hanya perlu diubah kalau ikhwan edit css untuk fanpage sahaja, kalau ikhwan edit css untuk sidebar ke, header ke, nilai css?1 tu tak perlu tukar walaupun css untuk header, sidebar dan fanpage dalam satu fail yang sama iaitu style.css

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge