Apa yang anda cari ?


CSS

Minggu, 02 Desember 2012

Membuat komentar facebook di blog dengan cara mudah

·





Membuat komentar facebook di blog dengan cara mudah - Mencari trafik di Facebook sangatlah hal yang efektif, Facebook memiliki pengguna yang sangat banyak di dunia. Maka kalau tidak di pergunakan semaksimal mungkin akan terasa rugi banget. Biar lebih profesional kasih status di atas komentar  .  Selain dengan cara share di jejaring sosial, ada juga yang efektif lagi yaitu memberikan kotak komentar facebook di blog. Indonesia yang memiliki akun facebook sangatlah banyak dari anak kecil, remaja, dewasa dan orang tua semua berbaur di jejaring sosial. Dengan adanya kotak komentar facebook maka pengunjung yang memiliki akun facebook akan mudah untuk berkomentar, selain berkomentar otomatis mereka akan memberikan tautan blog kita.

Berikut Langkah - langkah membuat Komentar Facebook
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:

<html


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


Perhatikan gambar dibawah ini:

Intinya didalem tag buka html aja, terserah juga sih klo anda mau nambahinnya setelah parameter xmlns pertama, kedua, atau bahkan terakir hhe... atur aja deh sesuka hati anda :)

5. Kita akan menambahkan SDK aplikasi ini kedalam template blog kita, kenapa pake SDK? karena ini berbentuk aplikasi, jadi layaknya menggunakan Aplikasi Programming semisal Jcreator, Netbeans atau Eclipse, kita pun membutuhkan SDK :)

Untuk itu silahkan cari kode <body>

Dan masukkin script SDK 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>


Tadi kan saya suruh diemin dulu atau di copy ke Notepad tuh App ID dan temen-temennya, 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 == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>


pokoknya diawal-awal Script template anda lah. Kemudian tambahkan tag dibawah ini persis dibawah title anda atau setelahnya:

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


Klo udah ganti semua keterangan yang saya kasih warna merah sesuai dengan keterangan milik anda masing-masing, MY-SITE-NAME bisa anda ganti dengan judul blog anda, YOUR-APP-ID bisa anda ganti dengan Applications ID anda di Langkah kedua tadi, dan YOUR-FACEBOOK-PROFILE-ID bisa anda ganti dengan ID Profil anda masing-masing, Oiya klo mau anda juga bisa menambahkan script diatas sebelum kode </head> hhe... tapi saran saya sih setelah title aja :)

7. Kita akan langsung memasukkan Script kotak komentarnya, dengan cara cari kode berikut:

<data:post.body/>


Atau

<p><data:post.body/></p>


Klo udah ketemu Copy Script dibawah ini tepat dibawahnya atau setelahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='500'/></div>
<div style='background-color: #FFFFFF;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://tutorial-blogz.blogspot.com' target='_blank' title='DJ Note'>Comments FACEBOOK</a> DAPATKAN KOMENTAR FACEBOOK ! , Ingin Kotak Komentar seperti ini? <a href='http://tutorial-blogz.blogspot.com/2012/02/cara-membuat-komentar-facebook-di-blog.html' target='_blank' title='tutorial blogger'> klik disini !?</a></b></div>
</b:if>


Tadi kan diawal saya bilang tuh klo 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 yang saya kasih warna merah: colorscheme='dark' dan untuk ukuran silahkan sesuaikan dengan lebar postingan anda masing-masing :)

Semoga Berhasil :)
Comments
1 Comments

1 komentar:

Simon Child mengatakan...

nice post ^^

Poskan Komentar

Mari berpartisipasi dalam berkomentar,dengan diberikannya hak untuk menyatakan pendapat dan berbicara ,mari nyatakanlah pendapatmu tentang artikel diatas asalkan tidak berunsur SPAM/Penipuan,tidak berbau pornografi dan menggunakan bahasa yang ramah.

handapeunpost