Home > Blogger > Cara Pasang Kotak Komentar FB di Blog

Cara Pasang Kotak Komentar FB di Blog

Untuk membuat kotak komentar facebook di blog, langkah pertama yang harus kita persiapkan adalah menbuat aplikasi facebook untuk mendapatkan app ID facebook dan tentunya kita harus mengetahui ID profile facebook kita.
Setelah langkah pertama dipersiapkan, maka kita tinggal memasukan script pada template blog.
1. Login dengan akun blogger
2. Pilih Template -> Edit HTML -> Lanjut -> Centang pada kotak 
   Expand Widget Template
3. Cari Code <html (gunakan Ctrl+F untuk mempermudah pencarian)
4. Tambahkan code xmlns:fb='http://www.facebook.com/2008/fbml' 
   setelah code <html atau ditaruh paling akhir juga bisa, setelah code 
   xmlns:expr='http://www.google.com/2005/gml/expr' di sini>


<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_blog‘ property=’og:site_name’/> <meta content=’http://google.com/help/hc/images/logos/blogger_logo.gif&#8217; property=’og:image’/> <meta content=’app_ID‘ property=’fb:app_id’/> <meta content=’ID_profile_fb‘ property=’fb:admins’/> <meta content=’article’ property=’og:type’/>

6. Cari code <body>, letakan code di bawah ini setelah code <body>
<div id=”fb-root”></div> <script> window.fbAsyncInit = function() { FB.init({ appId : ‘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); }()); <fb:comments/> </script>

7. Cari kode <div class='post-footer-line post-footer-line-3'> dan letakan code 
   dibawah ini tepat di bawah code   
   <div class='post-footer-line post-footer-line-3'>

<b:if cond=’data:blog.pageType == &quot;item&quot;’> <div class=’fb-comments’ data-num-posts=’10’ data-width=’450′ expr:data-href=’data:post.url’/> </b:if>

8. Dan yang terakhir Save template.
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: