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

130 Komentar untuk "Cara Pasang Kotak Komentar Facebook di Blog Blogspot"

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

Kira2 pengaruh ga ke PR blog?

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

mantaap bos tapi releted post dmn itu???

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

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

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

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

Mantap gan. Ane coba dulu...

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

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

Blogku gak make Related Post gan, Terus Pasteinnya dimana?

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

berhasil gan., hehehehehehe....,

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

Klo ga ada yang koment ga muncul ya kotaknya ?

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

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

Mantap Gan. Salam kenal.

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

thx sob udah berhasil
www.idcheat.com

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

bagaimana solusinya? Tolong Jawab ya
www.infokeguruan.com

Setting > Post and Comment > Comment Moderation

hmmm .. ga bisa sih ?

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

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

mau praktekkan bikin komentar facebook nih, doakan semoga berhasil

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

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

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

http://bacadroid.blogspot.com

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

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

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

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

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

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

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

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

Keren gan, mau di coba dulu, terimakasih

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

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

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

coba lagi, sudah diupdate tutorialnya.... ada cara kedua

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

sudah ane buat sob, thanks yoo :D

sudah ane buat sob, thanks yoo :D

akhirnya ada komentar fb juga nih mksih tutornya omz

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

Template > Edit HTML
Baca panduan settingnya

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

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

Thanks gan it'sworkk.....

terima kasih gan atas postingannya

makasig gann, ane berhasil

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

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 ?

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

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

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

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

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

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

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

Terimakasih..

terima ksih gan, ane sukses pasang comment fb di blog ane

Muantappp nih tipsnya makasih gan.

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

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?

Cek ah, semoga workkkk :D

makasih gan. sangat membantu

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

SOlusinya gimana

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

sangat membantu mas... makasih ya atas tutor nya

thanks bos,sangat membantu

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

makasih tutorialnya ,mantap banget

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

Terima kasih kawan, cara pertama pun udah berhasil. Kotak komentar Facebook langsung muncul sesuai harapan. Sukses ya kawan.

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

makanya dibaca tulisannya sblm komen, dibahas juga itu di atas :)

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

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


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

aktifkan dulu app id facebooknya

Makasih gan, berhasill.. semoga sukses

terima kasih atas infonya, bermanfaat .. salam blogging

salam kenal

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

gan yang saya kok muncul jadi 2 komentar facebook saya ngikuti tutorial cara ke 3

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

Rumit juga cara pasangnya, semoga berhasil lah

Thank you so much for your explanation! Good Job!

cara yang kedua work diblog gw, thx bro!

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

Iya benar demikian....

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

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

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *