Dah mula dapat request untuk Facebook Like box yang ada kat blog ni. Jadi tutorial ni untuk mereka yang berminat di luar sana. Aku dah buat eksperimen dengan pelbagai jenis Facebook Like dan tak perlu cakaplah betapa pentingnya Facebook Like box ni. Ni antara apa yang aku dapat simpulkan:
- Kedudukan box yang berada di bawah tajuk entri adalah yang paling senang di klik. Satu trick untuk dapat banyak fan kat fanpage adalah dengan meletakkan like box/text untuk Facebook page blog anda dan bukan untuk entri tersebut.
- Like box yang nampak lain daripada yang lain dan menarik adalah paling efektif. Sebagai contoh, like box yang ada dalam tutorial ni.
- Untuk dapatkan banyak like, entri anda mestilah memberi faedah kepada pembaca. Samada ianya kelakar, benar, menghiburkan atau apa sahaja. Asalkan menepati citarasa pembaca, mereka akan tekan butang like tersebut.
CSS
Gunakan plugin Firebug untuk kerja mengedit CSS box tu.
.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:500px; /* boleh ubah ikut width text area blog anda */
margin-left: auto;
margin-right: auto;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 10px;
width:349px;
height:24px;
background:url("http://lh5.ggpht.com/_u4gySN2ZgqE/TJ3dpjy9PaI/AAAAAAAABr0/PTUXIS8ykps/fblogo%5B3%5D.jpg") no-repeat scroll left top transparent;
}
.fb_like_top a {
height:24px;
width:114px;
background:url("http://lh6.ggpht.com/_u4gySN2ZgqE/TJ3do-mtwuI/AAAAAAAABrw/NXxp85pCaD0/beafan%5B3%5D.jpg") no-repeat scroll left top transparent;
display:block;
margin-left:385px; /* adjust kalau width atas tadi berubah */
text-indent:-5000px;
}
.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:475px; /* adjust kalau width atas tadi berubah */
height:35px;
}
WordPress
Buka single.php dan paste dalam loop. Masukkan URL Facebook page anda.
<div class="fb_like_box"> <div class="fb_like_top"><a rel="nofollow" href="URL Facebook Page anda">Be a Fan</a></div> </div> <div class='fb_like_button_holder'> <iframe src="http://www.facebook.com/plugins/like.php?href=<!--?php echo urlencode(get_permalink($post--->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;"></iframe> </div> </div>
Blogger
Masuk ke Edit HTML Blogger>Expand Widget Template dan paste code ni bawah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <div class='fb_like_box'> <div class="fb_like_top"><a rel="nofollow" href="URL Facebook Page anda">Be a Fan</a></div> </div> <div class='fb_like_button_holder'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/> </div> </div> </b:if>
Source: Blogger Plugins
***
Kalau ada kemusykilan apa-apa, tinggalkan kat ruangan komen. Mungkin ada theme Blogger yang tak compatible dengan method ni (tak tahu kenapa..), jadi pastikan dah buat back up untuk theme lama sebelum mula kerja mengedit. Semoga berjaya.
Premium Sponsor
Comments
35 responses to “Tutorial Facebook Like Box Yang Cun”
[…] other type of themes, please refer tutorial from Ariffshah.com innity_pub = "077e29b11be80ab57e1a2ecabb7da330"; innity_cat = "MALAY,YOUTH"; innity_zone […]
tak boleyh buad pown ~ waaa ! tolong boleyh ? enth pa pe jer dy kuar ~
kalau letak kat single.php tu, mana nak cari section loop dia eh? sori. serius tak tahu
Boleh tengok kat sini. Aku pun tak pro sangat sebab aku guna hook, kiranya theme aku ni dia dah setkan mana nak letak. Lebih senang. Nak belajar lagi boleh tengok sini dan mungkin benda ni boleh letak kat /div untuk class=entry.
Dan mungkin aku silap.. haha.. trial and error. That’s the best learning process.
xjmpe la
lawa jugak..
fanpage ok gak.
baru buat page. nak try yg bro cakap ni lak. thanx bro.
Dah cuba tapi tak dapat buat… :-(
dia jadi macam mana?
ooo, ini rupanya, cun la bro.
aku bookmark dulu, ;)
baru perasan kotak ni..besar gak..eh, tulisan kat blog ni pun cam dah dibesarkan je.. ke aku yg tekal CTRL +.. mcam tak tekan.. hehe
dah try, tapi senget pulak..
dah tengok.
dalam blog, pindahkan satu sebelum div class=fb_like_button_holder ke bawah.
ok, settle :)
nice..
menarik jugak ni, tapi lagi gempak kalau fb fanpage tu ditukarkan kepada feed burner ;p
cun jugak yang ni
nanti boleh try
tq bro
thanks aried…menarik nie….boleh cuba….
fshare ngan flike ni sama ker.. selalunya bila org klik like.. share tu pun kira gak..
yeah. Facebook jadikan sama. Cuma like tu keluar text kecik je..
like box ni nampak mencapub. makin ramai yang nak tekan like… :D
dah datang seru nanti buat lah.
thanks for sharing ! :)
hohoho menarik gak idea ni.. hehe boleh adjust sikit ni.. terima kasih :)
pernah jugak nampak sebelum ni..tapi tak pernah try lagi
memang lawala facebook like box ni..
Wah… Terbaik bang! Thanks!! :D
Best ne ,minta izin nak copy paste masuk lam notepad satge nak try ne …marveleous
Sila2.. no hal.
Nice.
Eh, yang become a fan tu link pada fan pages kita la kan?
yep. tapi kalau nak letak blog ni punya fanpage ok gak :D
menarik ni, boleh tingkatkan bilangan like, lagipon menarik dia punya box. huhu
lawa jugak..
nice.. =)
hehe..bnde ni mmg bgus, sbb tu msti ada..mcm aku kt single post xltk bnde ni, dlu mmg igt nk ltk tp nk buat yg bru..jdilah mcm yg skrg ni..kt post aku ada butang like fanpages..hehe