[TUTORIAL] Facebook comment untuk blogspot



Lama dah tak buat tutorial. disebabkan banyak kali gagal buat facebook comment, so saya nak share yang saya dah berjaya buat seperti yang diinginkan... ^_^

Jom follow step by step insyaallah tidak mengecewakan [macam ayat jual barang..hehehe..]

p/s: Jangan lupa save dulu coding template asal yer untuk keselamatan ^_^.

[TUTORIAL] Facebook comment untuk blogspot

STEP 1
Hide kan comment yang sedia ada.

Setting => Posts and Comment => comment Location: "hide" => Save


STEP 2
Create facebook app.


  1. Tekan +Create New App disebelah kanan atas

  2. Nama aplikasi pilihan yang belum pernah digunakan.

  

 3. Taipkan text security.

 
 
 4. Copy App ID ke dalam notepad => masukkan App domain "blogspot.com" => masukkan url blog dalam website with facebook login =>save


STEP 3
Masukkan code aplikasi kedalam template HTML

1. Pergi ke Template => edit HTML => tandakan expand widget templates.

2. Tekan CTRL+F dan cari kod dibawah.

<head>
3. Pastekan link dibawah selepas perkataan <head> dan gantikan YOUR_FACEBOOK_APPLICATION_ID dengan App ID yang telah di copy pada STEP 2 seperti dalam gambar.

<meta content='YOUR_FACEBOOK_APPLICATION_ID'   property='fb:app_id'/>



4. Tekan CTRL+F dan cari salah satu kod dibawah.

<div class='post-footer-line post-footer-line-3'>

kalau tak jumpa boleh cari yang ni:

<p class='post-footer-line post-footer-line-3'>

kalau takde jugak boleh cari yang ni:

<data:post.body/>

5. Paste kan kod dibawah selepas salah satu kod yang ada kat atas.
<b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
</b:if>


5. Tekan CTRL+F cari <html
Tambahkan kod dibawah seperti dalam gambar.

xmlns:fb="https://www.facebook.com/2008/fbml"

STEP 4
Klik >>disini<< untuk Setting comment.
Setting => Moderation mode => tick kan pada "Let me approve each comment before it appears." seperti dalam gambar.


STEP 5
Untuk paparan facebook comment, tekan CTRL+F, cari kod dibawah.

<data:post.body/>
Letakkan kod dibawah selepas kod diatas dan klik save template.


<b:if cond='data:post.isFirstPost'>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.canonicalUrl'></fb:comments-count> comments</a>


Dah siap... Boleh lah test untuk tengok hasilnya.. ^_^

Just sharing what I've experienced...