Memasang Kotak Komentar Facebook dan Twitter di Blogger



Untuk meningkatkan traffic di blog kita, ada berbagai cara yang bisa dilakukan. Salah satunya adalah mempermudah pengunjung untuk berkomentar di setiap halaman postingan. Nah, inilah yang akan Paman bahas kali ini, cara bagaimana memasang kotak komentar facebook dan twitter yang berdampingan dengan kotak komentar blogger.

Untuk mengaktifkan fitur ini, sebelumnya kita harus mempunyai API KEY yang bisa didapatkan setelah membuat applikasi twitter. Untuk membuat aplikasi twitter, masuk ke akun twitter lalu buat aplikasi baru di sini. Sedangkan untuk mengaktifkan fitur komentar facebook, kita tidak harus mempunyai APP ID. Walaupun begitu, supaya kita bisa memoderasi komentar dan mendapatkan pemberitahuan setiap ada komentar baru, kita harus memiliki APP ID yang bisa didapatkan setelah kita membuat aplikasi facebook di sini

Sebelum memulai, terlebih dulu download template lengkap untuk berjaga-jaga barangkali kita ingin mengembalikan ke template semula atau jika terjadi kesalahan. Sekarang kita mulai langkah-langkah memasang kotak komentar facebook dan twitter di blogger.
1. Masuk ke akun blogger, lalu pilih Rancangan > Edit HTML > Ceklis 'Expand Template Widget'
2. Tekan tombol Ctrl+F lalu cari kode <head>
3. Masukkan kode berikut tepat di bawah kode <head>:

<meta content='Profile_ID' property='fb:admins'/> 
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=API_KEY&amp;v=1'/>
4. Perhatikan kode berwarna merah:
  • Ganti tulisan Profile_ID dengan ID profil atau username facebook kita. ID profil bisa berupa angka atau huruf. Cara mengetahui ID profil kita adalah dengan membuka halaman profil dan lihatlah kolom alamat (address bar).  Jika alamat profil Paman adalah www.facebook.com/paman.guru, maka ID profil Paman adalah paman.guru
  • Kita juga bisa mengeset username dengan masuk ke account settings (pengaturan akun) > username (nama pengguna) > edit (sunting).
  • Ganti tulisan App_ID dengan ID Aplikasi facebook kita
  • Ganti tulisan API_KEY dengan API KEY dari aplikasi twitter yang kita buat
5. Berikutnya, cari kode class='comments'
6. Masukkan kode berikut tepat di bawah kode class='comments'

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>
<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</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='10' width='400'/>
  </b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

7. Perhatikan kode berwarna merah:
  • Kita bisa mengganti kata Comments dan Tweets dengan kata lainnya yang diinginkan
  • Kita bisa mengganti angka 10 dengan jumlah komentar facebook yang ingin ditampilkan
  • Kita bisa mengganti angka 400 dengan ukuran lebar kotak komentar yang diinginkan 
 8. Simpan template dan hasilnya bisa dilihat sendiri pada halaman postingan di blog Paman ini. Selamat mencoba, semoga berhasil! 


(update 21/01/2012)
Untuk menghilangkan ikon kotak komentar dari halaman statis, lakukan langkah-langkah berikut (setelah kita berhasil memasang kotak komentar facebook dan twitter di blogger):


  1. Masuk ke dasbor > rancangan > edit HTML > ceklis 'expand template widget'
  2. Dengan menggunakan Ctrl+F, cari kode class='comments' 
  3. Tepat di bawahnya, masukkan kode <b:if cond='data:blog.pageType != "static_page"'>
  4. Di bawah kode yang kita tambahkan tadi, akan kita temukan kode-kode tab kotak komentar yang sudah kita masukkan sebelumnya.
  5. Scroll ke bawah lagi dan temukan kode <div class='clear'/>
  6. Tepat di atas kode tersebut, masukkan kode </b:if>
  7. Simpan template
(Update 30/06/2012)
Untuk mendapatkan notifikasi (pemberitahuan) facebook setiap kali ada komentar baru, ikuti langkah-langkah pada postingan DI SINI.


*Disederhanakan dan diterjemahkan dari jsblogstop.com
**Lihat artiket aslinya di sini
Memasang Kotak Komentar Facebook dan Twitter di Blogger Memasang Kotak Komentar Facebook dan Twitter di Blogger Reviewed by Paman Guru on Friday, January 06, 2012 Rating: 5

69 comments:

  1. tolong ajarin bikin/dapetin API KEY Twitter donk, udah coba2 tapi eror mulu :'(

    ReplyDelete
  2. oke deh. nanti saya bikinin postingannya cara bikin aplikasi twitter buat dapetin API KEY. silakan like fanpage blog ini di facebook atau follow twitternya buat dapetin update terbaru. thanx udah mampir.

    ReplyDelete
  3. udh aku follow paman, jangan lupa kasih info settingan di twitternya ya :D

    ReplyDelete
  4. silakan dicoba >> http://paman-guru.blogspot.com/2012/01/membuat-aplikasi-di-twitter.html

    ReplyDelete
  5. thanks atas infonya paman guru,,sudah saya praktikkan tapi kok yang coment yg lewat blogger gak bisa ke hidden ya,, mohon pencerahannya,,

    ReplyDelete
  6. Ini memang diprogram buat tiga kotak komentar. kalo mau buang kotak komentar blogger, tinggal setting komentar di bloger diubah menjadi tidak diizinkan. terus kode-kode buat kotak komentar blogger dibuang aja..

    ReplyDelete
  7. Thanks Paman guru, koq punya saya kalo kirim komentar pake akun FB muncul pesan gini "Maaf, kiriman ini berisi URL yang diblokir
    Konten yang coba Anda bagi mengandung tautan yang diblokir karena spam atau tidak aman.
    trus kalo pake akun twitter muncul :"Sorry, something went wrong.
    The provided callback url "

    bingung saya.

    ReplyDelete
  8. mantap gan,,,,saya berhasil mncobanya,,,

    http://yohan46.blogspot.com/2012/03/memasang-kotak-komentar-facebook-dan.html?showComment=1332851039392#c3115738810386861900

    ReplyDelete
  9. @ herri: 1. tiap kali kita komentar, ada pilihan ditaro di facebook atau ga.. kalo ditaro di fb, tergantuung setting keamanan. mungkin fb-nya disetting biar ga bisa nampilin URL. (itu cuma kemungkinan menurut saya, saya belum tau pasti) coba saja komen lewat fb di blog ini. 2. Soal twitter, saya juga mengalaminya. belum ketemu jawabannya. nanti diupdate lagi kalo udah dapet. thanks udah mampir.. :)
    @ Yohanor: selamat, gan.. thanks udah mampir.. :)

    ReplyDelete
  10. Alhadulillah.. saya berhasill, udah saya pasang diblog saya DISINI... terima kasih banyak paman guru :D

    oyaa.. ngomong2, kalo ada yang komen di fb ada pemberitahuannya gak? heheh
    dan satu lagi.. kenapa kotak komentar twitternya ada koment, tapi pas dibuka kok kosang yaaa..

    ReplyDelete
  11. @Alasah: sama2.. :)

    kalo fb_id diisi, seharusnya ada pemberitahuan. untuk komen twitter, di situ kan ada penjelasannya 'within 4 days'. jadi, komen yang udah lewat 4 hari ga akan tayang. thanks udah mampir.. :)

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. @herri: masalah twitter sudah ketemu jawabannya. silakan liat update postingan saya di sini

    ReplyDelete
  14. paman guru ko saya simpan template nya ga masuk masuk yah?

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. @Yanuar:: saya ga nemuin halaman statis di blog ente.. :)
    @Galaxy:: maksudnya ga masuk gimana? coba cek lagi langkah2nya. kalo kodenya bener dan naronya bener, pasti muncul kok.. :)

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Paman Guru. Yang ini komentar FB pasti ada notifi g, klo kt ud ad APP-ID? Thx b4!

    ReplyDelete
  20. @Lea:: problem solved. silakan lihat postingan baru Paman DI SINI.. Makasih udah mampir.. :)

    ReplyDelete
  21. di sini >>> http://paman-guru.blogspot.com/2012/06/cara-mendapatkan-pemberitahuan-facebook.html

    ReplyDelete
  22. Iya, Paman. Aku asyik nunggu balasanmu yg blom msk d email. Trakhir aku cb2 j n skrg br tahu ternyata email balasan Paman masuk k spam. Hehehe... Sdh berhasil, tapi aku hilangin j fitur Twitter, krn aku kurang suka Twitter. Thx!

    ReplyDelete
  23. hehe.. bagus deh. sama-sama, thanks udah mampir.. :)

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. kalo ganti template, langkah2 pemasangannya harus diulang dari awal lagi.. :)

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. untuk sementara Paman belum bisa kasih jawaban pasti. tapi ada kemungkinan kesalahan pemasangan kode. karena kode2 itu sebenarnya ada dua macam, kode untuk ikon menu dan kode untuk kotaknya. nanti paman cari tahu lagi. :)

    ReplyDelete
  28. oke paman guru. Mohon bantuan'nya :)

    ReplyDelete
  29. pake yang ada saja.. lihat aja sumber aslinya di jsblogstop, bro.. :)

    ReplyDelete
  30. Paman Guru Help? kenapa ya code --> class='comments' kaya gitu gak muncul di template saya ato gak keliatan dah di cari2 secara enumerasi & Ctrl+F tapi tetep gak ketemu??? sepertinya ke hiden sama javascript ya Paman Guru?! cz yang ada hanya CSSnya doang ga ada HTML nya.. jadi ane kesulitan paman guru! sebelumnye ane dah baca baca artikel di interestingwebs.blogspot.com mengenai HTML yang di hide oleh JS, jadi bagaimana paman guru, apakah ada solusinya atau solusi lain untuk menempatkan code diatas pada template??? Makasih paman guru =) jika berkenan dan tidak keberatan silakan berkunjung ke blog ane:) oya utk bales pesan ini bebas mo disini ato di blog ane paman guru hehe x lagi makasih Visit Here : http://www.collegerlearn.blogspot.com

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. This comment has been removed by the author.

    ReplyDelete
  33. @sarah:: selamat! kayanya klo twitter itu udah default. jadi ga bisa diotak-atik lagi lebarnya. :)

    ReplyDelete
  34. @Free Share with Pleasure!: Kayaknya belum klik "Expand Widget Templates" ya? Tulisan yang di atas kotak kode HTMLnya

    ReplyDelete
  35. betul betul.. kalo itu gak dicentang, kode html nya gak akan keliatan.. :D

    ReplyDelete
  36. terima kasih paman guru,, blog saya sudah bisa #NangisTerharu

    ReplyDelete
  37. Ah, lebay nih Handy.. hehehe.. selamat ya.. :D

    ReplyDelete
  38. paman guru kenapa template blog saya tidak pernah bisa muncul pas bagian komentar facebook yaa ?? berbagai cara udh saya lakuin . mohon bimbinganya paman guru ..:(

    ReplyDelete
  39. @zulvi:: coba pada blog lain pake template yg beda. ada kemungkinan templatenya tidak support. saya juga mengalami hal yg sama di blog saya yg satu lagi.

    ReplyDelete
  40. kak kok gak muncul pemberitahuan fbnya padahal saya udah mencoba cara diatas

    ReplyDelete
  41. saya sudah coba tp koq cuma 1 postingan yang muncul kotaknya. gimana ini ?

    ReplyDelete
  42. ini yang namanya bener2 tutorial .. sebelum ditanya udah ada jawabannya .. hehehe
    makasih mas udah ane terapin di blog ane dan sukses :)
    kalau berkenan follow balik ya blognya :)
    sudah ane follow :)
    makasih :)

    ReplyDelete
  43. MURIADI COMRADE says: 15 September 2012 19:38 Reply
    kak kok gak muncul pemberitahuan fbnya padahal saya udah mencoba cara diatas

    untuk pemberitahuan fb, lihat postingan yang lain tentang mendapatkan pemberitahuan (notifikasi) facebook

    ReplyDelete
  44. cenk sain says: 4 Oktober 2012 18:24 Reply
    saya sudah coba tp koq cuma 1 postingan yang muncul kotaknya. gimana ini ?

    coba dicek lagi langkah2nya. kalo masih belum muncul juga, kemungkinan masalah itu berasal dari templatenya. saya juga mengalami hal yang mirip pada blog saya yang lain. kalo sudah ada komen di komentar blogger, kotak yang lainnya akan otomatis hilang. sampai sekarang saya belum tau cara mengatasinya. :)

    ReplyDelete
  45. Saya sudah mencoba mengikuti 2 artikel anda : Memasang komentar Facebook dan Twitter di Blogger & Cara Mendapatkan Pemberitahuan (Notifikasi) Facebook Untuk Setiap Komentar Facebook di Blog

    Saya mengedit kolom komentarnya supaya hanya menampilkan kolom komentar Blog dan Facebook saja,sudah saya coba dan berhasil. Dan juga notifikasi (pemberitahuan) komentar masuk ke akun Facebook saya :)

    Namun ada pertanyaan yang saya ingin ajukan :

    "Apakah kolom komentarnya facebook nya hanya tampil setelah ada minimal 1 komentar terlebih dahulu?"

    Karena ketika saya me-refresh, kotak kolom komentar nya terlihat seperti kotak komentar bawaan blogger. Namun setelah saya coba komentar sendiri, barulah tampil kolom komentar untuk facebooknya
    Mohon penjelasannya dan sangat di tunggu jawabannya.

    Terima Kasih :)

    ReplyDelete
  46. tidak. setiap kotak akan terlihat secaara bersamaan walaupun belum ada komentar satupun. silakan liat postingan di blog ini yang belum ada komentarnya. semua kotaknya muncul. HANYA saja, memang untuk template tertentu seperti template 'Broadway' yang pernah saya coba, itu bermasalah. Masalahnya berbeda-beda. Masalah yang saya temui, kotak komentar facebook akan hilang jika ada komentar di kotak komentar blogger. Jadi, untuk sementara saya tidak bisa menjawab kenapa. Tapi, insya Allah akan saya kabari jika saya sudah menemukan jawabannya. Terima kasih. :)

    ReplyDelete
  47. Oh ya, kalau "Profile ID"nya pake profil ID halaman fanspage, bisa gak?

    ReplyDelete
  48. sepertinya tidak bisa. karena itu harus akun profil (orang) yang akan dijadikan admin.

    ReplyDelete
  49. Selamat siang, saya adalah salah satu yang mengikuti artikel anda beberapa waktu lalu..

    Saya masih punya beberapa masalah di blog saya ketika saya mencoba artikel ini. Jadi masalahnya adalah, ketika ada comment dari Facebook, kolom komentar nya muncul,tetapi ketika ada komentar dari blogger, kolom komentar nya tidak muncul..

    Hal ini agak mengganggu saya karena saya jadi tidak bisa membalas pertanyaan yang muncul dari komentar blogger..
    Untuk lebih jelasnya, anda bisa berkunjung di salah satu artikel blog saya, dan nanti anda bisa melihat sendiri masalahnya di kolom kotak komentar nya. Berikut link nya :

    http://iqbaldwis.blogspot.com/2012/09/root-partisi-sd-card-pada-samsung.html

    Sangat di tunggu jawaban dan solusi nya..

    Terima kasih banyak :)

    ReplyDelete
  50. Akhirnya saya dapat menemukan jawabannya..
    Ternyata, di bawah class='comment' yang anda tulis di atas pada point nomor 6, seharusnya :

    div class='comments comments-page' id='blogger-comments-page'

    itu tidak usah dipakai. Itu menyebabkan bentrok antara kolom komentar bloggernya.
    Saya sudah mempraktekannya dan berhasil :)

    ReplyDelete
  51. paman guru saya ada pertanyaan begini blog saya sudah bisa di pasang komentar cuman yang saya ingin tanyakan beberapa tulisan di blog ada yang bisa komen dengan facebook dan blog tapi ada pula komen hanya berupa komen blog saja, dan tidak muncul komen facebook dan twitter kira2 cara fix-innya gimana ?? terima kasih..

    ReplyDelete
  52. Berhasil paman guru...coba deh lihat di www.bocahit.com makasih yak

    ReplyDelete
  53. langkah pertama sukses tapi hanya berlaku untuk posting yang sebelumnya memang sudah ada komentarnya (bukan dari twitter atau facebook)...kenapa ya,guru?

    trus yang menghilangkan ikon komentar halaman statis gagal.ada apa gerangan?

    terima kasih untuk panduannya ^^

    ReplyDelete
  54. Mantap gan... udah ane buat... coba lihat aja disini http://secebisilmu.blogspot.com/2013/03/cara-memasang-kotak-komentar-facebook.html

    ReplyDelete
  55. mas.....,
    twitternya gk jalan mas....,
    ada peringatan di script anywhere nya mas
    bagaimana solusinya mas?
    ini sama halnya dengan fb login statusnya mas

    dan saya check di punya mas ini masih ada warning btentang fb login nya mas, mas tidak membuat coment fb di postingan mas, tp mngkin di html mas masih ada sisa2 fb coment for web, baik mas hapus aja script yang berhubungan dengan fb, atau solve dengan cara seperti ini :
    klu ini dah sering saya solved mas, ini saya kasi saran mas ke alamat ini https://developers.facebook.com/docs/facebook-login/getting-started-web/

    mohon pencerahan
    dan bisa dicheck di
    http://alhabibi89.blogspot.com

    ReplyDelete
  56. wow keren mas . tapi kenapa iya kalo belum ada komentar di blog kolom komentar facebook sama twitter gak tampil , yang tampil hanya komentar blogger ??

    mohon jawaban nya iya sunda-nesse.blogspot.com

    ReplyDelete
  57. mau coba pasang ah, untuk bloger pemula kayak saya.

    ReplyDelete
  58. cara komentar lewat twitter nya gmna?

    ReplyDelete
  59. Sdh aku pasang di blog aku dan langsung berhasil, tapi Komen twitternya kok gak muncul ya mas, munculnya jumlah tweet ajah, bukan komentar di twitter? apa scriptnya ada yg salah? mungkin ini "js-page-tweet-count" silahkan di cek dan jgn lupa komentarnya ya teman-teman, klik disini > http://fifisurabaya.blogspot.com/2014/12/3-cara-mengembalikan-kesuburan-rambut.html

    ReplyDelete
  60. sukses gan makasih banyak. tapi pengaturan moderatornya kok kadang gak muncul ya.. terus kolom komentar tweetnya juga gak muncul..

    ReplyDelete
  61. This comment has been removed by a blog administrator.

    ReplyDelete
  62. gaannn sudah berhasil di pasang tapi kolom blognya gak bisa di klik itu gimana ya :(

    ReplyDelete

++ Silakan berkomentar dengan bahasa yang sopan. ++
++ Klik 'subscribe by email' untuk mendapatkan pemberitahuan jika ada komentar baru. ++

Powered by Blogger.