October 10, 2015

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.

Cara Pasang Kotak Komentar Facebook di Blog Blogspot

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'/>

2. Copas kode berikut ini di bawah kode <div class='comments' id='comments'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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
LANGKAH 2

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 = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;} js = d.createElement(&#39;script&#39;); js.id = id; js.async = true; js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;; d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js); }(document));</script> </b:if> <a expr:href='data:post.url + &quot;#fb-root&quot;'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/> <script>(function(d){ var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;} js = d.createElement(&#39;script&#39;); js.id = id; js.async = true; js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;; d.getElementsByTagName(&#39;head&#39;)[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:

Tab Komentar Facebook & Blogger

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(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'><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>

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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

3 comments on Cara Pasang Kotak Komentar Facebook di Blog Blogspot

  1. gan emang sudah berhasil tapi muncul masalah baru"this feature isn't aviable right now!" mohon bantuannya

    ReplyDelete

Contact Form

Name

Email *

Message *