Cara Membuat Kotak Komentar Versi Terbaru Diblog
 |
Langsung saja berikut Cara Membuat Kotak Komentar Versi Terbaru Diblog:
Langkah Pertama
Saya akan memberikan sebuah option, yaitu option pertama anda ingin memiliki 2 buah kotak komentar, yaitu Kotak komentar blog dan kotak komentar Facebook secara bersamaan, atau hanya ingin memiliki kotak komentar facebook saja dan ingin menonaktifkan kotak komentar blog anda? jika anda memilih option pertama, silahkan lanjut ke Langkah selanjutnya tanpa harus mengikuti membaca lebih jauh langkah pertama ini, tapi jika anda memilih option kedua, silahkan non-aktifkan dulu kotak komentar blog anda dengan cara:
Masuk ke Settings atau Setelan, Pilih comments atau Komentar dan pada field comments atau komentar pilih Hide atau sembunyikan dan save atau simpan perubahan tersebut.
Langkah Kedua
Sebelum melakukan proses pemasangan, terlebih dahulu kita harus meng-generate Facebook App ID dengan menggunakan akun Facebook kita masing-masing, dan berikut caranya:
Silahkan Login ke akun facebook anda, dan masuk ke page facebook developers.
Maaf saya tutupin pokoknya biarin dulu page itu terbuka dan jangan diapa-apain karena kita masih butuh sama App ID-nya atau silahkan Copy dulu semua keterangan yang berhubungan dengan App ID dan lainnya kedalam notepad.
Jika Sobat belum mempunyai page/aplikasi ,atau belum membuat page/aplilkasi tersebut...Silahkan Cari di mbah google ,banyak kok tutorial cara membuatnya,, hehehe :).. soal nya saya tidak membahasnya kali ini,,
Yang terpenting adalah kita tau kode App ID/API Key Aplikasi kita.
Langkah Ketiga
Kita mulai dengan pemasangan kotak komentar facebook versi baru ini kedalam blog kita, Berikut cara:
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Kemudian cari kode berikut ini:
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Kemudian cari kode berikut ini:
<html
letaknya dibagian atas lah, klo udah ketemu tambahkan Kode berikut ini:
xmlns:fb='http://www.facebook.com/2008/fbml'
setelah kode <html tersebut, letaknya terserah anda bisa setelahnya, bisa di baris kedua atau bisa juga dibaris ketiga, contohnya gini:
Sebelum dimasukkin kode itu kan template kita bentuknya kaya gini ya:
<html 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'>
Nah anda bisa nambahin kodenya menjadi
<html xmlns:fb='http://www.facebook.com/2008/fbml'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' >
5.Cari kode <body>
Dan masukkin script dibawah ini setelah kode tersebut:
<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);
}());
</script>
<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);
}());
</script>
sekarang masukkin APP ID atau Applications ID untuk menggantikan tulisan APP ID ANDA yang saya beri warna merah.
6. Kita akan menambahkan tag di template kita, caranya cari kode title blog anda yang bentuknya kaya gini:
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
Letaknya diawal-awal Script template anda lah. Kemudian tambahkan tag dibawah ini persis dibawah title anda atau setelahnya:
<b:if cond='data:blog.pageType == "item"'>
<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'/>
<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'/>
Ganti keterangan sesuai milik Anda, MY-SITE-NAME bisa anda ganti dengan judul blog anda, YOUR-APP-ID bisa anda ganti dengan Applications ID Anda , dan YOUR-FACEBOOK-PROFILE-ID bisa anda ganti dengan ID Profil anda, Oiya klo mau, anda juga bisa menambahkan script diatas sebelum kode </head> , tapi saran saya sih setelah title aja karena saya telah mencoba nya dan berjalan sangat lancar.
7. Kita akan langsung memasukkan Script kotak komentarnya, dengan cara cari kode berikut:
<data:post.body/>
Klo udah ketemu Copy Script dibawah ini tepat dibawahnya atau setelahnya,kira-kira hasilnya nya nanti tepat di bawah setiap postingan anda,berikut script nya,Copy aja:
<b:if cond='data:blog.pageType == "item"'>
<p align='left'>Silahkan Gunakan Facebook Comment, Jika Anda Tidak Memiliki Url Blog!</p>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div>
<div style='background-color: #000;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='' width='16'/> <b><a href='http://sigli-cyber.blogspot.com' target='_blank' title='Sigli Cyber'>Comments for blogger!</a> brought to you by Sigli Cyber , Ingin Kotak Komentar seperti ini? <a href='http://sigli-cyber.blogspot.com/2012/08/cara-membuat-kotak-komentar-versi.html' target='_blank' title='Sigli Cyber'> KLIK DISINI!?</a></b></div>
</b:if>
<p align='left'>Silahkan Gunakan Facebook Comment, Jika Anda Tidak Memiliki Url Blog!</p>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div>
<div style='background-color: #000;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='' width='16'/> <b><a href='http://sigli-cyber.blogspot.com' target='_blank' title='Sigli Cyber'>Comments for blogger!</a> brought to you by Sigli Cyber , Ingin Kotak Komentar seperti ini? <a href='http://sigli-cyber.blogspot.com/2012/08/cara-membuat-kotak-komentar-versi.html' target='_blank' title='Sigli Cyber'> KLIK DISINI!?</a></b></div>
</b:if>
Kelebihan kotak komentar facebook versi baru ini ada 2 pilihan warna, nah kode diatas untuk warna gelap dan klo mau yang terang silahkan hapus kode dark yang saya kasih warna merah ,ubah menjadi Light dan untuk ukuran silahkan sesuaikan dengan lebar postingan anda masing-masing.
8. Jika, semua langkah diatas sudah anda ikuti dengan benar, Save Template anda dan lihat hasilnya, klo benar, anda akan mendapati tampilan seperti ini:
|
Jika Anda mendapati kesulitan,Jangan Sungkan-Sungkan untuk Berkomentar,Agar mendapatkan kunjungan balasan dari saya
kotak komentar Facebook nih maksudnya sobat, keren sob kotak komentarnya...
BalasHapusYa,,makasih kk....
Hapus