3 LANGKAH CARA MEMASANG KOTAK KOMENTAR FACEBOOK DI BLOGSPOT

Setelah berkali-kali gagal ,akhirnya aq berhasil memasang Kotak Komentar Facebook di blog. Makanya aq ingin bagi-bagi pengalaman ini buat sobat sesama pemula..
Sebenarnya tips cara memasang Kotak Komentar Facebook di blog, udah banyak dijelaskan oleh para pakar blogging. Dan ini bukan hal yang baru lagi. Tapi sebagai pemula yang masih harus banyak belajar, aq menilai Kotak Komentar Facebook sangat bagus dipasang di blog. Karena selain tampilannya emang keren, juga bisa membantu menambah jumlah pengunjung ke blog kita secara otomatis.
Kalau sobat punya minat buat masang Kotak Komentar Facebook di blog, Ikuti aja langkah-langkahnya berikut :

1. LANGKAH PERTAMA : MEMBUAT APLIKASI DI FACEBOOK ATAU FACEBOOK APP ID

Cara membuat Aplikasi di Facebook / Facebook App ID adalah sebagai berikut :
Login ke Facebook.( Login pake Id Facebook sendiri ya, jangan pake punya tetangga J.)
Setelah login, kunjungi alamat Pengembang Facebook atau Facebook Developers di http://developers.facebook.com/
Atau kalau sekarang sobat sedang online facebook, langsung klik di sini. Selanjutnya sobat akan dibawa ke halaman Pengembang Facebook atau Facebook Developers. Perhatikan gambar dan petunjuknya.
(Sekedar info: Terkadang urutan halaman gak sama persis, tp gak papa..yang penting ikuti aja petunjuk sesuai dengan halaman yang muncul).

Klik Aplikasi Saya

Klik Izinkan

Klik +Set Up New App

Isi Nama Aplikasi. terserah sobat mau diisi apa. misal : Kotak Komentar

Klik Setuju

Klik Create App


Isi Kode Verifikasi.

Klik Kirim


Abaikan saja halaman ini, langsung menuju ke pilihan Situs Web

Isi Url Sites dengan Alamat Blog Sobat,jangan lupa tambahkan tanda / di akhir alamat url. Contoh : http://omvan.blogspot.com/

Isi Site Domain dengan domain yang sobat gunakan. Seperti : blogspot.com

Lalu Klik Simpan Perubahan, selanjutnya akan muncul halaman berikut :

Lihat informasi nomor ID Aplikasi yang muncul. Copi dan simpan ke notepad atau dimana sajalah..yg penting aman.Karena nantinya akan kita gunakan pada langkah pemasangan pada template blog.

Sampai disini pembuatan ID App Facebook dinyatakan selesai. Buat sobat yang pengen minum, boleh dicicipi dulu kopinya, atau yang pengen pipis...jangan ditahan-tahan atuh,tar jdi penyakit.

2. LANGKAH KEDUA : SEMBUNYIKAN/NONAKTIFKAN DEFAULT KOMENTAR

OKE... kita lanjut!

Sebelum kita melangkah pada Edit HTML, sebaiknya Kotak Komentar Default dinonaktifkan terlebih dahulu,biar gak dobel aja kotak komentarnya. Tapi kalau ingin kotak komentar yang lama tetap dimunculkan, gak masalah.

Cara menonaktifkan Kotak Komentar Default :
  • Login ke Blogger sobat
  • Pada halaman Dasbor Klik PENGATURAN trus Klik KOMENTAR.
  • Pada menu Komentar, pilih: Sembunyikan.
  • Lalu gulir ke bawah, klik SIMPAN SETELAN
  • Selesai

3. LANGKAH KETIGA : MEMASANG CODE APLIKASI FACEBOOK PADA TEMPLATE BLOGGER

Sekarang kita lanjutkan ke Langkah terakhir yaitu pemasangan code pada template Blogger.
  • Klik RANCANGAN
  • Klik EDIT HTML
  • centang EXPAND WIDGET
Jangan lupa klik “DOWNLOAD TEMPLATE LENGKAP” buat jaga-jaga siapatau terjadi kesalahan.

Cari code <body>. Tekan ctrl + F pada keyboard untuk memudahkan pencarian.
Copi paste code di bawah ini, dan letakkan tepat di bawah code <body>

<div id="fb-root">
<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>
Ganti YOUR-APP-ID dengan dengan nomor ID Aplikasi Facebook yang tadi dibuat.

Selanjutnya cari code  </head>
Letakkan code berikut di bawahnya :
<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='YOUR-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'/>
YOUR SITE NAME = ganti dengan url/alamat blog sobat. Contoh: http://omvan.blogspot.com/
YOUR APP ID = Ganti dengan Nomor ID Aplikasi Facebook sobat.
YOUR-FACEBOOK-PROFILE-ID = Ganti dengan ID Profil Facebook sobat. Jika url/alamat Profil Facebook sobat adalah http://www.facebook.com/lia.damayanti , maka ID Facebook sobat adalah lia.damayanti

Oke kita lanjutin ke langkah terakhir.. cari code <data:post.body/>
Letakkan code berikut ini di bawanya. Jika ada 2 code
<data:post.body/> karena sudah pasang Read More, maka letakkan di bawah code <data:post.body/> yang kedua:


<b:if cond='data:blog.pageType == "item"'><br /> <p align='left'><a href="http://www.omvan.blogspot.com/" target="new"><img border="0" src="http://2.bp.blogspot.com/_M1pYMGMUxt0/TBU2Rk6JL5I/AAAAAAAAB_I/MTcuwWlywTI/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><br />


Ganti 450 dengan ukuran yang sesuai dengan template masing-masing.
Save Template.


Silahkan dicek, biasanya pertama digunakan, loadingnya agak lama, karena masih dalam proses menghubungkan.
Semoga bermanfaat, jangan lupa komennya sob..:-)


Sumber Inspirasi
Cara Pasang Kotak Komentar Facebook di Blogger | Exclusive

No comments:

Post a Comment

Terima kasih sudah berkunjung, komentar dan saran anda sangat saya hargai demi perkembangan blog ini.