Cara Memasang Komentar Facebook di Blog - memasang komentar facebook responsive di Blogger. Sebagian besar pengguna internet selalu terhubung dengan akun facebooknya jadi agar para pengunjung blog lebih mudah berkomentar menggunakan akun Facebooknya. Komentar Facebook di Blogger adalah untuk menghubungkan konektivitas antara social media tersebut dengan blog kita. Sehingga, blog kita mendapatkan lalu lintas yang besar dengan Facebook.
Anda pasti telah berkunjung ke blog - blog atau website yang memasang komentar facebook ini. Untuk cara membuat kotak komentar Facebook ini cukup mudah dan agar blog Anda lebih terkonektivitas dengan Facebook.
Kesempatan ini spezer akan membagikan komentar Facebook yang dapat dipasang di Blog Blogger, yaitu komentar Facebook untuk template biasa dan komentar Facebook responsive untuk template responsive. Berbicara soal template responsive maka anda dapat melihat koleksi template seo responsive ini di template Blogger responsive terbaru.
2. Pilih menu template --> Edit HTML.
3. Cari kode (CTRL+F) ini <div class='comments' id='comments'>
4. kemudian letakkan kode di bawah ini tepat dibawah kode<div class='comments' id='comments'>
Yang perlu kamu lakukan adalah menambahkan kode javascript ini:
</head>
Langkah berikutnya adalah memasang kode html. Letakan kode berikut ini dibawah kode untuk related post atau jika sobat bingung silahkan cari kode<div class='comments' id='comments'> , jika ada lebih dari 1 kode silahkan coba satu persatu. Kode FB Komennya seperti ini:
1. Dashboard >> Template >>Edit HTML
2. Cari (CRTL+F) kode<body>
3. Copy kode berikut ini dan simpan (paste) di bawah kode<body>
<div class='comments' id='comments'> . Jika ada lebih dari 1 kode di tempalte blog Anda, simpan di bawah kode yang kedua atau dicoba satu persatu
Angka 600 adalah lebar kotak komentar Facebook. Sesuaikan dengan lebar text area blog Anda.
5. Save Template dan selesai.
Bagaimana sobat mudah bukan?, memang cara memasang komentar facebook di template blog ada bermacam-macam kodenya, tinggal sesuaikan saja dengan template blog yang anda gunakan. Semoga tutorial cara memasang komentar facebook dan komentar facebook responsive ini mudah di pahami, dan selamat mencoba.
Sebelum melakukan tutorial dibawah ini sebaiknya backup dulu template blog kamu (misalnya simpan semua kode template di notepad ) agar nantinya jika terjadi kesalahan atau tidak sesuai dengan keinginan maka mudah untuk dikembalikan seperti semula
Cara memasang Facebook komentar di Template Blog biasa
1. Masuk ke akun blogger.2. Pilih menu template --> Edit HTML.
3. Cari kode (CTRL+F) ini
4. kemudian letakkan kode di bawah ini tepat dibawah kode
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>5. Silahkan cari dan ubah kata "ID FACEBOOK KAMU" dengan id facebook kamu. Dan lihat hasilnya.
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<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='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FACEBOOK KAMU' property='fb:admins'/>
<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>
<style>.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}</style>
Cara memasang Facebook komentar Responsive
Untuk anda yang sudah memasang kotak komentar facebook, tutorial ini cocok kamu terapkan di blog kamu yang sudah mendukung fitur responsive. Komentar facebook responsive berikut ini adalah kotak komentar Facebook yang dibuat responsive. Hal ini di lakukan untuk mendukung bagi yang menggunakan template responsive.Yang perlu kamu lakukan adalah menambahkan kode javascript ini:
<script type="text/javascript">Copy dan Paste kode tadi di atas kode
//<![CDATA[
$(window).bind("load resize", function(){
var url = location.protocol+'//'+location.host+location.pathname;
var containercm_width = $('#container-commentfb').width();
$('#container-commentfb').html('<div class="fb-comments" ' +
'data-href="'+url+'"' +
' width="' + containercm_width + '" data-num-posts="10"></div>');
FB.XFBML.parse( );
});
//]]>
</script>
Langkah berikutnya adalah memasang kode html. Letakan kode berikut ini dibawah kode untuk related post atau jika sobat bingung silahkan cari kode
<b:if cond="data:blog.pageType == "item"">Jika bingung, hapus semua kode Facebook komen yang ada di blog kamu, lalu di ganti dengan kode yang sudah seocips berikan diatas.
<h4>Post Comment</h4>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%'><fb:comments expr:href='data:post.url' num_posts='5' width='500'/></div>
</b:if>
Cara Memasang Facebook komentar Bag.3
Ok langsung saja berikut langkah-langkahnya;1. Dashboard >> Template >>Edit HTML
2. Cari (CRTL+F) kode
3. Copy kode berikut ini dan simpan (paste) di bawah kode
<div id='fb-root'/>4. Copy kode berikut ini dan simpan (Paste) tepat di bawah kode
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<b:if cond='data:blog.pageType == "item"'>NOte:
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5' data-width='600' expr:data-href='data:blog.url'/>
</div>
</b:if>
Angka 600 adalah lebar kotak komentar Facebook. Sesuaikan dengan lebar text area blog Anda.
5. Save Template dan selesai.
Bagaimana sobat mudah bukan?, memang cara memasang komentar facebook di template blog ada bermacam-macam kodenya, tinggal sesuaikan saja dengan template blog yang anda gunakan. Semoga tutorial cara memasang komentar facebook dan komentar facebook responsive ini mudah di pahami, dan selamat mencoba.
50 Komentar untuk "3 Cara Mudah Memasang Komentar Facebook di Blog"
Gan kalo floating social bookmark yang buat template Jhony Wuss V5 ada gak???
Work gan....thank infonya
buahan-sehat.blogspot.com
mantap gan, it works!
kayaknya sudah pernah posting tapi lupa dibagian yang mana..
ok sama-sama
ok thanks..
gan mw nanya habis dapat kodenya kan di letakkan di bawah ya,trus mengganti id fbnya gimana gan??
Terima kasih gan :)
mantap, komen fb menurut saya sangat panting terutama bagi pangunjung situs kita yang noabene bukan seorang blogger
MAKASIH MAS....UDH DICOBA NIH..SALAM KENAL YA...JANGAN LUPA KUNBALNYA http://volimaniak.blogspot.com/
makasih gan. berhasil (h) x-)
thanks gan uat infonya
thanks gan buat infonya
kalo cara buat komentar fb berdampingan dgn komentar blogger gimana gan ??
wah mantap, kebetulan sy cari artikel ini, tapi sy kok jadi lebih tertarik dengan kolom komentar-nya seocips ini bisa tambah scrol gimana itu..? thanks
thank gan izin praktekin
Terimakasih gan, langsung praktekin.
Iya benar sekali sob..
Ok selamat untuk yogi :d
Saya hanya menambahkan kode height: 360px dan overflow: auto dibagian css komentar blog.
PK sob silahkan :>)
Ok sob tinggal silahkan dipraktekan.
Ok sama-sama
mantap gan,,,, ijn copy
WAH aku lg cari yg ini nih... ijin praktek y min
thx mass, work (y)
Mantap it's Work, Oia Biar komentarnya terintegrasi dengan akun facebook / fanspage kita gimana gan? biar ada notofikasinya gitu :D
thanks
udah bisa dipasang :D thanks om :D
Akhirnya bisa, makasih ya mas
Trimkasih. Mantab (y)
ini id facebook apa maksudnya om? saya kan punya fan page blog, apa nama fan page blog itu yg dimasukkan?
its work,, thanks gan (o)
gan untuk web work gak??
mantab bro
work..trimakasih
:) sangat bermanfaat,,
nah ini web yang paling sering saya kunjungi, tapi mohon dijawab ya gan pertanyaan ente,
cara menghubungkan artikel ke menu bar di blog bagaimana ya gan?
contohnya kaya punya agan "tutorial blog" dan ketika di klik semua artikel tentang blog ada, gimana ya gan cara menghubung kan artikel nya kemenu bar ? mohon bantuannya gan?
Makasih y Gan, Sukses trus SeoCips
Kunbal y Gan
Mantapsss gannn....
Izin Share Info Yang Bermanfaat ini
Cobaa ah!
Pasti bermanfaat...terimakasih
tak pasang di sini yagan, www.geodik.com
makasih saya memasang script komentar bag.3 dan hasilnya memuaskan...semoga anda bisa tetap terus berbagi. visit back : kuli adsense
makasih gan,, cara bagian ketiga yang jadi :) sukses selalu buat anda !
terima kasih gan, bagian 3 sukses di pake di blog saya :)
terimakasih, saya pake yg bag. 2
coba ah, izin serep ilmunya mas :D
izin coba mas :)
mohon ijin ke tekape dan coba masgand ? makasih ilmunya