Memasang Kotak Komentar Facebook + Notifikasi Di Facebook ~ Μāũľăńą Ĩńśpĭŕāšĭ

Baru nge-post lagi neh All \m/
hehe,, lagi sibuk nyiapin blog baru soalnya :D
Kali ini saya akan memberikan tutorial mengenai "memasang komentar facebook pada blog"

Okey, Langsung Saja deh :D
Tapi terlebih dahulu backup template anda untuk menghindari kesalahan

Step 1. Disable/nonatifkan komentar default blog
Kenapa ? karena nanti tampilan blogmu akan rancu kalau ada 2 kotak komentar
Cara Disable : Buka Akun blogger > setting > comments > Pilih "Hide" > Save Setting

Step 2. Membuat aplikasi facebook untuk komentar blog
Masuk ke link Facebook Developers > Buat Aplikasi > Masukkan Nama Aplikasi (terserah anda) > tandai "SETUJU" > klik "Create Application"
Nah aplikasi selesai, tinggal kita konekin ke blog kita, masuk ke tab "Situs Web" lihat gambar

Setelah itu klik "Simpan Perubahan"

Nah, kita sudah dapatkan ID aplikasinya, kita lanjut lagi ke blogger

Step 3. Memasukkan Kode Ke Template Blog
Masuk ke akun blogger > Layout > Edit HTML > Expand Widget Template
cari kode ini <html

Kalu sudah ketemu, tambahkan kode dibawah ini
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Script</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
xmlns:fb='http://www.facebook.com/2008/fbml'
</div>
</div>
</div>
xmlns:fb='http://www.facebook.com/2008/fbml'

Harus ada Spasi diantara kode tersebut, ini contohnya
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Script</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..............2005/gml/expr' >

</div>
</div>
</div>

Langkah selanjutnya,
Cari kode <body>
Setelah kode atau dibawah kode diatas masukkan script dibawah ini
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Script</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId : 'ID Aplikasi 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>

</div>
</div>
</div>

Selanjutnya, Memasang Open Graph Protocol Tags

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Script</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

<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='NAMA BLOG ANDA' property='og:site_name'/>
<meta content='URL LOGO BLOG ANDA.gif'   property='og:image'/>
<meta content='ID APLIKASI ANDA'   property='fb:app_id'/>
<meta content='ID FACEBOOK ANDA'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

</div>
</div>
</div>

Sesuaikan Tulisan yang berwarna diatas dengan blog anda dan facebook anda
setelah merubah/mengedit script diatas, cari kode </head>, lalu simpan script diatas sebelum tag </head> atau diatasnya.

Step 4. Menambahkan kotak komentar facebook.
cari kode <data:post.body/> kemudian masukkan script dibawah ini kebawah kode <data:post.body/>

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Script</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

<b:if cond='data:blog.pageType == "item"'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP7VojnQ2GRzH4Iwi3X_VKEeIkoR1Omi_mwoKd763mnbpeoz54y7nJf20HiXOh2ZzJjwxdo4CcsXtBpAqe_sgcfwllQy7Fy3p6ZdhGYHdevdZG-Xd4hmwZ5FxxK974EMJuOYCYN7GeMUA/s1600/cooltext527602427.png' width='16'/> <b><a href='http://www.lorddayz.blogspot.com/' target='_blank' title='blogger templates'>LordDayz Comments For Blogger</a> Mau Pasang Kotak Kmentar Facebook Seperti Ini ? Klik Link ini <a href='http://lorddayz.blogspot.com/2011/06/memasang-kotak-komentar-facebook.html' target='_blank' title='kotak komentar fb'>LordDayz Facebook Comment Tutorial</a></b></div>
</b:if>

</div>
</div>
</div>

Ganti tulisan yang berwarna biru susai dengan keinginan anda.. untuk colorscheme hanya ada 2 pilihan yaitu "Light" & "Dark"

Posted in: Tutorial Blogger

Μāũľăńą Ĩńśpĭŕāšĭ

Senin, 04 Juli 2011

Memasang Kotak Komentar Facebook + Notifikasi Di Facebook

0 komentar:

Posting Komentar

Share

Followers

Contact Me

Labels

Blog Archive

Lencana

Popular Posts

Fans Page

Tukar Link

Chit Chat