Tuesday, October 11, 2011

Cara Letak Facebook Comment di Blog Anda

Hye Readers,

Hari ini aku nak try buat tutorial untuk comment melalui facebook.Sebenarnya tutorial nie bukan milik aku tapi aku ambil terus dari JS Blog stop. Ape yang aku buat hanyalah translate tutorial nie ke Bahasa Melayu.

Sebenarnya banyak tutorial untuk buat Facebook Comment nie tapi aku pilih yang ini sebab aku rasa selesa nak guna dan ia nampak simple.Sesetengah Facebook Comment memerlukan kita untuk hide comment dari blogger dan memang aku takkan buat laa..giler ke nak suh aku hide comment from blogger.

Kalau korang pandai edit banyak tab yang korang boleh letak tapi macam aku letak 2 pilihan jer iaitu dari blogger dan facebook.

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 pada profile FB dan amik code seperti yang di highlight.

//www.facebook.com/profile.php?id=100000033451830

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

Maka Selesai sudah tutorial ini..senangkan..tapi takda benda yang sempurna.tutorial ni ade jugak kelemahan.contohnya bile aku click main address untuk blog aku tab tu tak akan keluar..contoh main address adalah 

Tetapi jika address aku merujuk kepada setiap entry tab ini akan berfungsi dengan baik.contoh specific address adalah


Tapi aku tak kisah sgt pasal tu sebab kita banyak guna specific address kita ping entry baru ..Itu  je tutorial aku setakat nie..Kalau ade salah silap aku mintak maaf..dan seperti biasa kalau korang nak baca full tutorial korang leh pergi ke JS Blog Stop...

Regards,
-Strider-

12 comments :

  1. fesbuk dah makin bosan je
    skang nih..lyn blog je..hehe



    slm kenal,
    cik ana

    ReplyDelete
  2. owh bagus tuto ni tp akak takde fb...tp berguna utk mereka yg ada fb =)

    ReplyDelete
  3. macam mana nak dapat kan id profile tu? nak tekan ape?

    ReplyDelete
  4. Nafisah..dekat profile u try tgk url kat atas tu..nanti u nmpak no banyak2..itu laa profile id

    Regards,
    -Strider-

    ReplyDelete
  5. omg!!! tengkiu!! jadi.. hahaha.

    suka giler! :)

    ReplyDelete
  6. haha..tahniah..memang senangkan step dia..hehehe

    Regards,
    -Strider-

    ReplyDelete
  7. kenapa saya cari #comment xde bang ? ade alternative lain x ?

    ReplyDelete
  8. You know i dont usual comment, but i genuinely like your blog and i thought i would introduce myself. I have been reading it for awhile but this is my first comment.

    ReplyDelete
  9. Yang paling penting memohon dalam nama ini memanaskan mengungkapkan dari matahari sensitif , tanah tersebut , penyebabnya juga bisa menjadi front atmosfer nyaman dan lebih .

    ReplyDelete