Facebook Komen Untuk Blogger

Published June 7, 2012

Assalam & Salam sejahtera. Hmm.. rasa kali ini nak buat tutorial Facebook Komen Untuk Platform Blogger.

Kita teruskan dengan Tutorial ok.. xD

Tutorial Bermula

Pergi ke Design > Edit HTML > Klik Expand Widget Templates.

Sebelum apa-apa terjadi, Klik dulu Download Full Template

Seterusnya..

Cari <html

Selepas <html letak xmlns:fb=’http://www.facebook.com/2008/fbml’

Contoh : <html xmlns:fb=’http://www.facebook.com/2008/fbml’ … code bla bla bla (abaikan je code selepas itu)

Kemudian..

Cari </body>

Sebelum code </body> letak code..

(Code 1)

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'APP ID ANDA',
      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>

Bagi yang tiada APP ID lagi, sila pergi Facebook developer page

Nanti jumpa macam gambar di bawah

Letak apa-apa nama yang sesuai. Klik continue dan seterusnya.

Kalau dah ada APP ID, boleh teruskan tutorial ini..

Lepas letak (Code 1)

Letak code ini pula..

(Code 2)

<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='Nama Site Anda' property='og:site_name'/>
<meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
<meta content='APP ID ANDA'   property='fb:app_id'/>
<meta content='Facebook Profile ID '   property='fb:admins'/>
<meta content='article'   property='og:type'/>

Tak tahu nak cari Facebook Profile ID? Klik je sini. Yang nombor hujung tu Facebook Profile ID anda.

Kita teruskan lagi

Cari pula code ini > <data:post.body/>

Kalau dah jumpa letak pula Code Comment Box. Ada warna putih dan warna hitam. Sila pilih mana yang sesuai untuk blog blogger anda.

(Code Putih)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='33' src='http://1.bp.blogspot.com/-1bwzzaKjGPE/T9CK4JxwI9I/AAAAAAAACSs/JOI0ydIJFjk/s320/fb_comments.png' width='320'/></p><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></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://2.bp.blogspot.com/-2uAG6ocfUQk/T9Co0dsJ5dI/AAAAAAAACTA/kfswSGddYa4/s1600/facebook_comments.gif' width='16'/> <b><a href='http://syakila.com/blog/facebook-komen-untuk-blogger/' target='_blank' title='nak jugak?'>Komen untuk blogger</a> dikuasakan oleh <a href='http://syakila.com/blog' target='_blank' title='Syakila'>Syakila</a></b></div> </b:if>

(Code Hitam)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='33' src='http://1.bp.blogspot.com/-1bwzzaKjGPE/T9CK4JxwI9I/AAAAAAAACSs/JOI0ydIJFjk/s320/fb_comments.png' width='320'/></p><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><div><fb:comments expr:href='data:post.url' colorscheme='dark' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></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://2.bp.blogspot.com/-2uAG6ocfUQk/T9Co0dsJ5dI/AAAAAAAACTA/kfswSGddYa4/s1600/facebook_comments.gif' width='16'/> <b><a href='http://syakila.com/blog/facebook-komen-untuk-blogger/' target='_blank' title='nak jugak?'>Komen untuk blogger</a> dikuasakan oleh <a href='http://syakila.com/blog' target='_blank' title='Syakila'>Syakila</a></b></div></b:if>

Tukar size 450 width mengikut kesesuaian blog anda. Habis semua tu, hanya Save.

Screen Shot apabila dah jadi seperti di bawah:

Keistimewaan Code Ini: Anda boleh guna kedua-dua jenis komen, iatu Facebook Comments dan Blogger Comments

Nota: Jika anda dapat tutorial dari blog ini, jangan buang link aku, kerana ia amat berguna untuk orang lain dapatkan tutorial ini. Terima kasih.