Cara Memasang kotak komentar ala Facebook di halaman blog

Chyberart -  Tutorial kali ini Chyberart akan share tetang cara memasang kotak komentar ala facebook di halaman blog. Sebenarnya sudah lama ni saya pengen share tetang cara memasang kotak komentar facebook ini di halaman blog tapi baru kali ini bisa saya share.

Sebenarnya sudah banyak yang menulis tetang cara memasang komentar facebook dihalaman blog sehingga anda bisa dengan mudah menemukan tutorial ini dibah google, tapi saya pikir gak ada salahnya juga saya ikut share trik kali ini karena menurut saya lebih banyak akan lebih mudah untuk diingat.

Tutorial kali ini juga akan saya coba membuat totorial ini dengan lengkap sehingga mudah untuk dipahami. Ok langsung saja berikut langkah-langkah yang harus anda lakukan untuk membuat kotak komentar facebook dialaman blog :Langkah Pertama : Menonaktifkan Komentar Dihalaman blog anda

Lankah pertama ini bertujuan untuk menonaktifkan kotak komentar bawaan dari blogger jika ada ingin menggunkan dua fasilitas kotak komen original blogger dengan kotak koment ala facebook anda bisa mengabaikan tutorial ini

1. Log-in ke akun blogger anda
2. Jika anda pengguna template lama blogger Pilih Pengaturan-->Komentar-->(Gulir kebawah )-->Sembunyikan
3. Untuk anda pengguna template baru Langkah-langkahnya
• Perhatiakan tanda panah pada gambar dibawah ini Klik Setting

• Pilih Post and Comment-->(gulir kebawah cari tulisan "Show Comment")Pilih-->Hiden

Proses menon aktifkan kotak koment original blogger selesai, lanjut ke langkah berikutnya.

Langkah Kedua : Membuat APP ID (aplikasi di facebook)

1. Masuk ke akun facebook anda
2. Setelah anda masuk sekarang kunjungi halaman Facebook Develover DISINI untuk membuat APP ID

3. Pilih Applikasi--> Create New Applikasi-->(isi data yang diminta setelah itu)-->lanjutkan

4. Jika Berhasil anda akan dibawa ke halaman berikut ini

5. Copy App ID yang diberikan (Lihat gambar diatas u/ mengetahui APP ID)  dan simpan di note pad
6. Gulir kebawah Klik Simpan
Tahap kedua selesai lanjut ketahap berikutnya

Lankah keTiga : Menambah kode kehalaman blog anda

1.  Download template lengkap terlebih dahulu untuk mengantisifasi kesalahan Edit HTML
2. Selanjutnya Untuk pengguna Template lama Blogger Pilih Rancangan-->Edit HTML-->Centang Expand Widget Templates 
3. Untuk anda pengguna template baru
• Perhatikan gambar dibawah ini, Dibagian Dasboard Pilih Template

• Selanjutnya Edit HTML-->Proses

• Centang Expand Widget Templates

4.  Cari Kode < body > gunakan CTRL+F untuk mempermudah pencarian kode
5. Tambah Kode Berikut dibawah kode < body >

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

Jangan Lupa Ganti APP ID Yang Tadi sudah anda buat dan anda copy

6. Selanjutnya Cari kode </head>
7. Letakan kode berikut 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'/>

8. Sekarang cari Kode <data:post.body/> (jika anda menggunakan Read More otomatis kode <data:post.body/> ada dua maka gunakan kode yang kedua
9.  Letakan Kode berikut dibawahnya

<b:if cond='data:blog.pageType == "item"'><br /> <p align='left'><a href="http://www.kumpulancara.com/" target="new"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-XUymGxv15-XOCV_Ek_4a93R2w5mNNbjt3BaROxadxJtAcPsf7tQ63xa2PqlJXK7BUILCD4CTtnl6pr6ImZp_2MN0h2S96Cr600aycM2Vd9zaNPQoNlQQGyAqBqTQU1eQj8BPmSMKE3g/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 />

"450" adalah lebar kotak komentar silahkan anda sesuaikan dengan blog anda


10. Simpan Template dan lihat hasilnya

Wow panjang sekali ternyata tutorialnya. Tutorial ini sudah saya usahakah sedetai mungkin semoga bisa membantu apabila anda masih bingung dan belum berhasil silahkan hubungi Chyberart Tim. akan senang membantu sahabat blogger

Itulah sekilas Tutorial Blogger mengenai Cara Memasang kotak komentar ala Facebook di halaman blog. Semoga bermanfaat kekurangan saya moho maaf, yang baik silakan diambil yang buruk mohon diperbaiki, kesempurnaan hanya milik allah SWT yang maha kuasa. Trimakasih....!

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Chyberart. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Chyberart dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Ѽ҅҅҅҅҅ѽ҃҃҃҃҃҉҃҃҃҃҉҃҃Ѳ长ム从凹Ѽ҅҅҅҅҅ѽ҃҃҃҃҃҉҃҃҃҃҉҃҃Ѳ pada tanggal April 19, 2012