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("#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='comments-tab inactive-select-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='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 == "item"'>
<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-
