Cara Pasang Kotak Komentar Facebook di Blog

Tweet

 

Gambar1.kotak komentar

Akhirnya artikel yang sangat ditunggu-tunggu Di Publish juga, ini adalah fitur yang paling ditunggu untuk pengguna blogger, dalam langkah-langkah sangat mudah untuk meng-integrasi kotak komentar facebook dan blogger ( blogspot) blog.

Sekarang pengunjung tidak perlu ketik alamat email mereka atau nama untuk memberikan komentar di situs anda. Mereka hanya login ke account facebook mereka secara otomatis sudah bisa komentar .
Semua orang terhubung melalui facebook , Hal ini akan mendorong lebih banyak orang untuk komentar karena kebanyakan orang sudah log in ke account mereka.

Oke mari kita melakukannya, jangan khawatir, saya tahu bahwa Anda ingin mencoba menambahkannya ke blog blogger namun tanpa hasil, tetapi sekarang Anda akan melihat bagaimana cara menambahkannya dengan langkah sangat mudah dan bekerja 100%. tetapi harap berhati-hati dan memperhatikan semua rincian.
Kini Pengunjung yang Punya Account Facebook bisa Berkomentar di Blog Anda

Langkah 1. Nonaktifkan Default Komentar.

Hal pertama yang harus Anda lakukan yakni Nonaktifkan Setting Komentar ANda . karena Anda tidak ingin memiliki 2 bentuk komentar, dan jika memang membutuhkan dua komentar biarkan saja seperti biasa.
  Silahkan ke account blogger Anda
navigasikan ke "Pengaturan/Setelan" lalu klik "Komentar" dan pilih "Sembunyikan" kemudian Simpan Perubahan.


Langkah 2. Buatlah Facebook App ID ( Aplikasi di Facebook ).
Pertama Login pada facebook anda , dan buatlah aplikasi untuk membuat kotak komentar .
-
kemudian pilih create app

Gambar2.

 Masukan Nama Aplikasi anda , kemudian jangan lupa untuk mencentang check box diatas, kemudian pilih lanjutkan/next.
dan jangan lupa untuk mengisi kan recaptcha yg diberikan

Gambar3.

 kemudian pilih kirim.

Gambar4.

Setelah itu akan muncul form seperti ini , isikan email anda , dan biarkan alamat app domain tetap blogspot.com .
kemudian gulir mouse anda kebawah lagi dan klik centang pada website, dan masukan url blog anda

Gambar5.

kemudian pilih simpan perubahan.

Langkah 3. Menambahkan Kode pada template blogger
Anda harus menambahkan kode berikut ke template blogger Anda untuk
memastikan bahwa kotak komentar akan bekerja untuk blog Anda dengan cara yang benar.

silahkan login ke account blogger Anda lagi

Navigasikan ke "Rancangan" 

pilih Edit HTML

jangan lupa centang Expand Template Widget

Kemudian masukan kode ini 

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;APP-ID Anda&#39;,
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(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>

diatas kode </body>  , untuk mempermudah pencarian kode tekan Ctrl-F.

 *APP-ID Anda : Masukan APP Id yang telah diberikan.

Sekarang cari kode </head>

dan masukan kode ini dibawahnya

 <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 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='Profile-ID-Facebook Anda' property='fb:admins'/>
<meta content='article' property='og:type'/>

Nama Blog Anda                : Isi nama blog anda
APP-ID Anda                      : Isi App yang telah diberikan tadi
Profile-ID-Facebook Anda : masukan nama Profil Facebook anda.

Sekarang kita selesai menambahkan kode facebook untuk template Anda, jangan menyentuh apa pun dan melanjutkan ke langkah berikutnya.

Langkah 4. Menambah kan Kotak Komentar blogger template anda

silahkan cari kode berikut  <data:post.body/>

Letakkan Kode Berikut dibawahnya
Jika Punya dua <data:post.body/>  karena sudah pasang Readmore Silahkan Letakkan
di bawah <data:post.body/> yang kedua

<b:if cond='data:blog.pageType == "item"'><br /> <p align='left'><a href="bit.ly/panthom" target="new"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZVHWTiqFAUT7E8OLWyvYt62CV5hpvdcVwGdLQOW95t39EDc_v1mUyeiqssGj-iQiR4MI_O-zkLYb_O9J73A7ltyKvgE4FdyN0xdWlsVIhKlMdTNu_lyvJcXT0pN9f20kaFV4vdzv7uE/s1600/comment.gif" /></a></p><div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div></b:if>  

Untuk Merubah Lebar Silahkan Ganti Angka 450 sesuai Template Masing2