Apa yang terbaru dengan facebook comment

  • Admin : Kita boleh membalas komen
  • Rangkaian Pengguna : memaparkan nama orang yang komen dan maklumat profile
  • Notifications : Yang paling penting ialah kita dapat notification bila ada orang komen dekat blog kita
------------------------------------------------------------------------------------------------------------
Step 1. Disable Default Comments.

Terpulang - step nie ikut atas korang la sama ada nak buang ke tak default blog comments. Kalau korang tak disable maknanyer korang akan ada dua tempat komen la nanti

login cam biasa, pergi dekat bahagian settings >> comments
dan korang pilih Hide pastu scroll down sikit dan klik save setting

------------------------------------------------------------------------------------------------------------
Step 2. Generate your Facebook App ID.

Sekarang korang kena buat facebook app,
pergi kat page nie dan pastikan dah login facebook, facebook developers dan klik Create New App
masukkan application name, ( korang boleh taip name ape-ape pon)
klik agree dan continue

Click Gambar Untuk Besarkan




Nampak tak App ID tu, korang salin dan simpan dulu nombor tu dekat mana-mana, jangan bagi hilang sebab step seterusnya nak guna nombor App ID ini




Dekat Basic Info untuk App Domain korang mesti letak blogspot.com dan isikan yang lain-lain tu





Scroll down sikit dan korang akan nampak macam gambar kat bawah dan korang HANYA perlu isi bahagian website dan masukkan URL blog korang. contoh http://alif-azhar.blogspot.com

-----------------------------------------------------------------------------------------------------------

Step 3. Masukkan Code Dekat Templete.

Follow step nie :-

>>Design
>>Edit HTML
>> and check Expand Widget Templates
p/s : untuk keselamat templete blog korang alif cadangkan korang buat backup

Tekan keyboard CTRL dan F, satu search box akan muncul dan korang search kod nie
<html
korang akan jumpa kod ini kat bahagian atas sekali dalam templete korang, mungkin line ke dua atau ketiga. Seterusnya lepas dah jumpa kod <html nie belakang dia korang letak kod kat bawah nie
xmlns:fb='http://www.facebook.com/2008/fbml'
pastikan paste kod kat atas ini belakang kod <html dan pastikan apa space didepan dan belakang kod
tak faham tengok contoh kod kat bawah nie
<html  xmlns:fb='http://www.facebook.com/2008/fbml'  expr:dir='data:blog..............2005/gml/expr'  >

selepas selesai korang search kod nie pula, guna kaedah yang sama CTRL dan F
<body> or <body
kalau tak jumpa kod <body> korang try cari kod <body

contoh kod <body> : <body>
contoh kod <body : <body (dan dekat belakang nie ader kod lain) > 


dekat belakang kod <body> atau <body (dan dekat belakang nie ader kod lain) > , korang tekan enter supaya ader ruang dekat bawah sebab kita nak isi kod seterusnya dekat bawah kod <body> atau <body (dan dekat belakang nie ader kod lain) > nie..pastikan belakang > korang tekan enter k
dan pastekan kod dibawah nie
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR   APP ID',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };

    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>
Ok, bila dah pastekan kod kat atas ni, korang nampak tak YOUR APP ID yang warna merah tu?? Korang kena tukar perkataan merah tu dengan nombor App ID yang alif suruh korang simpan dekat step mula2 tadi



step seterusnya (terpulang) korang boleh copy code dibawah nie dekat notepad/word untuk korang edit tulisan yang bewarna tu

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='MY-SITE-NAME' property='og:site_name'/>
<meta content='YOUR-APP-ID'   property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>
Tukar MY-SITE-NAME dengan nama title blog korang atau ikot suka korang lah. Contoh : (World.4.Free)
Tukar YOUR-APP-ID dengan App ID yang alif suruh korang simpan tu
Tukar YOUR-FACEBOOK-PROFILE-ID dengan korang nyer facebook ID lah.


selepas selesai korang edit kod diatas tu, korang copy code tersebut dan pastekan sebelum kod nie
</head>
guna CTRL dan F jugan nak cari kod </head>. ingat erk sebelum kod </head> !!! jangan paste selepas plak dan follow step seterusnya nie

------------------------------------------------------------------------------------------------------------
Step 5. Masukkan Kod Comment Box Ke Dalam Templete.

korang cari kod seterusnya nie :-
<data:post.body/>
dan selepas/belakang kod diatas tekan space supaya ader ruang kosong dibawah dan pastekan/masukkan kod dibawah nie
For Light Comments box
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='http://3.bp.blogspot.com/-FOACPmrWKOs/Twgu_UrXaII/AAAAAAAAACA/8puLBUzBVoQ/s1600/Facebook+Comments+Gif.gif' width='331'/></p>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url'   expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://blogger-gadget.blogspot.com/' target='_blank' title='blogger templates'>Facebook comments for blogger</a>  brought to you by <a href='http://blogger-gadget.blogspot.com/' target='_blank' title='blogger templates'>Blogger-gadget.blogspot.com , Get Yours?</a></b></div>
</b:if>
Save Templete, dan check la blog korang,Alif harap ia nampak cantik dan work perfectly



WATCH THIS TUTORIAL VIDEO IN FULLSCREEN AND PLEASE PLAY YOUR OWN MUSIC :)

World.4.Free brought to you by Alif Azhar