Home » , » Cara Pasang Kotak Komentar Facebook di Blog Blogspot

Cara Pasang Kotak Komentar Facebook di Blog Blogspot

Cara Pasang Kotak Komentar Facebook di Blog Blogspot
CARA membuat, menampilkan, atau memasang Kotak Komentar Facebook (Facebook Comment Box) di Blog Blogspot sangat mudah. Kodenya sudah disediakan Facebook.

Ini cara paling mudah menampilkan kolom komentar yang bisa dishare langsung ke Facebook oleh Anda atau pengunjung.

Anda bisa "ambil" kode kotak komentar FB itu di sini: Facebook Developer.

Jika gagal, Anda bisa memasang Kotak Komentar Facebook di bawah posting blog dengan menggunakan kode-kode lainnya yang CB share juga di bawah kode facebook comments box for blogger pertama.

Kotak Komentar Facebok Ini, Bagus Tidak Buat SEO Blog?

kotak komentar facebook di blogSebelumnya, kita ulas dikit, Kotak Komentar Facebook di Blog bisa bagus buat SEO, jika banyak --bahkan kebanyakan-- pengunjung Anda komentar di sana dan di-share ke akun Facebooknya.

Tapi, jika hanya sedikit, bahkan tidak ada sama sekali yang komentar di kotak komentar Facebook itu, maka sebaiknya LEPAS saja, karena hanya memperlambat loading blog Anda dan ini artinya justru mengurangi SEO Blog --Google suka banget blog yang Fast Loading!

CB sendiri "terpaksa" memasangnya sekadar untuk contoh, namun hanya di halaman posting ini dimunculkannya. Di posting lain tidak ada karena menggunakan Tag Kondisional.

Cara Pasang Kotak Komentar Facebook di Blog Blogspot

Siap pasang komentar facebook di blog Anda? Mari kita mulai!

1. Pasang Meta Facebook. Simpan di bawah kode <head>

<meta content='12345678' property='fb:admins'/>
<meta content='12345678910' property='fb:app_id'/>

Ganti angka-angkanya dengan FB Admin ID dan FB App ID Anda. Baca: Cara Mendapatkan FB Admin ID dan FB App ID.

2. Copas kode berikut ini di bawah kode <body>

<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

3. 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...! Kini Kotak Komentar Facebook sudah muncul di blog Anda, di bawah posting atau di bawah related post dan di atas kotak komentar blogger.

Gampang 'kan cara memasang kotak komentar di Facebook?

CARA KEDUA
Jika cara di atas gagal, maka lakukan cara berikut ini.

1. Lakukan langkah pertama seperti di atas (Pasang Meta Facebook).
2. Pasang KODE JS. Simpan kode berikut inidi atas kode </head>

<script type="text/javascript">
//<![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>

3. Pasang KODE JS/HTML.
Simpan kode berikut ini di bawah <data:post.body/> (yang kedua atau ketiga) atau di bawah kode <div id='related post'> ... </div> atau di dalam kode  <div class='post-footer-line post-footer-line-3'> </div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='10' width='650'/></div>
</b:if>

4. Save Template!

MASIH ADA CARA LAIN !
Jika dua cara menampilkan Kotak Komentar Facebook di atas gagal, lakukan cara lain berikut ini:

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>

2. Save Template! Beres.....!

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!

Mau Pasang Kotak Komentar Facebook, Blogger, Disqus Sekaligus?

Jika mau pasang kotak komentar facebook, blogger, dan disqus sekaligus, tiga-tiganya ada, silakan meluncur ke TKP: Cara Pasang Kolom Komentar FB, Blogger, Disqus Sekaligus.

Demikian cara memasang kotak komentar Facebook di Blog. Semoga tidak diserbu komentar spam yang "berburu backlink" dan "promosi jualan online" ya, terutama tukang obat dan tukang judi :) Good Luck & Happy Blogging! (http://www.contohblog.com).*

Thanks for reading & sharing Cara Pasang Kotak Komentar Facebook di Blog Blogspot

Previous
« Prev Post

106 comments:

Comment Page:
  1. Replies
    1. thx sob udah berhasil
      www.idcheat.com

      Delete
  2. mntap gan, langsung praktekin
    https://www.facebook.com/TasbihDigitalBilfanurshop

    ReplyDelete
  3. Kira2 pengaruh ga ke PR blog?

    ReplyDelete
    Replies
    1. Absolutely....! That will get you more fans while boosting your SEO for more love from search engines :)

      Delete
    2. aku kok gag work ya?
      its not work for me..

      Delete
  4. mantaap bos tapi releted post dmn itu???

    ReplyDelete
    Replies
    1. di bawah postingan, setelah kode "social share" sebelum kode "comment"....

      Delete
    2. Di sini aja, simpan kode tepat di bawah kode ini:
      < div class='post-footer-line post-footer-line-3' >

      Delete
  5. numpang singgah min, :D http://infosengin.blogspot.com

    ReplyDelete
  6. Maksud dari paste di bawah kode yang digunakan untuk Related Posts apaan gan?
    kode yang digunakan untuk Related Posts itu apa?

    ReplyDelete
    Replies
    1. Cari kode <div id="related-posts... dan simpan kode tsb setelah penutup kode-nya </div ... (Jika blog Anda menggunakan Related Posts)........

      Delete
    2. Blogku gak make Related Post gan, Terus Pasteinnya dimana?

      Delete
    3. simpan di bawah kode *< div class='comments' id='comments' >*

      Delete
    4. simpan di bawah kode kaya gini:
      < div class='post-footer-line post-footer-line-3' >

      Delete
  7. Mantap gan. Ane coba dulu...

    ReplyDelete
  8. Mantap nih gan, kebetulan ane mau ganti form komentar di blog ane. Eh, klo untuk wordpress gimana ya gan? Mohon infonya

    ReplyDelete
    Replies
    1. WP self-hosting tinggal pake plugin aja >
      https://wordpress.org/plugins/facebook-comments-plugin/

      Delete
  9. berhasil gan., hehehehehehe....,

    silahkan dilihat hasilnya disini http://simplenews05.blogspot.com/

    ReplyDelete
  10. Klo ga ada yang koment ga muncul ya kotaknya ?

    ReplyDelete
  11. aq kok gk da ya kode nya gk bisa ditebukan kode < body >

    ReplyDelete
  12. aku ra dadi komen fbne mas .. piye toh :(

    ReplyDelete
  13. sip gan, sanat bermanfaat sekali artikelnya. dan menambah wawasan saya. terima kasih.

    ReplyDelete
  14. Setelah saya ganti tempalte.... anehnya jika ada yan berkomentar ga ada pemberitahuan.

    bagaimana solusinya? Tolong Jawab ya
    www.infokeguruan.com

    ReplyDelete
    Replies
    1. Setting > Post and Comment > Comment Moderation

      Delete
  15. hmmm .. ga bisa sih ?

    ReplyDelete
    Replies
    1. coba lagi, sudah diupdate tutorialnya.... ada cara kedua

      Delete
  16. Daftar email-email spam, silakan diblok atau dilaporkan:
    noreply@popularserver.biz
    vika.seminar@indo.net.id
    vita@mitrapembelajar.net
    promodiskon@idwebhost.com
    vtoko31@gmail.com
    amelia@mitrapembelajar.net
    nani.t@apple-consulting.org
    hrd2014.seminar@gmail.com
    noreply+1729052236@badoo.com
    info@toptrainingindonesia.com
    saleshp@studiohp.com
    marketing@marksharetraining.com
    newsletter@reply.agoda-emails.com
    vtoko31@gmail.com
    dmt01@dmt-id.com
    dmt02@dmt-id.com
    dmt03@dmt-id.com
    dmt04@dmt-id.com
    dmt05@dmt-id.com
    semua yang berakhiran @quantumw.com
    semua yang berakhiran @elchuliprecio.com
    semua yang berakhiran @yscglobalsecurities.com

    ReplyDelete
  17. Makasih Mas Tutorialnya,,, Langsung ane praktekin kx..

    ReplyDelete
  18. mau praktekkan bikin komentar facebook nih, doakan semoga berhasil

    ReplyDelete
  19. mas, saya kok tdk menemukan kode div class='comments' id='comments'
    terus gimana ya mas?
    Matur suwun sebelumnya mas

    ReplyDelete
    Replies
    1. pasti ada....! Aktifkan kotak komentarnya di Setting > Post and comment, juga klik "Allow" di sidebar kanan bawah saat bikin posting baru

      Delete
  20. Thanks gan berhasil ane terapkan di blog ane, salam kenal
    jgn lupa mampir :D

    http://bacadroid.blogspot.com

    ReplyDelete
  21. Gak Berhasil bos..
    Apanya Ya??
    Apa Template yang d pake g mendukung ??

    ReplyDelete
    Replies
    1. Keep trying, baca dan ikuti panduannya dengan baik dan benar... kalo gagal pasang kotak komentar facebook itu, bisa juga template gak dukung, biasanya tdk ada kode skrip jquery

      Delete
  22. duhhh dari kemarin2 nemu ente terus om wkwkwk :v thanks ya om atas ilmunya :D

    ReplyDelete
    Replies
    1. mau tahu rahasinya? salah satunya karena template NJW ini:
      http://contohblognih.blogspot.com/2014/06/new-johny-wuss-v2-template-blog-seo.html

      Delete
  23. nah, itu dia masalhnya... pengen naro kotak komentar di FB (biar keren) tapi khawatir gak ada yang komen, malah bikin blog jadi lama loadingnya... uuhh

    ReplyDelete
    Replies
    1. ya gak usah pasang kotak komentar facebook dong kalo gitu.... gampang kan? he he..

      Delete
  24. mantap gan,,, ane udah coba... tengkyu tutorial nya

    ReplyDelete
  25. Keren gan, mau di coba dulu, terimakasih

    ReplyDelete
  26. Punya ane g ada < body > terus mau di letakan di mana?

    ReplyDelete
    Replies
    1. pasti ada, kalau gak < body > pastinya ada < body BLA BLA BLA.... >
      Nah, di bawah itulah...........

      Delete
  27. sudah ane buat sob, thanks yoo :D

    ReplyDelete
  28. sudah ane buat sob, thanks yoo :D

    ReplyDelete
  29. akhirnya ada komentar fb juga nih mksih tutornya omz

    ReplyDelete
  30. bos ane barusan ngubah blog ane kok kluar gambar kotak ada tulisannya "ad size 300x250" di bawah postingan ane.
    gimana cara ngilangin gambarnya gan?

    ReplyDelete
    Replies
    1. Template > Edit HTML
      Baca panduan settingnya

      Delete
  31. terima kasih mas artikelnya.....selalu memberikan ilmu-ilmu baru....
    sukses selalu...

    ReplyDelete
  32. Mantap tutprialnya, terima kasih bro....saya dah buat di blog saya, ternyata ianya boleh digunakan.

    ReplyDelete
  33. Thanks gan it'sworkk.....

    ReplyDelete
  34. terima kasih gan atas postingannya

    ReplyDelete
  35. makasig gann, ane berhasil

    ReplyDelete
  36. makasih mas, ane coba dan sukses. makasih banyak mas.

    ReplyDelete
  37. agan" yang udah mastah mohon pencerahannya kalo blog ada tulisan TEMPLATE ERROR: Invalid data reference .pageType: No dictionary named: '' in: ['blog', 'skin', 'view'] gimana yah cara ngatasin nya ?

    ReplyDelete
  38. cara ngehapus kolom komentar facebook gimana gan caranya?
    abis masang kog ga bisa dihapus yaa kolom komentar fbnya

    ReplyDelete
    Replies
    1. ya tinggal hapus lagi aja kode yang sudah dipasang... :)

      Delete
  39. kalo cara ganti warna tulisan komentarnya itu gimana gan ? soalnya background ane warna merah gelap jadi kagak keliatan komentarnya..

    ReplyDelete
    Replies
    1. Silakan baca:
      http://contohblognih.blogspot.com/2015/01/cara-mengubah-warna-tampilan-blog.html

      Delete
  40. pokoknya bagus deh postinganya kaya website profesional ja yah, ,semangat mas
    visit Kupuk Blog

    ReplyDelete
  41. Tapi jika tidak ada yang komen, lebih baik lepas saja...

    Kalimat ini membuat saya ragu pasang komen facebook di blog saya..

    Terimakasih..

    ReplyDelete
  42. terima ksih gan, ane sukses pasang comment fb di blog ane

    ReplyDelete
  43. Muantappp nih tipsnya makasih gan.

    ReplyDelete
  44. makasih buat tutor Cara Pasang Kotak Komentar Facebook di Blog Blogspot sangat bermanfaat untuk blog saya

    ReplyDelete
  45. kalau bawaan template sudah ada plugginnya gimana menghapusnya ya gan, soalnya saya pikir kolom komentar fb sering disalahgunakan untuk naruh link aktif. apa bisa dimoderasi akan muncul setelah disetujui kaya kolom bawaan blogspot?

    ReplyDelete
  46. makasih gan. sangat membantu

    ReplyDelete
  47. div class='comments' id='comments'
    Tidak ada di script html saya gan??

    SOlusinya gimana

    ReplyDelete
  48. tadiny mau ane mau tempel, tapi blog ane masi baru takut gak seo friendly yaudah ikut bacanya ajalah, thnk infonya gan....

    ReplyDelete
  49. sangat membantu mas... makasih ya atas tutor nya

    ReplyDelete
  50. thanks bos,sangat membantu

    ReplyDelete
  51. terimakasih gan atas tutorial yang dibagikan, sangat bermamfaat sekali bagi saya yang masih pemula di dunia blog.

    ReplyDelete
  52. makasih tutorialnya ,mantap banget

    ReplyDelete
  53. terima kasih banyak mas infonya, benar-benar membantu, tapi belum jadi saya pasang, soalnya masih baru blog saya.

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox