Cara Membuat Komentar Facebook di Blog

Cara Membuat Komentar Facebook di Blog - Pada tahun 2009 diperkenalkan pengembang Facebook sosial plugin terbaik mereka yang disebut "Kotak Komentar Facebook". Plugin ini dapat tertanam dalam setiap situs web atau blog dan pengunjung dapat menggunakan ID Facebook mereka, Yahoo, AOL atau Hotmail untuk memberikan komentar di situs anda. Plugin ini memang menunjukkan banyak masalah ketika tertanam dalam Blog Blogger di awal perkembangannya tapi sekarang berkat Max teman sesama blogger dari Allblogtools akhirnya plugin ini telah cocok untuk bekerja sempurna dengan host blog Blogger.

Live Demo

LIGHT SCHEME

DARK SCHEME

Anda tertarik? mari sekarang kita belajar bagaimana cara membuat kotak komentar facebook yang sangat berguna bagi blog. Mohon ikuti langkah-langkah sederhana dibawah ini,

1. Mendapatkan ID Aplikasi Facebook

1. Pergi ke Facebook Developers Page
2. Masukkan App Name dengan Nama Aplikasi dan App Namespace dengan judul blog anda (tidak wajib). Kemudian klik lanjutkan.

3. Setelah itu akan tampil seperti gambar dibawah ini kemudian simpan App ID nya di notepad. Sekarang mari kita lanjut ke langkah berikutnya dari tutorial ini.

2. Menambahkan Kotak Komentar Facebook ke Blog

Sekarang adalah saatnya untuk menambahkan kotak komentar di template blog anda. Jadi ikutilah langkah mudah berikut,
CATATAN: Pastikan blogger comments anda sudah terpasang di bawah postingan. Untuk caranya, pergi ke Blogger> Settings> Post and comments> lalu pilih embeded pada kategori komentar di bawah kategori post. Setelah melakukan hal ini ikuti tutorial di bawah ini.

Pergi ke Blogger > Design > Edit HTML
Simpan terlebih dahulu template anda
Centang kotak "Expand Widget Templates"
Carilah <html dan setelah itu berikan ruang di depan kode untuk menambahkan kode berikut,
```
xmlns:fb='http://www.facebook.com/2008/fbml'  
```
Kemudian cari
<body>
```
Catatan: dalam rancangan template blogger yang baru akan terlihat kode seperti dibawah ini
```
```
 
```
```
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
```
Paste kode berikut di bawah salah satu kode diatas
<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId : 'YOUR_APP_ID',
      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>
- Ganti YOUR_APP_ID dengan ID aplikasi Facebook anda yang telah anda simpan di notepad.
Setelah itu cari kode </head> dan diatasnya letakkan kode berikut,
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Personal Blog - Info MenARIk' property='og:site_name'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/ulasanmenarik' property='fb:admins'/>
<meta content='article' property='og:type'/>
Perubahan :
- Ganti Personal Blog - Info MenARIk dengan Judul Blog anda
- Ganti YOUR_APP_ID dengan ID Aplikasi Facebook yang anda simpan di notepad
- Ganti http://www.facebook.com/ulasanmenarik dengan link profil facebook anda
Sekarang carilah kode berikut,
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><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='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div> </b:if>
- Jika anda ingin menggunakan dark scheme silahkan ganti light dengan dark
- Untuk mengubah ukuran kotak komentar, ganti angka berikut width='520'
- Untuk mengubah ukuran footer, ganti angka berikut width:510px
- Beri selisih 10 pixel antara ukuran kotak dan ukuran footer. Misalnya jika anda mengatur ukuran kotak width = '600 ' maka ukuran footernya width: 590px

PEMECAHAN MALASAH

Jika Anda menghadapi masalah apapun maka silakan jangan ragu untuk memberi tahu saya. Saya akan merasa senang untuk melayani anda. Saya akan menulis tutorial lebih lanjut tentang topik ini sehingga anda bisa mendapatkan semua update terbaru. Saya berharap plugin ini terbukti berguna untuk sebagian besar dari anda dan memberkati blog anda dengan trafik yang signifikan . Peace! :)