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&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
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 == "item"'>
<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
(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):
- Masuk ke dasbor > rancangan > edit HTML > ceklis 'expand template widget'
- Dengan menggunakan Ctrl+F, cari kode class='comments'
- Tepat di bawahnya, masukkan kode <b:if cond='data:blog.pageType != "static_page"'>
- Di bawah kode yang kita tambahkan tadi, akan kita temukan kode-kode tab kotak komentar yang sudah kita masukkan sebelumnya.
- Scroll ke bawah lagi dan temukan kode <div class='clear'/>
- Tepat di atas kode tersebut, masukkan kode </b:if>
- Simpan template
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
tolong ajarin bikin/dapetin API KEY Twitter donk, udah coba2 tapi eror mulu :'(
ReplyDeleteoke 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.
ReplyDeleteudh aku follow paman, jangan lupa kasih info settingan di twitternya ya :D
ReplyDeletesilakan dicoba >> http://paman-guru.blogspot.com/2012/01/membuat-aplikasi-di-twitter.html
ReplyDeletethanks atas infonya paman guru,,sudah saya praktikkan tapi kok yang coment yg lewat blogger gak bisa ke hidden ya,, mohon pencerahannya,,
ReplyDeleteIni 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..
ReplyDeleteThanks Paman guru, koq punya saya kalo kirim komentar pake akun FB muncul pesan gini "Maaf, kiriman ini berisi URL yang diblokir
ReplyDeleteKonten 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.
mantap gan,,,,saya berhasil mncobanya,,,
ReplyDeletehttp://yohan46.blogspot.com/2012/03/memasang-kotak-komentar-facebook-dan.html?showComment=1332851039392#c3115738810386861900
@ 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.. :)
ReplyDelete@ Yohanor: selamat, gan.. thanks udah mampir.. :)
Alhadulillah.. saya berhasill, udah saya pasang diblog saya DISINI... terima kasih banyak paman guru :D
ReplyDeleteoyaa.. 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..
@Alasah: sama2.. :)
ReplyDeletekalo 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.. :)
This comment has been removed by the author.
ReplyDelete@herri: masalah twitter sudah ketemu jawabannya. silakan liat update postingan saya di sini
ReplyDeletepaman guru ko saya simpan template nya ga masuk masuk yah?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete@Yanuar:: saya ga nemuin halaman statis di blog ente.. :)
ReplyDelete@Galaxy:: maksudnya ga masuk gimana? coba cek lagi langkah2nya. kalo kodenya bener dan naronya bener, pasti muncul kok.. :)
This comment has been removed by the author.
ReplyDeletePaman Guru. Yang ini komentar FB pasti ada notifi g, klo kt ud ad APP-ID? Thx b4!
ReplyDelete@Lea:: problem solved. silakan lihat postingan baru Paman DI SINI.. Makasih udah mampir.. :)
ReplyDeletedi sini >>> http://paman-guru.blogspot.com/2012/06/cara-mendapatkan-pemberitahuan-facebook.html
ReplyDeleteIya, 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!
ReplyDeletehehe.. bagus deh. sama-sama, thanks udah mampir.. :)
ReplyDeleteThis comment has been removed by the author.
ReplyDeletekalo ganti template, langkah2 pemasangannya harus diulang dari awal lagi.. :)
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteuntuk 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. :)
ReplyDeleteoke paman guru. Mohon bantuan'nya :)
ReplyDeletemas bero, ga pake kode css ?
ReplyDeletepake yang ada saja.. lihat aja sumber aslinya di jsblogstop, bro.. :)
ReplyDeletePaman 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
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDelete@sarah:: selamat! kayanya klo twitter itu udah default. jadi ga bisa diotak-atik lagi lebarnya. :)
ReplyDelete@Free Share with Pleasure!: Kayaknya belum klik "Expand Widget Templates" ya? Tulisan yang di atas kotak kode HTMLnya
ReplyDeletebetul betul.. kalo itu gak dicentang, kode html nya gak akan keliatan.. :D
ReplyDeleteterima kasih paman guru,, blog saya sudah bisa #NangisTerharu
ReplyDeleteAh, lebay nih Handy.. hehehe.. selamat ya.. :D
ReplyDeletepaman guru kenapa template blog saya tidak pernah bisa muncul pas bagian komentar facebook yaa ?? berbagai cara udh saya lakuin . mohon bimbinganya paman guru ..:(
ReplyDelete@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.
ReplyDeletebermanfaat
ReplyDeletekak kok gak muncul pemberitahuan fbnya padahal saya udah mencoba cara diatas
ReplyDeletesaya sudah coba tp koq cuma 1 postingan yang muncul kotaknya. gimana ini ?
ReplyDeleteini yang namanya bener2 tutorial .. sebelum ditanya udah ada jawabannya .. hehehe
ReplyDeletemakasih mas udah ane terapin di blog ane dan sukses :)
kalau berkenan follow balik ya blognya :)
sudah ane follow :)
makasih :)
MURIADI COMRADE says: 15 September 2012 19:38 Reply
ReplyDeletekak kok gak muncul pemberitahuan fbnya padahal saya udah mencoba cara diatas
untuk pemberitahuan fb, lihat postingan yang lain tentang mendapatkan pemberitahuan (notifikasi) facebook
cenk sain says: 4 Oktober 2012 18:24 Reply
ReplyDeletesaya 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. :)
@all: terimakasih... :)
ReplyDeleteTerima kasih. Saya sudah berhasil!!
ReplyDeleteselamat! :)
ReplyDeleteSaya sudah mencoba mengikuti 2 artikel anda : Memasang komentar Facebook dan Twitter di Blogger & Cara Mendapatkan Pemberitahuan (Notifikasi) Facebook Untuk Setiap Komentar Facebook di Blog
ReplyDeleteSaya 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 :)
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. :)
ReplyDeleteOh ya, kalau "Profile ID"nya pake profil ID halaman fanspage, bisa gak?
ReplyDeletesepertinya tidak bisa. karena itu harus akun profil (orang) yang akan dijadikan admin.
ReplyDeleteSelamat siang, saya adalah salah satu yang mengikuti artikel anda beberapa waktu lalu..
ReplyDeleteSaya 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 :)
Akhirnya saya dapat menemukan jawabannya..
ReplyDeleteTernyata, 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 :)
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..
ReplyDeleteBerhasil paman guru...coba deh lihat di www.bocahit.com makasih yak
ReplyDeleteThanks gan..
ReplyDeletelangkah pertama sukses tapi hanya berlaku untuk posting yang sebelumnya memang sudah ada komentarnya (bukan dari twitter atau facebook)...kenapa ya,guru?
ReplyDeletetrus yang menghilangkan ikon komentar halaman statis gagal.ada apa gerangan?
terima kasih untuk panduannya ^^
Mantap gan... udah ane buat... coba lihat aja disini http://secebisilmu.blogspot.com/2013/03/cara-memasang-kotak-komentar-facebook.html
ReplyDeletemas.....,
ReplyDeletetwitternya 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
Mantafffff...
ReplyDeleteSalam kenal Gan....
www.zest-warnet.info
wow keren mas . tapi kenapa iya kalo belum ada komentar di blog kolom komentar facebook sama twitter gak tampil , yang tampil hanya komentar blogger ??
ReplyDeletemohon jawaban nya iya sunda-nesse.blogspot.com
mau coba pasang ah, untuk bloger pemula kayak saya.
ReplyDeletecara komentar lewat twitter nya gmna?
ReplyDeleteSdh 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
ReplyDeletesukses gan makasih banyak. tapi pengaturan moderatornya kok kadang gak muncul ya.. terus kolom komentar tweetnya juga gak muncul..
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletegaannn sudah berhasil di pasang tapi kolom blognya gak bisa di klik itu gimana ya :(
ReplyDeletePost a Comment
++ Silakan berkomentar dengan bahasa yang sopan. ++
++ Klik 'subscribe by email' untuk mendapatkan pemberitahuan jika ada komentar baru. ++