Tutorial Facebook Like Box Yang Cun

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

Blogger yang juga seorang engineer atau engineer yang juga seorang blogger. Graduan Universiti Penerbangan Moscow, Russia. Bukan Russian spy.

35 Comments