February 23, 2014

Cara Pasang Kotak Komentar Facebook di Blog Blogspot

February 23, 2014

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

Previous
« Prev Post
Author Image

Romeltea

Recommended Posts

Related Posts

Show comments
Hide comments

151 comments on Cara Pasang Kotak Komentar Facebook di Blog Blogspot

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

    ReplyDelete
  2. 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
  3. 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
  4. numpang singgah min, :D http://infosengin.blogspot.com

    ReplyDelete
  5. 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
  6. 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
  7. berhasil gan., hehehehehehe....,

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

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

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

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

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

    ReplyDelete
  12. 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
  13. hmmm .. ga bisa sih ?

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

      Delete
  14. 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
  15. Makasih Mas Tutorialnya,,, Langsung ane praktekin kx..

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

    ReplyDelete
  17. 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
  18. Thanks gan berhasil ane terapkan di blog ane, salam kenal
    jgn lupa mampir :D

    http://bacadroid.blogspot.com

    ReplyDelete
  19. 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
  20. 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
  21. 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
  22. mantap gan,,, ane udah coba... tengkyu tutorial nya

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

    ReplyDelete
  24. 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
  25. sudah ane buat sob, thanks yoo :D

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

    ReplyDelete
  27. terima kasih tips nya min :D

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

    ReplyDelete
  29. 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
  30. terima kasih mas artikelnya.....selalu memberikan ilmu-ilmu baru....
    sukses selalu...

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

    ReplyDelete
  32. Thanks gan it'sworkk.....

    ReplyDelete
  33. terima kasih gan atas postingannya

    ReplyDelete
  34. makasig gann, ane berhasil

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

    ReplyDelete
  36. 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
  37. 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
  38. 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
  39. pokoknya bagus deh postinganya kaya website profesional ja yah, ,semangat mas
    visit Kupuk Blog

    ReplyDelete
  40. thnks gan atas infonya....

    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. terimakasih gan atas tutorial yang dibagikan, sangat bermamfaat sekali bagi saya yang masih pemula di dunia blog.

    ReplyDelete
  51. mksih gan atas infonya....

    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
  54. Terima kasih kawan, cara pertama pun udah berhasil. Kotak komentar Facebook langsung muncul sesuai harapan. Sukses ya kawan.

    ReplyDelete
  55. kalo pasang blog kemntar fb itu berpengaruh gak gan sama kecepatan loading website, soalnya ane pernah coba tapi loadingnya jadi agak lambat

    ReplyDelete
    Replies
    1. makanya dibaca tulisannya sblm komen, dibahas juga itu di atas :)

      Delete
  56. saya mau tanya, kalau misalkan script ini sudah dipasang dan ada yang komen di salah satu link blog kita, maka nantinya akan muncul di mana ya notifikasi kalau ada yang berkomentar? terimakasih

    ReplyDelete
    Replies
    1. Tidak ada notifikasi. Paling di Moderation Tools. Itulah bahayanya kotak komentar Facebook, susah dideteksi.

      Delete

  57. Sorry, this feature isn't available right now???
    ini kurang apa yach?? padahal sdh dimasuki ID dan ADMIN ID

    ReplyDelete
  58. Makasih gan, berhasill.. semoga sukses

    ReplyDelete
  59. terima kasih atas infonya, bermanfaat .. salam blogging

    ReplyDelete
  60. salam kenal

    terimakasih gan, kolom komentar FB sdh terpasang di blog saya.

    ReplyDelete
  61. nama CB tak jadikan nama blog saya, tapi CB sebagai montor tuwa.....bravo CB blog

    ReplyDelete
  62. Rumit juga cara pasangnya, semoga berhasil lah

    ReplyDelete
  63. Thank you so much for your explanation! Good Job!

    ReplyDelete
  64. cara yang kedua work diblog gw, thx bro!

    ReplyDelete
    Replies
    1. Siiip, mudah 'kan cara memasang komentar facebook di blogger...

      Delete
  65. untuk mengetahui orang yang komen gimana, apa cek manual di developer facebook tools comment

    ReplyDelete
  66. Sudah saya terapkan di blog saya gan. dan berhasil. terima kasih banyak ilmunya ya

    ReplyDelete
  67. Nice info gan...semoga bermamfaat

    ReplyDelete
  68. Udah berhasil, tp klo ada komen dari blogger kok kotak komen facebooknya ilang ya ? 😭😭😭

    ReplyDelete
  69. Alhamdulillah sukses buat kotak komentar fbnya gan, tapi tombol Kirim komentarny belum muncul, mohon solusinya gan.

    Saya pakai cara pertama.

    ReplyDelete
  70. Cara ketiga bekerja dengan sangat perfect. blog berjalan dengan smooth dan responsive. thanks mastah

    ReplyDelete
  71. Tutorial lengkap dan sangat bermanfaat.

    sukses selalu sob.

    ReplyDelete
  72. kang punya ane udah di pasang... coment fb tapi malah jadi 2 kolom kementar cara menghilangkan kolom komentar bawaan gimana caranya...

    ReplyDelete
    Replies
    1. Pilih menu Setelan, klik Pos dan Komentar. Pada Lokasi Komentar pilih opsi Sembunyikan.

      Delete
  73. Kok logo facebook nya tidak muncul?

    ReplyDelete
    Replies
    1. Harusnya muncul, tapi koneksi lemah/down juga ngaruh

      Delete
  74. Replies
    1. Aku ora, Pasang Kotak Komentar Facebook di Blog gampang gituh...

      Delete
  75. Aku mau simpan hasil edit template kok ga bisa ya, gagal terus ntah kenapa. Tiap edit sesuatu pasti gagal disimpan. Ada solusinya gan?

    ReplyDelete
    Replies
    1. Kalo gak bisa disimpan pasti ada notifikasi di bagian atas, simak notif itu...

      Delete
  76. Sangat membantu, terima kasih

    ReplyDelete
  77. Sukses, terima kasih tutorialnya

    ReplyDelete
  78. Sukses caranya,
    mantap.....

    terima kasih

    www.dpy.my.id

    ReplyDelete

Contact Form

Name

Email *

Message *