Cara Pasang Kotak Komentar Facebook di Blogger

Cara memasang kotak komentar Facebook di blogger tidak terlalu sulit. Cukup ikuti petunjuk di bawah ini. Untuk demonya, Anda bisa lihat pada bagian bawah postingan ini (Komentar Anda AP).

Sekarang langsung saja ke pokok masalah sesuai dengan judul postingan ini. Yang harus Anda lakukan pertama kali adalah menonaktifkan komentar bawaan blogger jika Anda tidak ingin memiliki dua kotak komentar pada blog Anda. Tetapi, jika memang ingin memasang kedua-duanya tidak perlu mengubah SETTING KOMENTAR bawaan blog. Oke!!!

Untuk menonaktifkan komentar pada bawaan blog, silahkan login ke account blogger Anda. Klik PENGATURAN kemudian klik KOMENTAR. Pada bagian atas halaman pengaturan komentar, silahkan klik SEMBUNYIKAN KOMENTAR kemudian SAVE.

Tahap pertama selesai. Sekarang kita beralih ke langkah selanjutnya, yaitu membuat ID APP di Facebook. Buka tab baru dan silahkan login ke akun Facebook Anda kemudian masukkan masuk ke Facebook Developers atau klik di sini. Anda akan dibawa ke halaman untuk membuat aplikasi. Lihat gambar di bawah:


Masukkan nama aplikasi yang Anda inginkan, (Anda dapat mengetikkan nama apa saja). Sebagai contoh saya membuat aplikasi dengan nama "Komentar Anda". Centang Agree lalu klik Create App. Selanjutnya, Anda akan dibawa ke halaman Pemeriksaan Keamanan. Lihat gambar di bawah ini:


Masukkan kode yang tertulis ke dalam kotak di bawahnya kemudian klik Kirim. Selanjutnya Anda akan dibawa ke halaman aplikasi yang telah Anda buat. Lihat gambar di bawah ini.


Klik Web Site dan masukkan url blog Anda pada kotak Site URL. Jangan lupa klik Simpan Perubahan. Copy Application ID Anda ke notepad. Lihat gambar berikut.


Sekarang kita beralih lagi ke cara memasangnya pada blog Anda. Silahkan ikuti langkah berikut.
  1. Silahkan beralih ke akun blogger yang tadi Anda buka.
  2. Klik RANCANGAN kemudian klik EDIT HTML.
  3. Centang EXPAND TEMPLATE WIDGET. Jangan lupa untuk DOWNLOAD TEMPLATE Anda terlebih dahulu untuk menjaga jika terjadi kesalahan.
  4. Cari kode <body>. Supaya mudah mencarinya, silahkan tekan CTRL + F.
  5. Kalau sudah ketemu, tambahkan kode berikut di bawahnya:

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

    Ganti kode berwarna merah dengan APP ID yang tadi Anda copy ke notepad.
  6. Sekarang cari kode </head>. Letakkan kode berikut di bawahnnya.

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

    Ganti tulisan berwarna merah dengan nama blog anda. Ganti tulisan berwarna kuning dengan ID APP yang tadi Anda buat. Kemudian tulisan berwarna biru Anda ganti ID Profile Facebook Anda sendiri (yang tadi dicopy ke notepad).

    Cara mengetahui ID profil Facebok Anda sangat mudah. Silahkan klik profil dan lihat alamat url pada addresbar browser Anda. Lihat gambar di bawah.

  7. Selanjutnya, cari kode berikut: <data:post.body/>
  8. Letakkan kode berikut di bawahnya. Jika Anda sudah memasang READMORE yang bukan bawaan blogger (secara manual), akan ada dua <data:post.body/>. Letakkan saja kodenya di bawah <data:post.body/> yang kedua. Oke!!!

    <b:if cond='data:blog.pageType == &quot;item&quot;'><br/><div style='background:url(https://lh4.googleusercontent.com/_QeIxO28ukBc/TZcmkTJ_lCI/AAAAAAAAARs/ZrZCagV_MtY/12801757528.jpg);-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px;-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);box-shadow: 0 1px 0px rgba(0,0,0,.1);margin-top: 10px;'><p align='left'><img src='https://lh6.googleusercontent.com/_QeIxO28ukBc/TaA-A0uOXsI/AAAAAAAAAUI/HVcFKXApe3c/Komentar.png'/></p><div style='background:url(https://lh4.googleusercontent.com/_QeIxO28ukBc/TZcme1PZSUI/AAAAAAAAARg/08G8LkPKx6s/buku2.png);padding: 8px;-moz-border-radius: 10px 10px 0 0;-webkit-border-radius: 10px 10px 0 0;-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);box-shadow: 0 1px 0px rgba(0,0,0,.1);'><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='510'/></div></div><div style='background-image: url(https://lh4.googleusercontent.com/_QeIxO28ukBc/TaGf5fxpFWI/AAAAAAAAAVs/rgyuVjkNJrY/Accident.gif); font-size:11px; padding:6px;width:100%; overflow:hidden;-moz-border-radius: 0 0 10px 10px;-webkit-border-radius: 0 0 10px 10px;-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);box-shadow: 0 1px 0px rgba(0,0,0,.1);'><b><a href='http://www.ilmublog.co.cc/2011/04/cara-pasang-kotak-komentar-facebook-di.html' target='_blank' title='Komentar dari Facebook'>Mau Pasang Kotak Komentar FB Seperti Ini di Blog Anda? Klik di Sini!</a></b></div></b:if><br/>
  9. Cari kode ini width='510'. Silahkan ubah ukurannya sesuai dengan ukuran blog Anda.
  10. Langkah yang terakhir adalah SAVE TEMPLATE Anda dan selesai. Silahkan lihat hasilnya.

Kalau ada yang error atau tidak berhasil terpasang, silahkan periksa kembali mungkin ada kekeliruan saat memasangnya. Baca kembali langkah-langkahnya di atas. Oke!!!

Selamat belajar dan jangan lupa komentarnya ya!!!

3 comments on Blogger:

  1. Mas identitas profil fb ku tidak ada yang ada hanya nama penggunax saja. bisa bantuin ga? ni url fb ku : facebook.com/shahdyn.

    ReplyDelete