NEWS UPDATE :
Monday, November 26, 2012

Cara Membuat Komentar Facebook di Blog - Tutorial Lengkap

Share to :

Cara Membuat/Memasang Kotak Komentar Facebook di Blogger/Blogspot - Cara Mudah Membuat Kotak Komentar Facebook di Blogger. Cara Membuat Komentar Facebook Untuk Setiap Postingan Blog. Tutorial Lengkap Buat dan Pasang Facebook Comments di Atas kotak komentar blog. Tutorial ini sudah saya uji coba dan berhasil.

Selamat pagi sobat semuanya, pada postingan kali ini saya hadir untuk memberikan tutorial/tips trik tentang blogging. Tentunya sobat sudah punya Facebook semuanya kan, dan tentunya juda sudah pada sering kan komen-komenan ama temen2 FBnya.

Tau gak, kalo kita juga bisa memasang fasilitas komentar facebook di blog kita, kita semuanya tau, bahwa hampir seluruh dunia telah menggunakan facebook sebagai situs jejaring sosial paling populer. Nah dengan memanfaatkan fasilitas Facebook Comments di blog kita, akan dapat memudahkan para pengunjung yang datang untuk meluangkan kritik dan saran kepada blog kita, sehingga kita melalui komentar tersebut kita bisa lebih memperbaiki dar apa yang kurang dari blog kita, yaitu dengan melalui Facebook Comments ini.

Sebenarnya Tutorial Cara memasang komentar facebook di blogspot ini sudah banyak sekali diposting oleh kebanyakan para blogger, namun banyak yang aku coba ternyata banyak yang gak berhasil. dan kini saya menghadirkan tutorial ini sesuai dengan apa yang telah saya uji coba, dan berhasil. yuk ikuti langkah2nya,

Berikut Demo kometar Facebook yang akan kita buat.
Cara Membuat Komentar Facebook di Blog - Tutorial Lengkap
Atau silahkan langsung kunjungi halaman ini untuk melihat demonya :
   ---> Free Download GOM Media Player Terbaru 2012/2013

Cara Buat kotak komentar Facebook di Blogger :
Untuk memasang fasilitas Komentar Facebook di blog ini, saya menyarankan kepada para sobat blogger semuanya, untuk membackup/mendownload dulu templatenya, hal itu dilakukan untuk menjaga terjadinya error kode/hal-hal yang tidak kita inginkan, sehingga bila ada masalah, kita bisa kembalikan lagi.

Sebelum kita membuat kotak komentar Facebooknya, kita buat dulu Facebook Apps, yang nanti kita akan mendapat App ID, yang mana App ID itu yang kita perlukan untuk membuat facbook koemntarnya.

1. Cara Buat ID Aplikasi Facebook untuk Blogger :
1. Kita mulai dengan masuk ke Akun Facebook.com kita.
2. Setelah masuk, Kunjungi url ini: https://developers.facebook.com/apps
3. Isi kotak yang tersedia, lihat gambar dibawah ini :
Isikan App Display Name sesuai ke ingginan, kosongkan saja App Namespacenya,  lalu klik Continue.
4. Etelah Klik Continue/Lanjutkan. maka akan muncul window verifikasi kata dan isikan kata yang telah diberikan. lalu klik Continue/lanjutkan.

5. Setelah itu, akan muncul window baru berupa App ID, Lihat gambar dibawah ini:
"App ID/API Key" adalah nomor aplikasi id facebook Anda. Catat dan simpan nomor App id tersebut di notepad. ini akan diperlukan nantinya.
6. Alamat blog sobat harus ditambahkan ke aplikasi yang dibuat. Tanpa itu, akan muncul warning di kotak komentar blog seperti "Warning: the url --- is Unreachable". 

Berikut cara menambah alamat blog:
  • Klik Edit Settings (kanan atas) pada aplikasi anda. lihat gambar dibawah ini :
  • Pada "Select how your app integrates with Facebook" Masukkan alamat url blog anda. Contoh, http://abdu-software.blogspot.com/ (jangan lupa diakhiri dengan garis miring).
  • Klik Save Changes

    Lihat gambar dibawah ini :
Nah, sejauh ini kita sudah selesai membuat ID Aplikasi Facebook untuk blog kita. langkah selanjutnya adalah kita membuat dan memasang kotak koemntar facebook di blog kita.

2. Cara Pasang kotak komentar Facebook di Blogger :
1. Login ke blogger,
2. Masuk ke Template -> Edit HTML -> Centang "Expand Template widget"
3. Cari kode seperti dibawah ini, [biasanya berada sebelum <head>]
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>
masukkan kode seperti ini, lihat kode diatas, ada kode yang saya warnai, itu adalah kode yang ditambahkan.
xmlns:fb='http://www.facebook.com/2008/fbml'
4. Lalu cari kode </head>, lalu letakkan kode berikut tepat diatasnya.
<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='App ID' property='fb:app_id'/>
<meta content='ID Profil Anda' property='fb:admins'/>
<meta content='article' property='og:type'/>
KETERANGAN: Lihat tulisan yang berwana.
a. Ganti tulisan NAMA BLOG ANDA sesuai nama blog/situs anda.
b. Ganti tulisan APP ID ANDA dengan nomor aplikasi id Anda yang telah anda buat tadi.
c. Ganti ID PROFIL FB dg yang sesuai.

5. Cari kode </head> seperti no 3 tadi dan letakkan kode berikut ini tepat dibawah kode </head>
<div id='fb-root'/>
<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(&#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 App ID Anda diatas dengan App ID tadi.

6. Lalu cari kode berikut, <data:post.body/> lalu letakkan kode berikut tepat dibawah kode tersebut :
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='fb-comments' data-num-posts='2' data-width='450' expr:data-href='data:post.url'/>
</b:if>
450 bisa diganti dengan panjang kotak komentarnya yang sesuai keinginan anda.

7. Setelah langkah diatas sudah selesai, silahkan Klik pratinjau, jika tidak ada error kode, Klik Save Tempaltes/Simpan Template.

Selesai. Enjoy! Sobat telah berhasil membuat kotak koemntar facebook diblognya. Selamat mencoba.


Cara Membuat Komentar Facebook di Blog - Tutorial Lengkap


Tulisan ini menarik? Copas permalink ini blogmu donk!

8 komentar :

mariyanto widodo said... Balas Komentar

izin untuk cobain mas.

doma99 said... Balas Komentar

nice share kang....

alfian fanani said... Balas Komentar

yu di coba

Akhmad Ilham said... Balas Komentar

makasih om

Ahmad Jaelani said... Balas Komentar

nice keren gan.. sukses.. ane tadinya bingung sama komen facebook. di setiap postingan muncul komen yang sama, dan itu tidak baik. tapi setelah menggunakan ini, sukses.. terima kasih gan... ^<_^

dang murganto said... Balas Komentar

mantrab bro...walaupun sya susah2 edit htmlnya tapi berkat tutornya sobat say berhasil sob..izin copas sob..ditunggu kunbalnya,,

Sawang Ijo Asri said... Balas Komentar

trimakasih infonya

Blog Lumajang said... Balas Komentar

mantap gann.... berhasil juga... makasih ya...

Post a Comment

Berkomentarlah di blog ini dengan Etika yang Baik dan Cerdas
- Jangan mencantumkan link apapun, ex: http://xxx
- Komentar yang Nyepam TIDAK AKAN SAYA PUBLISH
- Jangan sampai komentarmu masuk ke dalam SPAM!

 
Support : Creating Website | My Pages | Makcum Abdu
Copyright © 2011. Abdu-Green's Blog - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger