Tutorial : Cara Pasang Kotak Komen Facebook Di Blog

Gadis Kidal Berceloteh...
14/04/2012

.Assalamualaikum !
Peacee Yo(!) ^_^v



Hi . Tengahari ni , Lyssa nak teruskan tutorial Lyssa . Tutorial apa ya ? Yup . Seperti tajuk kat atas ni . Tutorial Cara macam mana nak pasang 'facebook comment box' di blog :) 

Bagi yang macam terkial-kial tak tahu menatang apa yang Lyssa dok merepek ni , korang tengok contoh di bawah :


 


Tak silap Lyssa ni untuk pengguna Template Desinger je kot . Maybe ~ Ehem  .Nak buat jugak ? Boleh ikut step di bawah :

1. Dashboard > Design > Edit Html > Tick Expand Widget Templates

2. Tekan Ctrl F serentak , dan cari kod ini :

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


3.  Dah kan ? Then copy kod yang ini :

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

**Warna merah di atas , boleh tukar saiz kelebaran mengikut kesesuaian size blog korang okeh ? :)


4. Paste kan di bawah kod yang korang carikan tadi tu ...

5. Kemudian , tekan Ctrl F serentak lagi , cari kod ini :

<head>


6. Copy kod ini pulak :

<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) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script> 


7. Paste di bahagian bawah kod yang korang carikan tu .

8.Tukar YOUR_FB_ID kepada No ID Facebook korang lah eh ? Macam mana nak dapat no ID tu ? Err . Log in facebook , pergi ke profile .. Atas sekali , ada no banyak-2 macam ni kan ? 


http://www.facebook.com/pages/Lyssa_Secret/120778981320573
  
Note : Bagi yang dah ubah no tu , kepada nama .. Erhmm . tak dapek den nak nolong . Ni pun lyssa copy ID Page Lyssa_Secret tu . Eh , tak silap lyssa korang boleh dapatkan ID melalu satu application ni .  *Lupa pulak! :(


9. Ok . Bila dah abis tu , korang PREVIEW dulu , kalau tak ada error , korang boleh terus SAVE ! 

10. Belum habis lagi .... Sekarang korang pergi ke :

Design > Template Designer > Advanced > Add CSS

11. Copy dan paste kod ni dalam CSS tu :

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


** Kalau nak warna lagi cantik  , korang boleh tukarkan warna merah tu kepada kod warna yang korang suka . Kod boleh dapatkan DI SINI !!


12. Then tekan Apply Blog dan View Blog macam biasa okeh ?


Macam mana nak tengok ianya berhasil ataupun tidak ? Klik mana-mana entry , then tengok bahagian comment ? Menjadi tak.. Kalau menjadi , cer try tulis  " testing-2" macam Lyssa . hekk . Jadi ? Tepuk tangan ramai-ramai :)

=Selamat Mencuba=




KONGSIKAN ARTIKEL INI..
Previous
Next Post »

82 000 orang Comment Di Sini

Write 000 orang Comment Di Sini
k
AUTHOR
April 14, 2012 at 12:34 PM delete

mane nak carik id facebook . sudah tukar dengan name lerr

avatar
k
AUTHOR
April 14, 2012 at 12:34 PM delete

mane nak carik id facebook . sudah tukar dengan name lerr

avatar
MIZZSEVEN
AUTHOR
April 14, 2012 at 12:44 PM delete

thanks adk lyssa menjadi

avatar
Aziera Adenan
AUTHOR
April 14, 2012 at 12:48 PM delete

nk try but saya gune blogskinsss

avatar
April 14, 2012 at 12:58 PM delete

hamboi testing kemain lyssa . hehe

avatar
April 14, 2012 at 1:21 PM delete

wah! bole lah cube . suke. suke! hehe

avatar
Afifah Hayati
AUTHOR
April 14, 2012 at 2:19 PM delete

‎Lyssa_Secret , kenapa saya punya jadi macam ni --> http://i.imgur.com/JLNL6.jpg ? Akak punya lain ?

avatar
Unknown
AUTHOR
April 14, 2012 at 2:49 PM delete

nak cube la nanti..

lyssa. doodle awk da siap. hehehe
nanti cer try tgk kat twitter.

fisha ade tweet kat awk la. :)

avatar
Nur Nazri
AUTHOR
April 14, 2012 at 3:06 PM delete

Thanks Kak Lyssa , saaaynag akak , muahh :)

avatar
April 14, 2012 at 3:17 PM delete

@Dak Fisha

alamakkk .. tak dapat pun ler..

avatar
Unknown
AUTHOR
April 14, 2012 at 4:09 PM delete

Takde yer.

ok takpe. Fisha da update kat entry.
jemput lah jenguk doodle lyssa di sini..
Link

avatar
FirdaHawa.co
AUTHOR
April 14, 2012 at 4:39 PM delete

da cuba tapi xblh la kak lyssa

avatar
sitirohaida
AUTHOR
April 14, 2012 at 5:08 PM delete

sis suke tuto nie...emmm..sis amik ye..

avatar
Unknown
AUTHOR
April 14, 2012 at 7:10 PM delete

ala..sedeyhnyer.. kat blog saya tak jadi la lyssa..

avatar
Aien_Aen
AUTHOR
April 14, 2012 at 7:55 PM delete

Tuto yg menarik dan panjang bebenor

avatar
Unknown
AUTHOR
April 14, 2012 at 8:44 PM delete

gune nama pon boleh ar,,,
mina dh try,,,
klw x cye cbe tgk at blog mina,,
klick profile tu,,,
bole punye..

avatar
Unknown
AUTHOR
April 14, 2012 at 10:23 PM delete

Alhamdulillah .. kak lyssa buat gak ..
hehe

thank :)

avatar
Unknown
AUTHOR
April 15, 2012 at 2:02 AM delete

kalau utk yg da tukar id tu ngn nama.. korang leh try cari id tu dlm link niee...

http://p-cbn.blogspot.com/2011/08/cara-cari-id-facebook.html

avatar
Hanis Aliya
AUTHOR
April 15, 2012 at 9:52 AM delete

wahh.. bagus laa tuto kak lyssa nii.. tapi Hanis malas nak buat. hehee :)

avatar
April 15, 2012 at 11:00 AM delete

Kak lyssa , nak request tuto boleh . Nah kak lyssa baca nih . Hope akk dapat tolong -->
http://www.superb-liberty.co.cc/2012/04/request-tutorial.html

avatar
Anonymous
AUTHOR
April 15, 2012 at 2:12 PM delete

wah,,lyssa x jadik pon..camna nie??

avatar
ndxblg
AUTHOR
April 15, 2012 at 3:37 PM delete

macam2 tutorial kak lysa nie he3

avatar
Anonymous
AUTHOR
April 15, 2012 at 5:50 PM delete

hai lyssa...sy baru je berjinak2 lam dunia blog...seyesly sy byk belajar dr blog lyssa...terima kasih byk2...^_^
disini sy nak tanya kenapa kat blog sy , sy cuba cari "Tick Expand Widget Templates" benda alah ni ada kat mana ea?
sy harap sgt2 lyssa dapat membantu sy ye... sudila kiranya lyssa sudi follow blog sy y baru nak hidup ni hehehe... TQ..^_^

avatar
April 15, 2012 at 6:10 PM delete

Dah buat dah haritu but tak jadi :(

avatar
NAL
AUTHOR
April 15, 2012 at 6:16 PM delete

thanks tapi tak berani la nak try..mcm complicated sgt..

avatar
April 15, 2012 at 11:11 PM delete

Wahh.. Thx for sharing maring..
http://murniellyfiesya.blogspot.com/

avatar
CD
AUTHOR
April 16, 2012 at 1:00 AM delete

kalau guna simple template, mmg xboleh guna ke comment fb?? dah ikut dah cara-caranya tapi, tak dapat la :(

avatar
Amirah.
AUTHOR
April 16, 2012 at 7:56 AM delete

akk,kalo pengguna denim template bole tk gune tuto nieeee?? :)

avatar
Unknown
AUTHOR
April 16, 2012 at 5:00 PM delete

kpd yg x jadi aq rasa korang perlu ambik Id fanpage ..bukan id profile kot..rasanyalah...

avatar
April 18, 2012 at 9:58 AM delete

testing .. jadi lah thanks !

avatar
Unknown
AUTHOR
April 19, 2012 at 10:19 AM delete

alaa, kalau gune denim xjadi pun :(

avatar
Unknown
AUTHOR
April 21, 2012 at 3:01 PM delete

tak jadi la.
kenapa ya agaknya

avatar
Unknown
AUTHOR
April 25, 2012 at 4:06 PM delete

@Budak cadburry dear , pergi dekat profil fb kita then kat situ dia ada link View As kan ? so , awk tekan yang tu jer . Automatik dia akn kluar fb id kita . :)

avatar
May 1, 2012 at 7:03 PM delete

slm..kak lyssa x jumpe pown div class='comments' id='comments'>kt edit html...!!

avatar
Syaraaa_
AUTHOR
May 3, 2012 at 4:26 PM delete

Kak Lyssa...saya sedih sangat bila try tutorial ni..blog Syara jadi lagi buruk pula tak tau lah sama ada tutorial ni ke yg salah atau Syara tapi,syara dh tekan preview..tak ada error pun..huhu :'( sob..sob..sedih !

avatar
Nur Syazwani
AUTHOR
May 6, 2012 at 12:52 PM delete

Kak lyssa , kalau dah tukar guna nama pun , still boleh buat . Sebab wani buat macam tuh , jadik :)

avatar
luahan
AUTHOR
May 13, 2012 at 12:47 PM delete

thanx lyssa, berjaya buat dah...

avatar
Cik Nara
AUTHOR
May 15, 2012 at 10:49 PM delete

asslmkm lysa.. apasal x menjadi 2?? hmm... cedihnye... :'(

avatar
Nurul Izyan
AUTHOR
May 18, 2012 at 1:53 PM delete

akak tumpang tnye.. camne nak buat CCTV cam akak tuh?? hihi .. tringin nk buat jgk :)

avatar
Unknown
AUTHOR
May 22, 2012 at 11:08 PM delete

susah2 .. tp nk cube jugak .. :D

avatar
Cik Ummi
AUTHOR
May 23, 2012 at 8:08 PM delete

dah try. tak keluar2 pown..
blog template simple pown taley wat eh?
coz aritu nak buang attribution tu pown taley gak

avatar
May 24, 2012 at 3:13 PM delete

thnks lyssa..sgt menjdi hehe penat sha cr apa puncanya xmnjdi now bjaya..heeh

avatar
Anonymous
AUTHOR
June 13, 2012 at 9:23 PM delete

x menjadi pun lyssa... plss bantu sis ye.. da puas mencuba.

avatar
June 14, 2012 at 7:22 PM delete

kak lyssa...itew nyer x jdik ponn..hurmm =(

avatar
Unknown
AUTHOR
June 18, 2012 at 10:50 AM delete

wahhhhh. THANKIUUUUUUUU. sekian lama membengkak mata nak buat benda tu. akhirnya menjadi. terima kasih terima kasih terima kasih. :D gombiro tok terkato den.

avatar
Ammar Aliff
AUTHOR
June 23, 2012 at 10:47 AM delete

terimo kasih lyssa, jadi dh.. kemah-II

avatar
Unknown
AUTHOR
June 25, 2012 at 1:10 AM delete

lyssa code CSS tu nk letak mane..?

avatar
Unknown
AUTHOR
June 29, 2012 at 4:38 PM delete

klau xde no id tukar je dgn nama yg dijdkan id tu...:)

avatar
monmon™
AUTHOR
July 20, 2012 at 4:06 PM delete

thanks sis ! nii aiman ada jumpa cara nak cari id fb bgi yg dh tukar jd nama laen; http://www.ehow.com/how_5753004_facebook-id.html

avatar
Akhelaken
AUTHOR
July 23, 2012 at 1:18 PM delete

arghh.. tension sbb xdpt buat! hahaha..

avatar
August 3, 2012 at 11:10 AM delete

weyh !
asl ta jd weyh !
adesss =.,=

avatar
Unknown
AUTHOR
October 18, 2012 at 4:51 PM delete

kepada yang xboleh tu sila tukar

property='fb:admins'/>

kepada

property='fb:app_id'/>


kepada yg tidak dapat melihat FB id boleh didapati pada gambar profil anda

avatar
Anonymous
AUTHOR
November 15, 2012 at 12:49 AM delete

kak lyssa, kalau yg guna blogskin, boleh guna jugak ke cara yg kak lyssa ajar nie ?

avatar
Anonymous
AUTHOR
November 16, 2012 at 5:38 AM delete

blognya antum indah banget, seindah orang'y ^_^ mampir ya ke blog saya.. http://fathulmubeng.blogspot.com/

sampai ketemu lg. wassalam

avatar
Unknown
AUTHOR
December 20, 2012 at 1:27 PM delete

akak .. saya punya blog xde kod ni div class='comments' id='comments'>
nak gantikan dgn ape eh?

avatar
Unknown
AUTHOR
December 29, 2012 at 11:06 AM delete

Yes da jadi Thx Kak Lyssa :D

avatar
Wanie Kip
AUTHOR
December 30, 2012 at 8:56 PM delete

kenapa wany buat x jadi .. plsss t0l0ng >.<

avatar
Wanie Kip
AUTHOR
December 30, 2012 at 8:57 PM delete

kenapa wany buat x jdi?? plsss t0l0ng

avatar
test site
AUTHOR
January 21, 2013 at 12:45 PM delete

mantap blog lyssa . Jemput tengok blogshop sy ye http://www.my-best-gift.my

avatar
reanna
AUTHOR
February 19, 2013 at 4:48 PM delete

tak menjadi pun nak letak kotak komen , kenape ek kak lyssa

avatar
Unknown
AUTHOR
April 3, 2013 at 5:48 PM delete

alhamdulillah.. menjadik..
terima kasih lysa atas perkongsian nie..

avatar
Anonymous
AUTHOR
June 24, 2013 at 4:42 PM delete

kak lisa, camne nak comment tu keluar dekat notification facebook kita?

avatar
Unknown
AUTHOR
July 14, 2013 at 9:29 AM delete

kak lyssa..tak jumpa lah kod div class tu..nak tick kat expand--- pun tatau kat ne...hmm :'\

avatar
July 19, 2013 at 5:26 PM delete

akak..
sy ikut tuto akak, tapi bila preview tak kuar apa2 pown.. tapi sy ikut step by step. napa ye? akak boleh tolong x. dh bnyak kali try

avatar
August 15, 2013 at 10:38 AM delete

kak lyssa, kenape bile sye buat kuar error??padahal sye dh ikot step yg kak lyssa bagi..kenape ye kak??
#harapbalas

avatar
August 15, 2013 at 10:41 AM delete

kak lyssa kenape sye punye kuar error padahal sye dh ikot step yg kak lyssa bagi..kenape ye kak??
#harapbalas

avatar
Unknown
AUTHOR
March 12, 2014 at 6:08 PM delete

Nape tak jadi ye....eeeeeeerr
tolong bantu .

http://radiomalaysiaonline2u.blogspot.com/

avatar
Unknown
AUTHOR
March 12, 2014 at 6:10 PM delete

Kenapa tak jadi ...................................

;( .... sedihnya harap dapat membantu http://radiomalaysiaonline2u.blogspot.com/

avatar
March 21, 2014 at 10:12 PM delete

salam....awak..tolong buat kat blog saya boleh tak???dah buat byk kali tak boleh la..

avatar
Anonymous
AUTHOR
January 21, 2015 at 2:47 AM delete

cara nk dptkan fb id : http://findmyfacebookid.com/

avatar

.Assalamualaikum.
.Sila Tinggalkan Comment Anda Di Sini.
SATU pun jadi lah ! hehe. EmoticonEmoticon