About Me

Foto Saya
Nendi
Lihat profil lengkapku

KALENDER

Membuat Kotak Komentar FaCeBook di Blogspot

Exclusive, Integrate Facebook Comments Box For Blogger In Very Easy And Simple Steps – Fixed ( Full Guide ).

Ini adalah fitur yang paling ditunggu oleh pengguna blogger. Sekarang mari kita melakukannya, saya tahu bahwa  Anda pasti ingin mencoba menambahkannya ke blog blogger, tAnda akan melihat bagaimana cara menambahkan kotak tersebut dengan  mudah dan 100% berhasil. Tetapi harap berhati-hati dan memperhatikan semua rincian yang ada.

Langkah 1. Nonaktifkan Default Komentar.
Hal pertama yang harus Anda lakukan adalah menonaktifkan komentar default blogger  karena Anda tidak ingin memiliki 2 bentuk komentar.
Ke account blogger Anda, navigasikan ke Pengaturan>> Komentar>> pilih Sembunyikan, kemudian gulir ke bawah dan klik Simpan.



Langkah 2. Ciptakan Facebook App ID.
Sekarang Anda harus menciptakan facebook app id Anda sendiri, kunjungi saja facebook developers.
Isi Nama Situs dengan blogspot.com dan isi URL Situs dengan alamat blog anda, kemudian klik Buat Aplikasi.
Pada halaman berikutnya, akan terlihat ID Aplikasi anda, salin atau copy ID tersebut, karena akan diperlukan pada langkah selanjutnya.

Langkah 3. Menambah kode di template

Anda harus menambahkan kode berikut ke template blogger Anda untuk memastikan bahwa kotak komentar akan berfungsi untuk blog Anda. Di langkah ini kita akan menambahkan kode berikut :

  • xmlns attribute
  • SDK script
  • Open Graph protocol tags
  • Adding the xmlns attribute :
Silahkan buka account blogger Anda lagi, dan arahkan ke, layout>> edit>> html dan centang Expand Widget Templates, temukan kode berikut :

<html

Anda akan menemukannya di atas kode Anda pada baris kedua atau ketiga, lalu tambahkan kode berikut :

xmlns:fb='http://www.facebook.com/2008/fbml'

Anda harus memasukkan spasi sebelum dan sesudah nya,  contoh :

<html  xmlns:fb='http://www.facebook.com/2008/fbml'  expr:dir='data:blog..............2005/gml/expr'  >


  • Adding the SDK script Code :
Cari kode :

<body>

Kemudian tambahkan kode berikut :

<div id="fb-root"></div>
<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>

Jangan lupa untuk mengubah YOUR APP ID untuk id app Anda (Anda sudah mendapatkannya pada langkah sebelumnya).

  • Adding the Open Graph protocol tags:
Copy kode berikut :

<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='MY-SITE-NAME' property='og:site_name'/>
<meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
<meta content='YOUR-APP-ID'   property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>


Dan ubah text yang berwarna berikut :

Ganti MY-SITE-NAME dengan yang Anda inginkan muncul bila pengguna menyukai halaman.
Ganti http://google.com/…/blogger_logo.gif dengan logo blog Anda, atau menghapus semua tag jika Anda tidak menginginkannya.
Ganti YOUR-APP-ID  dengan nomor ID APP Anda.
Ganti YOUR-FACEBOOK-PROFILE-ID dengan user ID Facebook anda.

Setelah melakukan perubahan ini,  tambahkan kode di atas sebelum :

</head>

Sekarang kita sudah selesai menambahkan kode facebook untuk template Anda, jangan menyentuh apa pun dan lanjutkan ke langkah berikutnya.
Langkah 5. Menambahkan Kotak Komentar 
Cari kode berikut :

<data:post.body/>

Kemudian tempelkan kode berikut :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuEtEsdvMoL-igWFHfLc1FcGv5DJnLQuvarp7kAtVFRDEDn1s0BNzBmFgSJ4wtfiiDy5QY3REyV8Kb_sW44Ya3_mrT36ErV541N_YHBHtaP_nZrDMjgQc7uhXP4njBta968QoaU6_D2j0/' width='331'/></p>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url'   expr:xid='data:post.id'/></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://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a>  brought to you by <a href='http://www.allblogtools.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>
</b:if>

Untuk mengubah lebar kotak komentar Anda, silakan ubah 450 sesuai yang anda inginkan ( dalam pixel ).

Klik Simpan Template, sekarang lihat blog Anda.
Sumber : http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/

Label:

Langganan: Postingan (Atom)