Cara Buat Kotak Komentar Facebook Di Blog

Home » » Cara Buat Kotak Komentar Facebook Di Blog


Cecep Techno, Postingan kali ini Cecep Techno akan membahas tema yang sedikit bedalah dari sebelumnya, berbagi trick tutorial blog tentang cara buat kotak komentar facebook untuk di tampilkan di blog. Cecep Techno tahu bahwa tutorial ini sudah basiiilah tapi tak apelah nak bagi yang basi² buat yang belum dapat nemu.. wkwkwkwk.. Jan marahlah.. wak becanda sob. Oke mari telusuri langkah² ne :

Yang nak di buat, cuba tengok kejab gambar di bawah :



Gimana dah faham maksud Cecep TechnoCaranya gak susah kok :

) Login ID facebook sobat.
) Kunjungi Url ini :  developers.facebook.com/setup/
) Maka akan muncul tampilan macam gambar di bawah ini trus klik " ke Aplikasi " .


) Tampilan selanjutnya seperti gambar di bawah ini, klik tulisan " + Create New App "


Tampilan selanjutnya. Dan isilah kolom² tsb.


) Apa yang harus di isi pada kolom di atas..?? Liat contoh di bawah ini.


) Langkah selanjutnya akan muncul tampilan berikut dan ikuti aturan mainnya.


) Maka tampilan selanjutnya jika anda mengikuti langkah di atas.



) Isilah kolom diatas spt contoh gambar di atas. Selanjutnya.


) Jika sudah klik "simpan perubahan" maka langkah selanjutnya ikuti petunjuk di bawah.


) Langkah selanjutnya login Id Blog Sobat.
) Klik rancangan pilih edit Html dan Cari kode <html dan tambahkan kode di bawah ini tepatnya seperti pada gambar di bawah dan kode yang harus di tambahkan :xmlns:fb='http://www.facebook.com/2008/fbml'

) Posisi kode tepat setelah kode <html nanti jadinya seperti tulisan yang di blok berwarna biru seperti pada gambar di atas.
) Langkah selanjutnya cari kode : <b:skin> tambahkan kode di bawah ini tepat diatas kode tsb, kode yang di tambahkan :
<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='NOMOR ID PROFIL FB ANDA'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

) Hasilnya seperti terlihat pada gambar di bawah ini :


) Ganti tulisan "nama blog anda" Sesuai nama blog/situs sobat.
) Ganti tulisan "App Id Anda" dengan Kode yang di "App Id" yang telah di save sebelumnya.
) Ganti "No Id Profil Anda" sesuai Id Profil facebook.
)Jika tidak tahu no id profil anda klik salah satu fhoto anda dan lihat di bar disana ada id profil anda.Contoh : 

https://www.facebook.com/media/set/?set=a.151676218194995.30850.100000578537903
&type=3

Angka berwarna merah adalah Id profil anda.

) Cari kode : <body dan letakkan kode di bawah ini setelah atau di bawah kode berikut :
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'APP ID ANDA',
      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>




) Contoh gambar petunjuk di atas liat di bawah ini :


) Tambahkan / Ganti kode "App Id Anda" yang sudah di save pada tulisan berwarna merah.

) Langkah terakhir yang sangat penting adalah cari kode berikut :

<div class='post-footer-line post-footer-line-3'>
OR 
<p class='post-footer-line post-footer-line-3'>

) Tambahkan kode berikut dibawah kode tersebut :

<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>

) Contoh gambar :


) Klik simpan template.

Ctt :  angka 10 adalah angka yang menunjukkan jumlah postingan yang muncul, silahkan ganti sesuai kebutuhan.

Semoga Bermanfaat ^_^
.
Share this article :