Cara Membuat Kotak Komentar Blog & Facebook
*Prosedur kotak komentar yang terlalu rumit, seperti : kode
captca yang harus diisi, harus mempunyai akun google untuk bisa berkomentar,
harus menjadi member atau follower terlebih dahulu, menggunakan kotak komentar
pada jendela baru, dsb. Saran saya hindarkan prosedur tersebut apabila ingin
mendapatkan komentar dari pengunjung biasa (bukan follower).
*Sistim komentar blog yang kurang atraktif. Saran saya
tambahkan emoticon pada sistim komentar blog dengan animasi emoticon yang unik
dan menarik.
*Kotak komentar standar bawaan blog. Saran saya gunakan trik
pada postingan artikel ini untuk mempercantik dan menambah pilihan kotak
komentar untuk pengunjung blog.Apabila sobat blogger masih menggunakan prosedur
sistim komentar seperti pada faktor-faktor yang saya sebutkan di atas silakan
sobat rubah dulu prosedurnya supaya trik Membuat Kotak Komentar Blog &
Facebook ini bisa maksimal hasilnya.
Cara Pemasangan :
- Login ke blog sobat...
- Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
- Copy-paste kode berikut ini di dalam kode <Html>. xmlns:fb='http://ogp.me/ns/fb#'
Contoh :
<html expr:dir='data:blog.languageDirection' 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' xmlns:fb='http://ogp.me/ns/fb#'> - Pasang kode meta-tag berikut ini dan taruh di bawah kode <Html>.<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 expr:content='data:blog.homepageUrl' property='og:site_name'/>
<meta content='favicon.ico' property='og:image'/>
<meta content='App ID Facebook Sobat' property='fb:app_id'/>
<meta content='ID Facebook Sobat disini' property='fb:admins'/>
<meta content='article' property='og:type'/> - Apabila sobat belum menggunakan kode JQuery silakan copy kode JQuery berikut dan taruh di atas kode </Head> pada template blog. Jika sudah ada kode JQuery di blognya silakan lewati langkah ini.<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/>
- Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.<style>
.comments-page {}
#blogger-comments-page {display: none;}
.comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
.comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
</style>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script> - Kunjungi situs Facebook kemudian login ke akun facebook sobat.
- Masuk ke Facebook Developper untuk mendapatkan kode script facebook comment.
- Klik "Get Code" untuk menampilkan kode script facebook comment.
- Langsung klik "Get Code" saja, untuk mendapatkan parameter App ID Facebook.
- Terlihat pada gambar di atas terdapat dua kotak kode script. - Copy kode script pada kotak pertama kemudian simpan sementara menggunakan notepad. Hal ini dilakukan untuk mendapatkan App ID Facebook.
Contoh :
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=198573203529943";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Perhatikan teks angka yang berwarna merah, teks tersebut merupakan kode untuk App ID Facebook Sobat. Gunakan angka tersebut sebagai App ID Facebook yang akan digunakan pada beberapa kode script. - Sekarang kita akan mengambil kode ID Facebook Sobat, caranya masuk ke akun facebook sobat kemudian lihat di kotak
address bar browser yang ada di atas.
Contoh :
https://www.facebook.com/bangprohiPada teks yang berwarna merah terdapat Nama atau Angka dibelakang Alamat Facebook, itulah ID Facebook Sobat. Gunakan ID tersebut untuk digunakan sebagai kode ID Facebook. - Copy-paste kode di bawah ini dan taruh di bawah <Body> pada kode HTML template blog sobat. <div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'App ID Facebook Sobat',
channelUrl : '<data:blog.url/>',
status : true,
cookie : true,
xfbml : true
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
Gunakan App ID Facebook yang tadi sudah sobat dapatkan. - Copy-paste kode di bawah ini dan taruh di bawah <div class='comments' id='comments'> atau kode yang mirip dengan kode <div class='comments' id='comments'> pada kode HTML template blog sobat.<div style='margin-left:20px;'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png' style='vertical-align:top;'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='https://lh4.googleusercontent.com/-hq1JcDFnlFY/T1h53RSuHqI/AAAAAAAABV0/XOyCtVQYLVU/s800/blog-icon.jpg' style='vertical-align:top;'/> <data:post.numComments/> Comments
</div></div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page' style='margin:10px 20px 10px 20px;'>
<b:if cond='data:blog.pageType == "item"'>
<fb:comments colorscheme='dark' data-num-posts='10' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' notify='true' width='575'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>- Kode margin-left:20px; merupakan pergeseran tab dari kanan sebesar 20px.
- Kode margin:10px 20px 10px 20px; merupakan pergesaran kotak komentar facebook dari tab komentar sebesar atas 10px, kanan 20px, bawah 10px dan kiri 20px.
- Kode width='575' merupakan dimensi lebar kotak komentar facebook.
- Klik "Save" dan lihat hasilnya...
Trik Membuat Kotak Komentar Blog & Facebook pada postingan artikel ini sudah dilengkapi dengan beberapa fitur, antara lain :
- Banyaknya jumlah komentar yang ada pada komentar facebook dan komentar blog.
- Menggunakan sistem Tab untuk memisahkan antara komentar facebook dengan komentar blog.
- Pada komentar facebook dilengkapi dengan notifikasi pesan, jadi apabila ada komentar baru yang diketik melalui kotak komentar facebook bisa langsung diketahui melalui akun facebook sobat atau bisa langsung dicek di http://developers.facebook.com/tools/comments.
Sekian postingan saya tentang Cara Membuat Kotak
Komentar Blog & Facebook semoga bermanfaat.
2 komentar:
nice gan..
perlu di coba..
tapi masih belum paham.. ><
visit back ya? di http://ilmu-duniadanakhirat.blogspot.com
oke2, thanks dah berkunjung bro :)
Posting Komentar