Home » , » Cara Membuat Kotak Komentar Facebook Terbaru untuk Blogspot ( with reply )

Cara Membuat Kotak Komentar Facebook Terbaru untuk Blogspot ( with reply )

Written By Em Yahya on Sabtu, Juni 01, 2013 | 18.58

Tips ini sebenarnya bukan lagi hal baru, namun ada beberapa penambahan fitur yang cukup bagus saya pikir dari sebelumnya.

Pada Facebook Comment Box yang terbaru ini juga bisa mengirimkan pemberitahuan kepada admin atau pemilik website/blog tersebut jika ada seseorang yang meninggalkan komentar di website/blog tersebut. Cukup menarik bukan, karena berbeda dengan Comment Box yang lama, yang tidak memiliki fitur Reply (Balas), Like (Suka), Notification (Pemberitahuan).


ya udah langsung aja :

1. Matikan dulu default comment nya blogspot. Caranya Anda tinggal masuk setelan /setting >> Komentar >> lalu sembunyikan komentar. Kecuali Anda menginginkan ada dua komentar di dalam Blog Anda , langkah pertama ini bisa dibaikan .Jika Anda memilih default comment blog dihilangkan konsekwensinya adalah komentar yang terdahulu menjadi tidak terlihat lagi, tapi tidak menjadi hilang. Namun dengan komentar facebook yang terintegrasi di Blog Anda, maka setiap komentar akan terintregasi dengan FB. sekali lagi keputusan di tangan Anda.

2. Membuat Aplikasi FB untuk mendapatkan ID ( untuk yang belum  punya ). Caranya silahkan Anda daftar disini 

silahkan isi nama situs url dan bahasa sesuai dengan keinginan Anda.


  • Simpan ID aplikasi anda dalam notepad untuk sewaktu waktu dibutuhkan
  • Tambahkan backslash diakhir link url Anda
  • Contoh : http://goo-dude.blogspot.com/
3. Silahkan Anda masuk tab Rancangan >> edit HTML >> centang kotak "expand widget"
( Sebelumnya silahkan Anda Backup dulu Templatenya dengan mengklik tombol Download Template Lengkap untuk berjaga - jaga)

4. Silahkan anda cari kode dibawah ini :

<html

lalu tambahkan code dibawah ini setelahnya ( note: tambahkan spasi sebelum dan sesudahnya )

xmlns:fb='http://www.facebook.com/2008/fbml'

 ini contohnya :

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='....

 lalu cari code html berikut :

<body>

masukan code dibawah ini setelahnya :

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

Silahkan Anda ganti tulisan merah ID ANDA dengan ID yang Anda punya.

sekarang Anda cari code dibawah ini :

</head>

 lalu masukan code dibawah ini sebelum code tadi :

<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 SITUS' property='og:site_name'/> <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/> <meta content='ID ANDA' property='fb:app_id'/> <meta content='LINK PROFIL FACEBOOK ANDA' property='fb:admins'/> <meta content='article' property='og:type'/>

jangan lupa mengganti NAMA SITUS : dengan deskripsi situs Anda, ID ANDA dan LINK PROFIL ANDA

sekarang anda cari kode dibawah ini :

<data:post.body/>

atau

<div class='post-header-line-1/>

jika Anda sudah memakai script AUTO READ MORE ( untuk yang belum silahkan Anda coba disini ), biasanya ada 2 <data:post.body/>. silahkan letakkan di post body yang ke 2. ( code diatas sebenarnya tidak mengikat, tergantung dari widget template Anda, anda bisa meletakkannya setelah code : <div class='post-footer-line post-footer-line-3'>, dikarenakan 'header - line' dipakai untuk RELATED POST red )

lalu masukan code dibawah ini setelahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'> <p align='left'><img alt='' class='icon-action' height='51'
src='http://4.bp.blogspot.com/-2bwcV-NGJVU/TlEp8gHSjiI/AAAAAAAAA9M/0Q_3RCd70rc/s1600/Untitled-1.jpg'
width='331'/></p> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div><fb:comments width='580' expr:title='data:post.title' expr:href='data:post.url'
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='http://3.bp.blogspot.com/-LnaWu9M2b5s/TlEnQkIfePI/AAAAAAAAA9I/HhPGjVUZPDk/s1600/blog.gif'
width='16'/> <b>
<a href='http://goo-dude.blogspot.com/2011/08/cara-membuat-kotak-komentar-facebook.html' target='_blank'
title='cara membuat facebook comment'>Grab This Comment Form</a>
</b></div> </b:if>

Silahkan Anda ganti 580 dengan ukuran post body Anda, atau Anda dapat merubah gambar Komentar dengan mengganti link : ( http://4.bp.blogspot.com/-2bwcV-NGJVU/TlEp8gHSjiI/AAAAAAAAA9M/0Q_3RCd70rc/s1600/Untitled-1.jpg ) dengan gambar Anda.

Silahkan klik pratinjau untuk melihat hasil sementara. bila sudah fix silahkan Save Template Anda.

Selamat mencoba..


Share this article :

0 comments :

Posting Komentar

Kami sangat menghargai komentar pembaca sekalian, baik saran, kritik, bantahan dan lain sebagainya.
Bagi pembaca yang ingin berkomentar silahkan untuk login.

Peraturan komentar:
-komentar pendek atau panjang tidak masalah, baik lebih dari satu kolom juga tidak apa-apa.
-komentar menggunakan bahasa yang baik dan benar tidak berbelit-belit.
-langsung pada topik permasalahan. Terimakasih

Blog Archive

 
Support : Dzul Kifayatain_Tis'ah | kanahayakoe | Coretane Emye
Copyright © 2013. emye Blogger - Kertahayu Boy - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger