[Tutorial] Komen Facebook dan Blog di Blogspot.

10 June 2012

[Tutorial] Komen Facebook dan Blog di Blogspot.

Tutorial ini hanya sesuai untuk minima template kalau blogkin dan template designer lain caranya. Tutorial ini cara saya, kalau ada silap dan salah harap di maafkan.

Dan pertama sekali jangan lupa back up template anda dulu, sebab kalau jadi apa-apa ada back up senang. Nanti jangan datang dekat saya, menangis air mata darah pula..hehe..gurau je.

Mula-mula :

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

2. Tekan Ctrl F serentak dan cari kod ini :

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

3. Perasan tak? code yang dekat atas itu ada dua kan? Kalau macam itu pastekan sahaja code yang di bawah ini betul-betul di bawah kod yang anda cari tadi :

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

4. Yang Warna Merah itu adalah saiz kelebaran kotak comment facebook itu. Tukarlah ikut kesesuian blog anda.

5. Kemudian , tekan Ctrl F serentak lagi , dan cari pula code ini :

<head>

6. Copy code di bawah ini pula :

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

7. Paste di bahagian bawah code yang anda cari tadi.

8. Yang warna ungu itu adalah nombor facebook id anda sama ada pages atau apa-apa sahaja yang anda suka. Yang ada banyak-banyak nombor itu, haa,,,itulah dia.

Kalau anda dah tukar dengan nama? Opps,maaf tak dapatlah nak tolong..hehe.

Baiklah bagi sesiapa yang dah tukar FB ID itu dengan nama boleh saja cari FB ID itu, dengan pergi dekat photo profile anda. Dan klik gambar profile anda..Tak kisah lah yang mana satu asalkah gambar profile anda okay.

Dah buka?

Nanti ada muncul link kan dekat tab itu, contoh macam ini :

https://www.facebook.com/photo.php?fbid=333583213342401&set=a.153744167992974.27790.100000721755672&type=3&theater

9. Baiklah yang saya, warnakan dengan warna merah itu adalah FB ID anda. Copy dan pastekan dekat bahagian tadi.

10. Belum habis lagi? Cari pula code ini :

/* Comments

Atau ini

.deleted-comment {

11. Dah jumpa, copy pula code ini :

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

12. Dan pastekan betul-betul di bawah code yang anda cari tadi ye.

13. Warna oren itu pula, anda tukarlah ikut kegemaran..hehe.. nak tukar warna boleh rujuk sini ye.

14. Tekan preview dulu, kalau tak ada error boleh lah save.

15. Dan kemudian cuba tekan kotak komen anda ye. Tengok sama ada jadi atau tidak. Sebelum itu pastikan anda buat embedded comment dan bukannya pop up.

Sampai di sini saja. Harap dapat bantu anda semua. Jadi atau tak beritahu ye.

Sekian, selamat mencuba dan wassalammualaikum.