Cara Letak Kotak Komen Facebook di blog


Note : Entry ni dibuat sebagai penambah baik entry tutorial sebelum ni ( Letak kotak komen facebook tanpa buang kotak komen blogger / blogspot ) . So, Kepada yang dah ada letak kotak komen facebook dan ingin mencuba tutorial ini pula, sila buang semua code FB comments yang sedia ada.

Cara-cara letak kotak komen Facebook di blog:

1. Pergi ke bahagian Design > Edit HTML

2. Tick atau tanda pada Expend widget templates
Note : Sila Download Full Templates terlebih dahulu sebagai langkah keselamatan.

3. Kemudian tekan CTRL+F (Find) untuk mencari code ini < div class='comments' id='comments'>

4. Copy code di bawah ni dan paste kan selepas perkataan < div class='comments' id='comments'> yang korang jumpa tadi.

<div class='comments-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' 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='comments-tab inactive-select-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");'

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='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='5' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

*num_posts='5' = Nilai 5 merupakan jumlah komen yang akan terpapar secara default pada kotak komen FB 

*width='400' = Ini merupakan saiz kotak komen untuk Facebook comments box.  Korang boleh adjust saiz tersebut mengikut kesesuaian blog masing-masing.

5. Tekan CTRL+F (Find) untuk cari code <head> , Kemudian Copy dan Pastekan code di bawah ini, selepas code tersebut (<head>) .

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

Note : Pastikan korang menukarkan YOUR_FB_ID dengan ID Facebook korang tersendiri. Korang boleh dapatkan ID Facebook korang dengan cara Sign In ke Facebook korang dan tengok URL di bahgian profile macam contoh ini; http://www.facebook.com/profile.php?id=1234567890. Nombor yang dihujung sekali tu la merupakan ID facebook korang, cam dalam contoh tu 1234567890 merupakan Id facebook yang diperlukan untuk tutorial ini.

6. Copy dan paste code dibawah ke bahagian CSS 

.comments-page { background-color: transparent;}
#fb-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #cfe2f3; -moz-border-radius: 10px 10px 0px 0px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-goog-ms-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;  }
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #F0F8FF;}

Untuk step ini ada 2 cara yang korang boleh buat


 a ) Korang Copy dan paste code diatas sebelum perkataan ]]></b:skin> (di bahagian Design > Edit HTML)
ATAU

 b ) Korang pergi ke bahagian  Design > Template Designer > Advanced > Add CSS dan pastekan code tersebut di dalam kotak css tersebut.

 
Makluman : 
Sila adjust background color mengikut kesesuaian blog korang. Cam saya ni saya guna warna biru .

7 . jangan lupa save!!!

Sumber Rujukan: Sini & sini 

24 comments:

  1. apa kelebihan guna kotak komen Fb ni ya... ;)

    ReplyDelete
  2. Assalam Ana..acik x pandai nak buat tu semua..pening..he he
    selalunya hero bungsu acik je yang buat benda2 macam tu.

    ReplyDelete
  3. x jpe pon < div class='comments' id='comments'>

    ReplyDelete
  4. wei...bile aok balik? x de kemajuan lagi blog keh ni... gwano nk stat kelas alam maya ni

    ReplyDelete
  5. balik r cepat skit, x bergerak lagi blog keh ni

    ReplyDelete
  6. kalau guna username macam mana nak dptkan id tu ?

    ReplyDelete
  7. huhuuh..dah try buat, tapi tak berjaya..takde apa2 yg keluar, masa save takde error..huuh..

    ReplyDelete
  8. nak tny, masa install komen facebook ni, dah install threaded komen yer?

    ReplyDelete
  9. Thanks.. Nanti nak cuba lah.. :)

    ReplyDelete
  10. ok, dah jadi..rupanya saya tersilap paste code tu..hohoho..thanks yer..

    ReplyDelete
  11. ohh lala penat lah bt benda ni..
    asal tak menjadik pon :(

    ReplyDelete
  12. terima kasih... tahukah anda, saya mencari tutorial ini selama 6 hari... tapi ni paling berkesan. thanks banyak2!!!!!

    jom pergi tengok. :P

    ReplyDelete
  13. tak timbul-2 pon :( tolong sy !!
    fb id tuh nak ambik mcm mane ea? nih sy pye url :

    " http://www.facebook.com/norazmira94?ref=tn_tnmn "

    ReplyDelete
  14. kalau xde id cmne??i mean link fb sy ditukar kpde huruf ..cmne plak??

    ReplyDelete
  15. Menarik, tutorial yg berguna..memang jadi..thanks :D

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

    ReplyDelete
  17. tolong sy boleh? dah byk kali sy buat, tp tak bleh.. suruh org lain buat pun still tak bleh.. =(

    ReplyDelete
  18. saya pun xblh. adakah tutorial nie sesuai ngan template denim.

    ReplyDelete
  19. rasa nak tumbuk je skrin monitor ni..huahaaha

    ReplyDelete