Cara Pasang Kotak Komentar Facebook di Blog Blogspot
October 10, 2015
Memasang kotak komentar Facebook adalah solusi terbaik, jika komentar bawaan Blogger dihapus, atau kotak komentar blogger error, dan memasang komentar disqus memberatkan loading blog.
BERIKUT ini cara menampilkan atau memasang Kotak Komentar Facebook (Facebook Comment Box) di bawah posting blog, di atas kolom komentar blogger.
Ada juga kode untuk memasang kotak komentar Facebook berdampingan dengan komentar blogger.
Kotak komentar Facebook memudahkan pengunjung mengomentari postingan blog kita, sekaligus memudahkan nge-share-nya ke akun Facebook mereka.
Namun, risikonya, komentar Facebook tidak terkontrol dan biasanya banyak komentar spam yang gak nyambung dengan tulisan.
Biasanya para pebisnis online memanfaatkan kotak komentar Facebook di blog dan situs berita untuk promosi atau "nyebar link".
2. Copas kode berikut ini di bawah kode <div class='comments' id='comments'>
3. Save! Beres...!
Gampang 'kan cara memasang kotak komentar di Facebook?
LANGKAH 1
1. Login ke akun Facebook Anda
2. Buat dulu ID Aplikasinya di Facebook App.
3. Klik “Create New App”.
4. Ikuti langkah berikutnya dan masukkan alamat blog di “App Domain”.
5. Masukkan juga alamat blog di bagian “Select how your app integrates with Facebook”, klik “Website”, masukkan "full url" seperti http://www.contohblog.com
6. Klik “Save Changes”.
Catatan:
1. Template > Edit HTML
2. Copy & Paste kode berikut ini di bawah kode <head>.
3. Ubah YOUR_APPLICATION_ID dengan "kepunyaan" Anda yang sudah didapat di langkah pertama.
4. Copas kode berikut ini di bawah kode <div class='comments' id='comments'>
5. Save Template! Beres.....!
Gambar di atas menunjukkan dua tab komentar: Facebook dan Blogger. Pengunjung bisa pilih, mau gunakan akun yang mana untuk komentar.
CARA MEMASANG
Cara membuat tab komen fb dan blogger mudah banget.
1. Template > Edit HTML
2. Copas kode berikut ini di bawah kode <div class='comments' id='comments'>
Ganti kode fb_admin warna merah dengan milik Anda. Jika tidak punya Halaman Facebook, biarkan saja kode tersebut. Tidak masalah.
3. Save Template!
Demikian Cara Pasang Kotak Komentar Facebook di Blog Blogspot. Diperkirakan, mayoritas pengguna internet punya akun Facebook, meski banyak yang tidak aktif.
BERIKUT ini cara menampilkan atau memasang Kotak Komentar Facebook (Facebook Comment Box) di bawah posting blog, di atas kolom komentar blogger.
Ada juga kode untuk memasang kotak komentar Facebook berdampingan dengan komentar blogger.
Kotak komentar Facebook memudahkan pengunjung mengomentari postingan blog kita, sekaligus memudahkan nge-share-nya ke akun Facebook mereka.
Namun, risikonya, komentar Facebook tidak terkontrol dan biasanya banyak komentar spam yang gak nyambung dengan tulisan.
Biasanya para pebisnis online memanfaatkan kotak komentar Facebook di blog dan situs berita untuk promosi atau "nyebar link".
Cara #1 Pasang Kotak Komentar Facebook di Blogger
1. Copas kode berikut ini di bawah kode <body>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
2. Copas kode berikut ini di bawah kode <div class='comments' id='comments'>
<b:if cond='data:blog.pageType == "item"'>
<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>
<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>
3. Save! Beres...!
Gampang 'kan cara memasang kotak komentar di Facebook?
Cara #2 Pasang Kotak Komentar Facebook di Blogger
Jika cara di atas gagal, maka berikut ini cara lain yang lebih "rumit".LANGKAH 1
1. Login ke akun Facebook Anda
2. Buat dulu ID Aplikasinya di Facebook App.
3. Klik “Create New App”.
4. Ikuti langkah berikutnya dan masukkan alamat blog di “App Domain”.
5. Masukkan juga alamat blog di bagian “Select how your app integrates with Facebook”, klik “Website”, masukkan "full url" seperti http://www.contohblog.com
6. Klik “Save Changes”.
Catatan:
- Simpan ID Aplikasi Facebook Anda yang berupa angka --yang muncul setelah tahap "Create New App".
- Untuk moderasi komentar yang masuk nantinya, buka saja FB Tools Comments.
1. Template > Edit HTML
2. Copy & Paste kode berikut ini di bawah kode <head>.
<meta property="fb:app_id" content="YOUR_APPLICATION_ID"/>
3. Ubah YOUR_APPLICATION_ID dengan "kepunyaan" Anda yang sudah didapat di langkah pertama.
4. Copas kode berikut ini di bawah kode <div class='comments' id='comments'>
<b:if cond='data:post.isFirstPost'> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> </b:if> <a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>
<b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <div style='margin: 20px 0 0 0;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div> </b:if>
<b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <div style='margin: 20px 0 0 0;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div> </b:if>
5. Save Template! Beres.....!
Cara #3 Pasang Kotak Komentar Facebook di Blogger Terbaru
Cara ini khususnya untuk blog dengan template Blogger terbaru (Versi 3).
1. Pasang Script SDK
Copas kode berikut ini di bawah kode <body>
<div id="fb-root"></div><script> //<![CDATA[(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 = 'https://connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v3.1';fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));//]]> </script>
2. Pasang Script Komentar Facebook
Cari kode dengan nama comment_picker atau commentPicker di dalam template seperti ini:
<b:include cond='data:view.isSingleItem' data='post' name='comment_picker'/>
ATAU
<b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>
Untuk memudahkan pencarian, tekan keyboard CTRL + F dan cukup masukkan kata kunci name='comment_picker' atau commentPicker.
Setelah ketemu, copas kode berikut di bawah kode yang berhasil ditemukan tadi:
<b:if cond='data:view.isSingleItem'><div class='fb-comments' data-numposts='5' expr:data-href='data:blog.canonicalUrl' data-width='100%'></div></b:if>
data-numposts adalah jumlah komentar yang muncul di muka. Angkanya bisa diubah sesuai keinginan.
Gampang banget 'kan cara memasang kolom komentar Facebook di bawah postingan Blogger?
Cara Memasang Tab Komentar Facebook & Blogger
Yang dimaksud tab komentar FB dan Blogger adalah seperti gambar berikut ini. CB sudah coba dan berhasil. Ini buktinya:
Gambar di atas menunjukkan dua tab komentar: Facebook dan Blogger. Pengunjung bisa pilih, mau gunakan akun yang mana untuk komentar.
CARA MEMASANG
Cara membuat tab komen fb dan blogger mudah banget.
1. Template > Edit HTML
2. Copas kode berikut ini di bawah kode <div class='comments' id='comments'>
<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'/><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 Anda' 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>
<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 Anda' 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>
Ganti kode fb_admin warna merah dengan milik Anda. Jika tidak punya Halaman Facebook, biarkan saja kode tersebut. Tidak masalah.
3. Save Template!
Demikian Cara Pasang Kotak Komentar Facebook di Blog Blogspot. Diperkirakan, mayoritas pengguna internet punya akun Facebook, meski banyak yang tidak aktif.
Kotak atau kolom komentar Facebook memudahkan pengunjung berkomentar atau berinteraksi dengan admin sebuah blog.
Good Luck & Happy Blogging! (www.contohblog.com).*
Good Luck & Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
gan emang sudah berhasil tapi muncul masalah baru"this feature isn't aviable right now!" mohon bantuannya
ReplyDeleteok berhasil.. thank
ReplyDeleteBerhasil gan.. makasih
ReplyDelete