Tutorial Membina Facebook Like Box Yang Awesome

Okey guys. Sekarang mana-mana blog yang kamu lakukan blogwalking atau website yang kamu lawati memang tak lengkap kalau tak ada Facebook Like button. Apa gunanya atau fungsi bagi butang ni sebenarnya sampai orang serius benar nak pasang termasuk la owner blog cerita terbaru aku dot net ni?

Pasang sebab tak nak kalah dengan orang lain dan kononnya kalau tak pasang, blog lu tak trendy macam orang lain la dol! Sebenarnya memang banyak alasan kenapa butang suka ni menjadi kewajipan pada para blogger untuk ada dekat blog selain daripada twitter. One of the reason why it is, aku dapat rasakan untuk memberi kepuasan dan salah satu case study untuk melihat habit manusia berkenaan sifat pembacaan. Yela, manusia ni banyak ragam dan perangainya. Lu rasa artikel lu sangat best dan kelakar pecah perut tapi readers lu langsung rasa tak sependapat dengan lu. Apa hal ni mat? Lu perasan lebih je ni. Jadi buat apa nak bagi ibu jari suka kan?

As we know juga, sekarang ni design butang facebook like dah ada banyak version. Ada kecil, ada yang comel dan macam-macam lagi la. Tapi kali ni aku nak kongsi sama kamu semua salah satu design yang awesome serta lain daripada yang lain. Contoh butang yang aku nak ajar seperti gambar di bawah dan amat sesuai di pasang pada end of the artikel. Supaya senang orang nak like after reading. Make sense right?

Kamu berkenan dengan design ni? Nak melamar dan menyunting design ni dekat blog kamu? Kalau jawapannya adalah ya, kita boleh la mulakan pembelajaran dengan subjek yang dikenali sebagai HTML Class 101. Hermp. Macam familiar je kan? In before dalam kelas yang sama kita pernah belajar berkenaan cara membina twitter status dekat header blog.

Mula-mula sekali dengan menggunakan plugin firebug untuk browser Mozilla, sila edit CSS untuk box tersebut dengan memasukkan kod dibawah:

CSS

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

Untuk Blogspot, sila masuk ke Edit HTML Blogger>Expand Widget Template dan paste code ni bawah <data:post.body/>

Blogspot

<b:if cond='data:blog.pageType == "item"'>
<div class='fb_like_box'>
<div><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>

Untuk WordPress, buka folder template yang kamu pakai dan cari dokumen single.php dan sila copy kod dibawah ini dan paste dalam loop. Masukkan URL facebook page kamu.

WordPress

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

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. Jadi sekarang ni, kamu semua harus mengucapkan terima kasih kepada cikgu ariffshah sebab sudi mengajar kita semua berkenaan silibus ni. Semoga berjaya.