Skip to main content

Cara Pasang Kotak Komentar/Comment Form Facebook di Blogger

Cara Membuat Kotak Komentar/Comment Form Facebook di Blogger | Mungkin Tips ini udah bukan hal baru lagi, namun jika niat ingin berbagi, tidak ada kata terlambat. Berikut ini ingin mensharingkan cara membuat Kotak Komentar/Comment Form Facebook yang akan di tampilkan di Blogger. Jadi Kotak komentar yang sudah secara default ada di blogger dirubah atau ditambah dengan aplikasi kotak komentar/Comment form yang disediakan oleh Facebook.

Fungsi kotak komentar Facebook ini adalah sebagai pengganti atau alternatif lain bagi pengunjung blog kita untuk memberikan komentar di blog kita, karena memungkinkan untuk pengunjung blog selain pengguna Blogger/Wordpress/Typepad/Open id untuk memberikan ide/komentar/saran/kesan untuk blog kita. Dikarenakan pengguna Facebook semakin meningkat jumlahnya, jadi bisa dipastikan hampir semua pengunjung blog memiliki akun Facebook.

Untuk melihat demo Kotak komentar Facebook, silakan lihat Disini

Berikut ini cara membuat/memasang kotak komentar Facebook di blogger :

Pertama, silakan buat aplikasi facebooknya disini : Facebook Develover

isi form dengan lengkap seperti contoh diatas.
untuk kolom URL site, isi URL blog anda, jangan lupa tambahkan backslash "/" diakhir URL agar blog anda bisa dikonfirmasi.
Contoh : http://serba-seru.blogspot.com menjadi http://serba-seru.blogspot.com/ <=

Kemudian ambil ID aplikasi yang sudah diberikan (lihat contoh dibawah)

Langkah selanjutnya, langsung menuju Blogger. Login ke account blog anda.
Kemudian langsung menuju Design/Rancangan => Klik tab Edit HTML => Centang "Expand Widget Template".
Lalu cari code berikut ini :

<data:post.body/> atau <div class='post-header-line-1/>

Jika sudah ketemu, Paste code berikut ini setelah code diatas  
(Jika sudah memasang readmore, terdapat dua code <data:post.body/>, maka letakkan code dibawah ini setelah <data:post.body/> yang kedua)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='background-color:#ffffff; padding:10px; border:1px solid #cccccc;'>
<p align='left' style='background:transparent;'><a href='http://serba-seru.blogspot.com' target='new'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgojFxzeZA1A-7yCf6QXNnlh9DAU4wcK-6XkSW8UjTVmlutk_FINrf9kQZeRPmjSugr4L1b4beq56BeRnjF-c18sP0so02vKW6pIbUwB-DoYDh-PB3bvjX39Von1SkIXRtW7XnFY6EOfS_q/'/></a></p>
<div id='fb-root'/>
<script> window.fbAsyncInit = function() { FB.init({appId: &#39;ID-APLIKASI&#39;, status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement(&#39;script&#39;); e.async = true; e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;; e.async = true; document.getElementById(&#39;fb-root&#39;).appendChild(e); }()); </script>
<fb:comments/>
<p style='background-color: transparent;border:1px solid #cccccc; font-size:10px; padding:5px;width:ancho; float:right;'><a href='http://serba-seru.blogspot.com/2011/02/cara-pasang-kotak-komentarcomment-form.html' target='_blank' title='Cara pasang kotak komentar Facebook di Blogger'>Grab This Comment Form</a></p></div>
</b:if>

Ganti tulisan ID-Aplikasi dengan ID Aplikasi yang telah anda buat sebelumnya.
Jika ingin mengganti background untuk menyesuaikan dengan template blog anda, silakan ganti kode warna tulisan yang berwarna biru diatas (#ffffff)

Bagi anda yang hanya ingin menggunakan kotak komentar Facebook saja di blogger tanpa comment form blogger, anda bisa menghilangkan comment form blogger tersebut dengan cara :
Klik Tab Setting/Pengaturan => Comments/Komentar => Klik hide/sembunyikan pada bagian Komentar/Comment

Untuk melihat contoh hasilnya, silakan lihat Disini

Semoga bisa bermanfaat.

Comments

  1. Kebutuhan akan informasi itu berlangsung terus menerus bahkan kadang ada orang yang membutuhkan sebuah informasi yang walaupun sebagian orang menganggapnya sudah terlalu kuno, untuk info yang ini saya rasa belum semua orang tahu termasuk saya sendiri yang baru mengetahuinya sekarang so tak ada kata terlambat untuk berbagi. maksih buat infonya mas, walaupun saat ini belum ada niatan untuk memasangnya tapi setidaknya menambah informasi bagi saya. sukses selalu mas Georgeouz!

    ReplyDelete
  2. mmg utk berbagi tidak ada kata terlambat, seperti yg sudah saya paparkan diatas, itu hanya sebagai basa-basi saja bagi yg sudah menggunakan atw yg sudah membuat tips tersebut. Namun terima kasih bgt nih atas masukkannya, semoga dg artikel yg ada disini bisa memberikan pencerahan buat yg membutuhkan. maklum, ini hanya sekedar sharing saja.
    Thanx bgt ya atas kehadirannya di blog ini

    ReplyDelete
  3. thanks, infonya. :)
    trus, ini bisa dipake utk wordpress g??

    Aq lg belajar ngblogg nih..hehe..

    ReplyDelete
  4. kl di wordpress.com, kayaknya msh blm bisa neng wina...kurang tau jg sih, mungkin ada yg sudah bisa....setahu saya sih msh blm bisa...maklum ga pernah lg nyentuh wordpress.com....thanx ya udh mmpir

    ReplyDelete
  5. kk ko yang HIDE pada komentar d blog gk ada???

    ReplyDelete
  6. saudah aku coba kok ga bisa tampil ya???

    ReplyDelete
  7. @Abank Yanz Azah : hide nya ga ada...??? yang bener mas...???
    @Hary02 : ga bisa...??? ya udah, coba pake comment facbook yg baru aja, lebih keren, ada fitur reply-nya....udh ditest brp kali, 100% sukses

    ReplyDelete
  8. @hary02...sorry lupa kasi linknya....Facebook komen yg baru disini http://serba-seru.blogspot.com/2011/03/kotak-komentar-facebookfacebook-comment.html

    ReplyDelete
  9. http://luth-outsider.blogspot.com/2011/03/spanduk-nurdin-turun-terbentang-di.html

    ReplyDelete
  10. Nice Post. Thanks udah kasih tutorialnya gan.
    Nebeng link boleh ya gan.
    http://bebasbekarya.blogspot.com/

    ReplyDelete
  11. mau tanya nih, saya sudah menggunakan readmore, tapi ketika saya edit html saya cuma menemukan satu buah saja. gak ada yang ekdua n cuma ada satu. jadi karena itu pas di halaman awal facebook comments box muncul di halaman depan n jadinya gak bagus banget deh.
    blog saya ada di http://tebegayatampan.blogspot.com
    mohon pencerahannya soalnya saya dah mulai merasa putus asa deh nih..
    thanks sebelumnya.. alamat email saya tebegaya@gmail.com.
    thanks yah

    ReplyDelete
  12. gan nah cara mengetahui ada orang yg komen gimana? soalnya di fb saya ga ada pemberitahuan

    ReplyDelete
  13. kok gk muncul form comment'a gan ??

    ReplyDelete
  14. Mas, kalo nempelin bentuk komentar fb ke blog kita, itu bakalan ngaruh/menuhin inbox di email punya kita nggak mas?Makasih..

    ReplyDelete
  15. Ternyata memang sulit, yg Anda contohkanpun perlu banyak di rubah

    ReplyDelete
  16. Hy,, salam kenal,,!!
    kunjungi blog aya ya,,!!
    http://blogger-riyadi.blogspot.com/2011/08/tukar-link.html

    ReplyDelete
  17. salam .. aku dah coba 2 kali masukin code Html di yang pertaa .. dan blokku lum ada readmore dan tapi masi belum berhasil mas ... mohon penginclongannya karena info ini aku butuhkan ... suwun mas

    kunjungi blogku dan sekaligus butuh sarannya untuk yang masih amatiran ini asto.blog.com

    suwun

    ReplyDelete
  18. http://pabrikdanaku.blogspot.com/

    ReplyDelete
  19. http://pabrikdanaku.blogspot.com/

    ReplyDelete
  20. thanks atas infonya, salam kenal

    ReplyDelete

Post a Comment

Silahkan tulis komentar anda pada kolom diatas, namun diharapkan jangan melakukan spamming, hindari komentar yang mengandung unsur SARA, berkata kasar serta hal2 negatif lainnya, Terima Kasih, Semoga bermanfaat

Popular Posts

Cara Membuat Random Posting Title Berjalan (Marquee)

Setelah kemaren sempat memposting " Cara menampilkan Top Comment Berjalan (Marquee) " , nah, kali ini mencoba memaparkan "Cara Membuat Random Posting Title Berjalan (Marquee)" . Postingan kali ini juga untuk menjawab pertanyaan dari sobat blogger pada waktu yang lalu sempat bertanya kalau cara membuat Recent Postingnya bagaimana? Thanx ya buat sobat Ngeposting ni yee + sobat yang satu lagi saya lupa (karena beliau bertanya via shoutbox dan sekarang shoutbox sudah saya ganti, jd maaf kl saya lupa yaaa...) karena pertanyaan anda memberikan saya ide untuk membuat postingan yang baru, abisnya saya sempat bingung mau membuat postingan apalagi yaaa....heheheheheeee.... Sebenarnya mau dikasi judul Recent Posting Title .....namun rasanya kurang pas kl mau bilang tentang tool ini Recent Posting Title , karena tool ini menghadirkan judul-judul posting blog kita secara acak bukan menampilkan judul postingan terbaru pada blog kita. Tapi ga apa-apa dech, ada baiknya juga si

Thumbnail Related Posting with Marquee (Berjalan)

Setelah kemaren memposting tentang cara membuat Related Posting menggunakan Daftar list berdasarkan Label dan Related Posting menggunakan Gambar(Thumbnail) . Nah kali ini sedikit berkaitan dengan Related Posting menggunakan Gambar(Thumbnail) . Nah, untuk menampilkan Related Posting menggunakan Gambar anda bisa lihat disini cara membuatnya. Namun ada sedikit kekurangan dari Related posting ini, yaitu anda tidak bisa menampilkan Related postingnya dalam jumlah yang banyak , jumlah yang ditampilkan sebatas ukuran lebar halaman posting saja, seperti halnya blog ini, hanya bisa menampilkan 4 judul serta gambar dari related posting tersebut. Lalu bagaimana cara menampilkan related posting tersebut dalam jumlah yang banyak...??? Oke, yang ingin di sharingkan kali ini mencoba mengangkat tentang menggunakan metode Marquee pada thumbnail related posting. Untuk contoh anda bisa lihat kebawah posting ini. Setelah mengutak-atik sedikit, sampai sempat sedikit error, hingga akhirnya saya mem

Cara Menampilkan Top Comment Berjalan (Marquee)

Wahhh...lama juga ga posting nich...akhirnya kangen juga sama blog setelah beberapa hari tidak menjamahnya karena ada sedikit kesibukan diluar. Oke langsung saja ke postingan , sebenarnya postingan kali ini adalah untuk menjawab pertanyaan sobat blogger, saya lupa namanya karena beliau bertanya via shoutbox blog ini yang lama, dan pada akhirnya shoutbox saya di banned, dan sekarang berganti dg Cbox, jadi maaf ya jika saya lupa, maklum memori sudah lemot. kalau tidak salah beliau bertanya bagaimana cara membuat Top Comment berjalan seperti di blog ini ? dan saya menjawab Coming soon sobat( Kayak film baru aja ) Oke, setelah kemaren sempat memposting cara menampilkan Top Comment di Blog , nah... sekarang mencoba membeberkan cara alternatif kedua untuk menampilkan Top Comment di blog dengan tampilan yang sedikit berbeda. Cara alternatif yang kedua ini menggunakan metode tulisan berjalan (Marquee) . makanya postingan kali ini saya beri nama Cara Menampilkan Top Comment Berjalan (Ma

Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan

Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan | Sempat bingung menentukan judul artikel yang satu ini, tapi yang jelas gambarannya seperti dibawah ini, Pernah lihat halaman blognya Kang Rohman (kolom-tutorial.blogspot.com), jika diperhatikan, ketika pada halaman beranda/Home page, bagian artikel/posting terletak di sebelah kiri dan sidebar berada di sebelah kanan, dan ketika masuk ke halaman postingnya, halaman artikel akan berada di sebelah kanan dan sidebar di sebelah kiri. Nah, untuk membuat halaman tersebut agar bisa berpindah-pindah ternyata cukup simpel. ternyata yang dibutuhkan hanya sedikit penambahan pada struktur CSS nya saja. berikut cara-caranya : Login ke Blogger Langsung menuju ke Design/Rancangan Klik Edit HTML centang tulisan "Expand Widget Template" Cari kode berikut : ]]></b:skin> Letakkan kode berikut ini setelah kode diatas  <style type='text/css'> <b:if cond='data:blog.pageType == &quot;item&quot;&

Blogger Lebih Asik dengan New Posting Editor

Nah...saat sekarang ini, para Blogging mania diberi kemudahan lagi oleh Blogger. Sebuah Posting Editor Baru telah di luncurkan. disini kita diberi kemudahan lagi dalam memposting entry. Adapun fitur-fitur yang telah diperbaharui sebagai berikut : New Toolbar Full safary 3 support Improved Handling Image Improved Raw HTML Geotagging Vertical Resizing Easy link editing in Compose mode Placeholder image for tags Preview dialog  Untuk lebih jelasnya dapat anda lihat Disini Nah...untuk dapat menggunakan New Posting Editor ini ( bagi anda yang masih menggunakan Posting editor lama ), berikut ini cara mengaktifkan New Posting Editor nya : Login dulu ke Blogger Masuk ke Setting/Pengaturan Pada halaman dasar, scroll hingga ke bawah, cari Setting Global   Pilih Editor yang diperbaharui Simpan Settingan anda Selesai Dech... Selamat menggunakan Posting Editor yang baru Sukses untuk semua Blogger...!!!