Cara² Memasang Kotak Komen Facebook dan Blogger Dalam Blog

Sebelum nie memang dah banyak kali jumpa blogger² yang menggunakan kotak komen Facebook (FB) pada blog mereka. Bagi aku, penggunaan kotak komen FB tu memang la menarik. Tapi yang lecehnya, tak semua blogger² gemar nak komen kat situ. Lain la kalau ada kedua²nya sekali macam tutorial kotak komen Facebook dan Blogger yang aku nak buat ni. Kalau nak komen, kat mana² satu pun boleh. Pilih je mana yang nak.

Kotak Komen Facebook dan Blogger
Dah ada kedua² kotak komen ni. Senang la sikit nak pilih mana satu.

INFO : Bagi yang dah ada kotak komen Facebook sebelum ini. Sila remove dulu kotak tersebut sebelum apply tutorial ini.

Cara² nak memasang kotak komen Facebook dan Blogger ni.

1. Mula² sekali. Kena login Blogger.com dulu.
2. Kemudian klik pada bahagian Design > Edit HTML
3. Lepas tu, tick pada Expend widget templates
4. Untuk mengelak sebarang kesilapan semasa memasang code ini, sila Download Full Templates sebagai langkah keselamatan. Nanti kalau tak jadi. Hanya perlu Upload semula fail tersebut dan template anda akan kembali menjadi seperti asal semula.

5. Seterusnya, tekan CTRL+F (Find) untuk mencari code ini div class='comments' id='comments'>

6. Dah jumpa tu, sila copy code di bawah ni,

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

menjadi seperti begini;

<div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

*num_posts='2' = Nilai 2 adalah jumlah komen yang akan terpapar secara default pada kotak komen FB dibawah. Macam sekarang ni, saya dah tukar kepada 5.

*width='400' = saiz kotak komen Facebook.  Kat sini anda boleh adjust saiz tersebut mengikut saiz blog masing².


7. Langkah seterusnya, tekan CTRL+F (Find) untuk cari code ini, <head>

8. Pastekan code di bawah ini, selepas code tersebut (Langkah 7) .

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

9. Selepas itu, sila pastikan anda telah menukarkan YOUR_FB_ID dengan ID Facebook anda tersendiri. Kalau tak tahu macam mana nak cari ID tu. Buka Facebook anda dan tengok URL macam contoh ini; http://www.facebook.com/profile.php?id=1519803763. Haahhh .. yang hujung sekali tu la ID Facebook anda . Macam sekarang ini, ID saya adalah 1519803763.

OK, sekarang dah habis bahagian edit HTML. Seterusnya adalah langkah memasukkan code di dalam bahagian CSS pula.

10. Klik pada bahagian Design > Template Designer > Advanced > Add CSS

11. Copy code dibawah ini dan paste di dalam kotak CSS tersebut.

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

INFO :
Bagi blogger² yang menggunakan text warna putih, sila pastikan anda menukarkan warna backround kotak komen
.comments-page { background-color: #f2f2f2;}
dengan warna lain selain hitam dan putih. Tujuannya, untuk elak warna tulisan pada ruang komen tenggelam dalam warna backgroud. Contohnya; warna ini; #B9CACA. Kalau tak bersesuaian, sila gunakan code warna yang lain.

12. Lepas tu Save. Habisss !

p/s: Jika ada sebarang persoalan atau tak berjaya untuk apply tutorial ini di dalam blog anda. Sila emailkan kepada saya melalui email, anastasyea@gmail.com dan saya sedia membantu. (",)

*Dikemaskini : 15 Sep 2011, 15.39pm

Anastasyea : Senang je kan nak buat kotak komen Facebook dan Blogger macam ni dalam blog anda.

95 comments :

  1. tq kak...baru request semalam akak dah buatkan...perhhhh best la =))

    ReplyDelete
  2. cute jugak kotak komen macm nih.

    ReplyDelete
  3. wordpress mesti ada plugin ni .. nk buat ke tidak ..tp tengok mcm best je nih

    ReplyDelete
  4. npe sy buat die jdik atas bwah ek...tak jdi sebelah2..

    ReplyDelete
  5. Boleh tak email kat akak HTML code blog. Cara² ikut step ni. Email ada akak tulis kat post tu.

    LOGIN BLOGGER > DESIGN > EDIT TEMPLATE >
    Tick Expand Widget Templates
    Copy semua code template dan save kat notepad atau word. Nanti masa nak email semula .. attachkan sekali fail tersebut k.

    ReplyDelete
    Replies
    1. akak..sy xdpt buat pon :( lain jadi nyew..tlg lah buat kn utk sy plz

      Delete
  6. saya dah cuba

    terima kasih banyak kak

    ReplyDelete
  7. terima kasih kerana mengeluarkan tutorial ni kak, cuma aku ada sikit masalah, aku dah buat dan boleh buat komen FB ni..tp yang ini pla keluar selepas aku post komen..harap akak ble bantu sikit
    Warning: http://www.azizullemin.com/2011/09/indahnya-bersyukur.html is unreachable.

    ReplyDelete
  8. kalau saya nak kotak komen macam ini ada x codingnya ?? sbb yg ni lagi cun :D

    ReplyDelete
  9. salam...i've done it in my blog.thanks for the tutorial...hehehe ^.^

    ReplyDelete
  10. Kalau sebelum ni pernah buat kotak komen sytyle facebook atau lain2. Sila reset kembali ke template biasa sebelum edit guna cara ni =)

    ReplyDelete
  11. minat nak buat komen box macam ni, dah buat tapi tak berjaya.. mcm mana eik.. help me....

    ReplyDelete
  12. akak,dah banyak tutorial fy try tpi tak dpt juga :( knp ek? nak sgt buat ni. akak tolong tgk boleh?

    ReplyDelete
  13. @Fyfy Liew : Maaf la ye Fyfy. Akak tak pasti ttg masalah ini. Mungkin template blog Fyfy x sesuai kot. Nanti cuba lagi ye. Perhati betul2 code kat tutorial ni .. mungkin ada terlepas pandang. =)

    ReplyDelete
  14. sis, kalau id tu bukan number lagi, mn nk carik ye??

    ReplyDelete
    Replies
    1. ada tu .. cuba check betul2 .. =)

      Delete
    2. guna je perkataan tu, gua buat jadi je, cuma background takleh tukar, asyik cerah je, gua ni template gelap..waduh..sis tolong gua..help :(

      Delete
  15. thanks utk tutorial ni..saya dah buat ikut step ni, tp bila dah siap die keluar ni..

    The comments plugin requires an href parameter.

    maksudnye ape ye?

    ReplyDelete
    Replies
    1. Pernah jugak berlaku dekat saya sebelum ni semasa apply code tersebut. Rasanya boleh abaikan je kot. Kalau masih ada untuk post entry kedua, ketiga slps apply code tu. Nanti check balik code ni. Mungkin ada yg salah .. =)

      Delete
  16. dah dua kali try tapi tak berjaya

    ReplyDelete
  17. tak berjaya... dah buat tapi tiada apa2 perubahan...

    ReplyDelete
  18. owh,cantik jgk.. sy puunya lain mcm sikit..hehe.
    ada 1 soklan,mcmn nak buat "related post" kat bawah setiap entry tu ye? sy ada guna LinkWithin tapi blog berat & lambat loading..minta bantuan :)

    ReplyDelete
  19. nak tanya kalau guna tutorial ni komen2 yang lama kita ada lagi ke hilang?

    ReplyDelete
  20. Replies
    1. Pernah apply apa2 bentuk kotak komen sebelum nie tak ? Kalau pernah, cuba reset template blog. Mungkin boleh. Saya cadangkan supaya test dekat blog dummies dulu. Nanti kalau boleh, baru try apply kat blog sendiri.

      Delete
  21. Replies
    1. nak tanya, pernah apply kotak komen bentuk lain tak sebelum ni.

      Delete
  22. saya nak pasang kotak komen blog da facebook kat blog ..blog utk tugasan kursus.. sy tak brapa nak paham tutorial ... nak tanya, apa maksud " menjadi seperti begini"
    yang awak tulis tu... code yang pertama awak bg tu tatau hala tuju nak letak kat mana... code yang letak selepas head tu jelas.. bleh terangkan tak

    ReplyDelete
    Replies
    1. " menjadi seperti begini" .. kalau perhati betul2, saya dah warnakan dengan warna biru dan hitam,

      yg biru adalah code asal dalam blog, kalau awak search, mesti jumpa ..

      yg hitam adalah code yg diberikan dan ditambah selepas code biru tu,

      Jadi saya combinekan kedua2 code tersebut supaya memudahkan org lain faham, maka sbb tu, saya katakan " menjadi seperti begini". Harap awak faham ..

      Delete
  23. sengal ubi kayu.. dah buat seratus18 kali tak mao.. adakah boleh dikategorikan sebagai manusia berputus asa?
    bila nak paste code tu, kena enter dulu ke just paste after code yang kaler biru tu?
    ketensenan!

    ReplyDelete
  24. dah ikut semua arahan kat dlm tuto nie..tapi hasilnya hampeh bukan nak kata keluar perkataan fb.. tapi ape pun xnampak..betul x nie dah lebih 2jam duk buat xde hasil.. xde tuto lebih senang kew?

    ReplyDelete
    Replies
    1. Tutorial nie dibuat sebelum template blogger diupgadekan. Jadi sekarang saya tak pasti samada ianya boleh dipakai ke tidak .. harap maaf

      Delete
  25. saya buat dan menjadi...cuma kenapa keluar terlampau ramai sgt orang yg komen... Cuba tgk kat blog saya ni ----> http://math-pa.blogspot.com/2012/03/rindu-nok-kecek-gannu.html

    ReplyDelete
    Replies
    1. Salah tu, sepatutnya jadi seperti gambar diatas .. ^__^

      Delete
  26. Replies
    1. ID Facebook yg Zuhairy ambil tu betul ke ? Sila conform kan semula. Lagi satu, saya tak pasti samada tutorial nie, masih boleh digunakan selepas Blogger upgrade template nya tahun ni .. ^__^

      Delete
  27. This comment has been removed by the author.

    ReplyDelete
  28. The comments plugin requires an href parameter

    ReplyDelete
  29. This comment has been removed by the author.

    ReplyDelete
  30. macam ni,, caranya ialah... masa cari code NO.5 tu... dia ada 2/2 code pada kandungan HTML blog anda, so, pilih code yg kedua !... insyaAllah... pas tu... paste kan code d langkah NO.6 tu kat bawah code tu.. :)..

    ReplyDelete
  31. TERIMA KASIH SANGAT ya kak !... memang menjadi.. dlm bnyk2 trick.. trick n tutorial akak mmg TERHEBAT !!!!!!... 100 % WORKED ! sudi2 lah singgah blog saya ;)

    ReplyDelete
  32. tima kasih akak!!! sgt berguna!!! alhamdulillah

    ReplyDelete
  33. waaaaaa x jadi...nak nangis rasa

    ReplyDelete
  34. x menjadi jugak....plss bantu sis...

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
  36. sy punye fb dah bertukar jadi name. xde nombor2 tu. so cmne?

    ReplyDelete
  37. jadi pon ikot tutorial kat sini !
    kat tutorial blog laen sumer tak jd !
    huh!~
    thanz ! ! !~

    ReplyDelete
  38. pening kepala ikut step ni....akak boleh tolong buatkan untuk kita tak?...hihi...

    ReplyDelete
  39. ok kak. setelah mencuba beberapa kali, akhirnya berjaya!!!! YES!!!...TQ akak!

    ReplyDelete
  40. akak..
    yg pasal fb ID tu,sya tak dpt la kak..boleh tolong?

    ReplyDelete
  41. saya tahu pasal fb id walaupun sye baru 12 tahun..Kene klik at gambar fb yg ade pastu nnti ade huruf "id="dengn nombor2.Itu la fb ID

    ReplyDelete
  42. Replies
    1. Adik, tutorial nie dah lama, takut tak sesuai dengan template blog adik. Harap maaf ye !

      Delete
  43. Salam tasya..just nak tye...if dalam css dah ada code yang lain cmna yer?boleh di tambah di bawahnye or mcm mana?dah try delete code css sebelum nie..then widget tue x jalan..huhuh..please sharing if ada solution..thanks so much... :)

    ReplyDelete
    Replies
    1. Boleh tambah kat atas atau bawah. Macam saya, suka tambah kat bawah. Senang nak rujuk nanti. ;)

      Delete
  44. tidak menjadi..xkluar pon kotak tu di blog

    ReplyDelete
  45. saya dah tukar fb id ke pada nama jadi macamana nak masukan fb id? boleh bagi idea kat mana nak cari fb id dengan no tu?

    ReplyDelete
  46. halalkan ya ilmu yang diberi....realy works...tqvm

    ReplyDelete
  47. kalau dh tukr facebook ID kpd nama macm mane pulak ye?

    ReplyDelete
  48. tak jadi lagi pun buat ni..try lain lah

    ReplyDelete
  49. akak...t0l0ng sy buat ley x..plz..x dpt p0wn id fb tu....nak tg0k kat na??? :(

    ReplyDelete
  50. mcm ner nak buat nie sis?.. please tolong saya :(

    ReplyDelete
  51. sy xfhm sbnr nyew kod mmg dh adew tp kod 2 nk ltk kt anew ? CSS kew? Sy dh cube tp hampew d bwt nyew klau blh bg jew css fb 2 ata kt natashagadizsabah@gmail.com
    6ti sy copy paste jew coz sy xpndai wt sndiri hrp dpt mmbntu mksi....

    ReplyDelete
  52. Replies
    1. Tutorial tahun 2011 .. Ieta, mungkin sekarang dah tak releven dengan template blogger yang ada skrg. Apa-apa pun, cuba kaji dulu k. Mungkin ada salah mana-mana koding yang awak cuba apply.

      Delete
  53. terima kasih kak... 2013 pon still ok lagi guna....

    ReplyDelete
  54. This comment has been removed by the author.

    ReplyDelete
  55. mnjdi tpi fb je jadi.. bla bkak bahgian blog. .tkpe ape2 kotak komen pun tkde. . calour dh chg berbeza.

    ReplyDelete
  56. tq,, menjadi kak.. mula2 tu pening jgk.. btw terima kasih byk2..

    ReplyDelete
  57. saya buat tak jadi pon..
    http://biruhatimu.blogspot.com/

    ReplyDelete