Cara Membuat Kotak Komentar Blog & Facebook
Salah satu bagian elemen terpenting dari suatu blog adalah kotak komentar blog. Dengan adanya kotak komentar blog kita akan bisa mengetahui tanggapan, kritikan ataupun komentar dari pengunjung tentang konten suatu blog yang sedang di lihat. Selain itu komentar dari pengunjung bisa meningkatkan kredibilitas suatu blog, semakin banyak komentar semakin baik kredibilitas konten dan pengelolaan blog... Nahh untuk menarik minat pengunjung blog supaya mau berkomentar di postingan artikel sobat, silakan di simak tips & triknya....
Terkadang tidak mudah untuk mendapatkan komentar dari pengunjung blog, hal ini bisa disebabkan oleh beberapa faktor yang menurut saya bisa berdampak mengurangi tingkat minat pengunjung untuk mau berkomentar pada postingan artikel yang di bacanya. Berikut analisa dan saran saya mengenai faktor-faktor yang bisa mengurangi minat pengunjung blog untuk mau berkomentar pada postingan artikel sobat...
Trik ini menggunakan cara menggabungkan kotak komentar facebook dan komentar blog untuk di gunakan pada sistim komentar blog. Penggunaan komentar di pisahkan dengan cara membuat tab komentar untuk memudahkan pengunjung untuk memilih kotak komentar yang sesuai dengan apa yang pengunjung inginkan. Tab komentar dilengkapi dengan info banyaknya jumlah komentar. Contoh penggunaan kotak komentar ini seperti yang ada di blog MonozCore. Oke...bro seep-kan infonya, nahhh... sekarang kita lanjutkan ke TKP....
Terkadang tidak mudah untuk mendapatkan komentar dari pengunjung blog, hal ini bisa disebabkan oleh beberapa faktor yang menurut saya bisa berdampak mengurangi tingkat minat pengunjung untuk mau berkomentar pada postingan artikel yang di bacanya. Berikut analisa dan saran saya mengenai faktor-faktor yang bisa mengurangi minat pengunjung blog untuk mau berkomentar pada postingan artikel sobat...
- 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.
Trik ini menggunakan cara menggabungkan kotak komentar facebook dan komentar blog untuk di gunakan pada sistim komentar blog. Penggunaan komentar di pisahkan dengan cara membuat tab komentar untuk memudahkan pengunjung untuk memilih kotak komentar yang sesuai dengan apa yang pengunjung inginkan. Tab komentar dilengkapi dengan info banyaknya jumlah komentar. Contoh penggunaan kotak komentar ini seperti yang ada di blog MonozCore. Oke...bro seep-kan infonya, nahhh... sekarang kita lanjutkan ke TKP....
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/monozcorePada 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.
Wuiihh postingan artikel kali ini OKE BGT kan ??? cape bro buatnya tapi ga papa ini semua berkat semangat dan cendol sobat blogger, jadi saya akan selalu memberikan postingan artikel terbaik yang unik, menarik dan atraktif..... Jangan lupa cendolnya yaa... dan dilarang meng-copy postingan artikel ini baik sebagian maupun keseluruhan tanpa persetujuan dari pihak MonozCore... oke...sob... wassallam.
.: Semoga Bermanfaat :.
FB Users (
 Print
|
   |
33 Comments
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
:a:
:b:
:c:
:d:
:e:
:f:
:g:
:h:
:i:
:j:
:ka:
:kb:
:kc:
:kd:
:ke:
:kf:
:kg:
:kh:
:ki:
:kj:
:kk:
:kl:
:km:
:kn:
:km:
:ko:
blogdash
Blog Internet
Browser Information
Blog Script 
Contact
Paid to Click
RSS Feeds
Horoscope
Set as Homepage
Google Translator
Picasa Web Album
SMS Gratis
Info Telepon
Info Listrik
Laporan Cuaca
IDR Exchange Rate
Info Lalu Lintas
SEO + PageRank Tools
Email
Facebook
Twitter
Google+1
Google Chrome
Safari
Opera
Internet Explorer
March 27, 2012 at 8:41 AM
gan wel formed gak bisa :(
March 27, 2012 at 9:48 AM
errornya dimana...???
March 27, 2012 at 2:52 PM
. . kok kayaknya ruwet banget. aq dulu pake gak seruwet ini mas. tapi kalo pake ini gak bisa pake reply ya?!? mkx sekarang gak aq pake. huhh . .
March 29, 2012 at 7:32 PM
maaf gan punya saya kok gak ada app id Facebook nya ya ... udah saya coba berkali kali tetep gak ada ...mohon pencerahan nya!!!
March 29, 2012 at 9:05 PM
@shahrul amir: wahh... mungkin sobat belum punya aplikasi facebook. Ya udah langsung aja copy kode no.1 yang sobat dapatkan dari developer facebook di bawah <body> dan untuk kode no.2 taruh di tempat yang sobat inginkan untuk keterangan lebih lanjut pemasangan kode FB coba baca artikel http://monozcore.blogspot.com/2012/01/cara-membuat-komentar-facebook-di-blog.html
March 30, 2012 at 3:53 PM
makasih gan!!!!
March 31, 2012 at 5:45 AM
Mantap gan ..
kunjung balik ya gan ...
April 1, 2012 at 6:19 AM
Makasih atas Tutorial nya Sobat..
Saya berhasil menggunakan nya...Boleh kah Saya MengCopy paste Tutorial Sobat ini sebagai pelengkap Tutorial yang Saya punya dengan memberikan Link ke Lapak Sobat..Klo Boleh, Saya tunggu kabar nya di lapak Saya..Salam Sukses..
April 1, 2012 at 9:46 AM
@DRoni: Silakan sob, saya ijinkan.
April 2, 2012 at 12:29 AM
Terima kasih Sobat...
Artikel sobat yang ini telah saya ulas ulang di lapak Saya, ditunggu masukan sobat tentang artikel yang Saya ulas Tersebut..Sekali lagi Terima kasih..
April 11, 2012 at 8:03 PM
om, punya ku kog well-formed ya
pada edit xml, baris ke 4 kolom 2
tolong pencerahannya ya.
makasih :)
April 11, 2012 at 10:29 PM
@faida yoyoy: sabar ya mba... nanti saya buatkan artikel terbarunya tentang komentar facebook ini supaya pemasangannya lebih mudah...
April 16, 2012 at 11:05 AM
Agak ribet ya? tapi saya coba ah biar ga klasik banget komentarnya
visit juga http://harmonikampus.blogspot.com ya
sekalian tinggalin komentarnya
thanks :)
April 20, 2012 at 10:19 AM
Script Body punya saya gak ada gmana ne gan...
April 22, 2012 at 2:08 AM
Saya mau coba mas,, join yah teman teman msh baru http://azys99.blogspot.com mkasih gan monoz
April 22, 2012 at 3:38 AM
MANTAPPP gan!!http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif
April 23, 2012 at 8:33 PM
bg koq masih keluar pesan ini Plugin komentar memerlukan parameter href.
April 23, 2012 at 9:02 PM
@Vicahya: coba gunakan cara pemasangan versi mudah di http://monozcore.blogspot.com/2012/04/memasang-komentar-facebook-versi-mudah.html
May 8, 2012 at 1:34 PM
Ribet dan mungkin saya urungkan saja dulu pemasangan widget ini...
Haha salam BLOGGER Indonesia aja sob :)]
May 10, 2012 at 11:44 AM
gak ada bagiannya di template ane Gan,wkwkwk..nice share.ane tambah gan.ciri ciri homo lengkap selengkapnya>>>
May 12, 2012 at 5:00 PM
Sippp :kc:
www.fhandikablog.co.cc
May 23, 2012 at 11:24 PM
ijin copas ya sob, soalnya saya mau pasang juga di blog
May 24, 2012 at 3:00 AM
@Rudy Hartono: Silakan sob... saya ijinkan jangan lupa sumbernya yaa... trims
May 25, 2012 at 3:51 AM
mantap banget mas bro.. praktek langsung berhasil.. makasih..
May 30, 2012 at 7:45 PM
eh kok aku gak dapat app ID pesbukku yah?
June 20, 2012 at 8:29 PM
Berhasil Kk
www.fhandikablog.com :D
:kc:
July 29, 2012 at 9:14 PM
sukses bos, tapi comment bloggernya g nongol t... napa y?
August 20, 2012 at 11:15 AM
Thank's gan ats infoNya ...
Kunjungi blog saya juga yah di sini
October 3, 2012 at 1:18 PM
blog nya keren, artikelnya bagus, sayang loading nya luama...bgt..
salam kenal aja..
October 20, 2012 at 4:37 PM
info ya sudah sukses saya laksanakan terimakasih Monozcore
blogs saya makin tambah mantap
October 28, 2012 at 2:08 AM
mantap gan...tapi agak ribet..maklum masih oon nih...hihihi
February 17, 2013 at 4:46 PM
sukses gan :)
makash tutornya
March 30, 2013 at 11:40 PM
Produk dijamin asli
DINA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS:0896-9198-6257 ATAU KLIK WEBSET RESMI KAMI DI http://dina-shop7.blogspot.com
BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL
SAMSUNG
Asli Buatan Korea.
HARGA PROMO
Samsung Galaxy Note II N7100 Rp 2.499.000.
Samsung Galaxy Chat B5330 Rp 1.220.000.
Samsung GT-E1205M Rp 145.000.
Samsung Galaxy Ace Duos S6802 Rp 1.525.000.
Samsung I8530 Galaxy Beam Rp 4.825.000.
Samsung Galaxy Ace 2 I8160 Rp 2.250.000.
Samsung I9300 Galaxy S III Rp 2.800.000.
Samsung I9070 Galaxy S Advance Rp 2.850.000.
Samsung Galaxy mini 2 S6500 Rp 1.400.000.
Samsung E1390 Rp 200.000.
Samsung Galaxy Ace Plus S7500 Rp 1.850.000.
Samsung S 5300 Galaxy Pocket Rp 850.000.
Samsung Galaxy Y Duos S6102 Rp 1.150.000.
Samsung C3312 Deluxe Duos Rp 500.000.
Samsung C3520 Rp 425.000.
Samsung E1232B Rp 200.000.
Samsung i9250 Galaxy Nexus Rp 2.250.000.
Samsung C3350 X Cover II Rp 750.000.
Samsung S5610 Rp 725.000.
Samsung C3330 Champ 2 Rp 525.000.
Samsung I8150 Galaxy W Rp 1.950.000.
Samsung GT-N7000 Galaxy Note Rp 1,700.000.
Samsung E1195 Rp 225.000.
Samsung Galaxy Y S5360 Rp 875.000.
Samsung i509 Galaxy Y CDMA Rp 875.000.
Samsung W139 Rp 350.000.
Samsung E2232 Rp 350.000.
Samsung I9100 Galaxy S II Rp 2.250.000.
Samsung C3322 Rp 400.000.
Samsung E1182 Rp 175.000.
Samsung E2152 Rp 425.000.
Samsung E2652 Champ Duos Rp 615.000.
Samsung S3850L Corby II Rp 550.000.
Samsung B7510 Galaxy Pro Rp 1.550.000.
Samsung Ch@t 322 Wi-Fi Rp 500.000.
Samsung GT-E1055T Rp 175.000.
Samsung GT-E3210 Rp 495.000.
Samsung I9003 Galaxy SL 4 GB Rp 1.850.000.
Samsung Nexus S i9023 Rp 1.350.000.
Samsung I9003 Galaxy SL 16 GB Rp 3.000.000.
Samsung Gio S5660 Rp 1.450.000.
Samsung Galaxy FIT S5670 Rp 1.200.000.
Samsung Samsung F480 - Rp 550.000.
Samsung Galaxy Mini S5570 Rp 900.000.
Samsung B6520 Omnia PRO 5 Rp 725.000.
Samsung S5253 Wave525 Rp 900.000.
Samsung i8510 innov8 Rp 875.000.
Samsung S5830 Galaxy ACE Rp 1.750.000.
Samsung S5333 Wave533 Rp 900.000.
Samsung C3510 Genoa - Rp 550.000.
Samsung i900 Omnia - Rp 1.100.000.
Samsung S5753 Wave575 Rp 1.000.000.
Samsung I5503 Galaxy 5 Rp 825.000.
Samsung i5510 Galaxy 551 Rp 1.250.000.
Samsung S8530 Wave II Rp 1.750.000.
Samsung C3303 Champ Rp 175.000.
Samsung I9000 Galaxy S Rp 1.650.000.