Friday, 4 November 2011

Tutorial letak komen Facebook di blog (Senang punye..hehe)

Assalamualaikum dan Salam 1 Malaysia


First sekali aku nak ucapkan berjuta lemon terima kasih dekat Abang tampan ni sebab tak serik serik tolong aku dalam buat tutorial ni.. Siyes! tengok nampak macam susah. bila dah buat slow slow and bila dah siap, kalian mesti menjerit suka giler macam aku jerit.. haha.



Komen FB sebelah komen blog
korang boleh pilih nak komen dekat mana2 pun korang nak
Bagi aku, ni memang yang best, smart dan simple..

Ini memang bagus untuk kalian yang tiada blog tapi nak komen :)

Kita mulakan dengan membuat Tab dulu dan pergi pada templete  > Edit HTML > klik expand widget template...Jangan Lupa untuk backup template korang...Tekan ctrl F dan cari kod ini  class='comments' dan bila da jumpa paste kod ini dibawahnya

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


Da settle tu kita create tab pages pulak...selang sebaris dari kot yang atas tadi korang paste kod ni dekat bawahnya

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

Dekat kod diatas width dia da ditetapkan pada '400' dan ini boleh ditukar mengikut kesesuaian blog masing-masing.

Okay tinggal 2 step je lagi nak abis iaitu scripting and style dan untuk nie menggunakan crtl F korang search kod nie <head> dan bila dah jumpa paste kod ini dibawahnya.

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


script nie penting untuk membuatkan tab tadi berguna dan 'YOUR_FB_ID' tu tukarkan pada ID facebook anda..Kalau tak tahu cara nak dapatkan ID FB korang leh klik :
Profile FB > Profile Picture > album > amik code seperti yang di highlight (dekat URL).


Last step adalah memasukkan style tab korang.Dengan menggunakan ctrl F sekali lagi cari kod #comment dan paste kod ini diatasnya.

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



DONE!! :D

Mudah kan.. hehe. Fyi, benda ini ada kelemahan juga.. kalau kalian klik main address (http://belogkayangan.blogspot.com/), benda ini tak kan keluar tapi kalau klik setiap entry (http://belogkayangan.blogspot.com/2011/11/i-need-someone-like-youoh-samtsui.html), benda ini akan ada :)
Tapi jangan risau.. Kalian kan selalu ping specific entry..so benda ini akan keluar :)  


ok daa~
p/s : Selamat mencuba ye semua.. best pulak bila kita dapat tolong orang ni :)
kalau ada kemusykilan boleh tanya dengan senang hati dekat aku atau abang tampan ini :)

update : maaf, aku dah tak pakai cara macam ni. tapi kalau kalau kalian nak cuba bolehlah :p


38 comments:

  1. haha,ada lagi cara lain jugak,tapi dah lupa.

    perghhhhh tabik!

    ReplyDelete
  2. madi : fsa jumpe care ni, try pastu rasa senang.. share.. hehe

    ReplyDelete
  3. nanti ada masa azzah cuba..thanx BK

    ReplyDelete
  4. azzah : cube jangan tak cube.. hehe

    ReplyDelete
  5. ambOi..rjin buat tutorial sekarang ye :D

    ReplyDelete
  6. ctk : hehe.. rasa2 macam bagus untuk di kongsi, kita kongsi :)

    ReplyDelete
  7. huhu..teror la dye kasi tutorial..wee

    ReplyDelete
  8. wahi : ade sumber boleh la kan.. hehe

    ReplyDelete
  9. Rasa nk buat , tpi asal nmpk mcm payah gle .. :P

    ReplyDelete
  10. bhaihaqi : nampak je macam susah.. tapi kalau buat slow2 senang je.. hehe

    ReplyDelete
  11. erh awak sane sini awak wish congret. saya nak ckp congret jugak. hehheh^^

    ReplyDelete
  12. nanti bila nak padam balik,,mesti blur heheheh:)

    ReplyDelete
  13. stalker hebat : terima kasih :)

    yen : thats why kena backup dulu.. kalau ade papae jadi boleh pakai balik backup tu.. hehe

    ReplyDelete
  14. terima kasih nafisah !! :) nk cuba juga lah.

    ReplyDelete
  15. nak cuba try test tengok arr..hehe

    ReplyDelete
  16. ouh bgus nie!!

    tp mcm srbut ngehee~

    ReplyDelete
  17. awak, kat edit url sy, sy tekan ctrl then tekan #comment xde pun . die xjumpe . how ?

    ReplyDelete
  18. hafizah : awak kena tekan ctrl + f baru jumpa :)

    ReplyDelete
  19. nice tuto.. nak try tapi aku lemah la bab bab koding ni.. takut web aku damage.. dah pernah kena beberapa kali..

    pingin mau letak deh..

    ReplyDelete
  20. owh
    den malas letak sebab pening
    hehehe

    ReplyDelete
  21. i bookmark this entry now :)
    and i'll try it soon..although i'm not too smart at coding these..hehehe.

    ReplyDelete
  22. waa. dah rajin buat tuto. syabas! syabas!

    ReplyDelete
  23. entry yang bagus... terima kasih atas tips yg diberi..

    terima kasih sudi follow blog saya. maaf atas kelewatan membalas kunjungan serta mem-follow blog kamu.. harap terus berhubung ya.. salam lebaran n salam berkarya...

    ReplyDelete
  24. mcm2 sekarang ni.. tp sy ni buta coding.. hahah

    ReplyDelete
  25. waaaa
    sagt ajen die buat tuto blog
    guuuddd!
    maceh deaaa! =]

    ReplyDelete
  26. gudlak untuk semua yang ingin mencuba ni :)

    ReplyDelete
  27. thankz dear...
    baru tahu mana nak cri fb id...
    akhirnya...
    terima kasih banyak2 eh...
    hehehehh

    ReplyDelete
  28. munnafendy : memang menarik pun.. hehe

    ReplyDelete
  29. hohoho, thanks ya..tambah 1 benda baru di blog kami.. ^_^

    ReplyDelete
  30. hohoho, thanks ya..tambah 1 benda baru di blog kami.. ^_^

    ReplyDelete
  31. lastly jd mcm ni..adoiyai... :')

    ReplyDelete
  32. assalam, sye da cuba tutorial ni, tp masalh ny kotak komen tu ndak tebuka yg ada arahan cm ni "The comments plugin requires an href parameter" pe maksud ny ea. .. .bule tolong kerr ???

    ReplyDelete