Cara Membuat Facebook Comment Box & Like Box Responsif

membuat facebook comment dan like box responsive
Halo sobat semua, rasanya seperti sudah bertahun-tahun tidak update buka-rahasia.blogspot.com. Yah, memang alasannya cukup klise, kesibukan dunia offline, tapi memang itu kenyataannya. :) Bahkan untuk approve dan menjawab ribuan komentar baru pun belum bisa dilakukan sepenuhnya. Jadi buat anda yang komentarnya belum diterbitkan dan dijawab - khususnya komentar penting yang berisi pertanyaan seputar Blogger, Adsense, dan SEO - saya mohon maaf. Beberapa sobat blogger lain biasanya "mengakali" dengan menyambangi akun facebook saya, dan menanyakan beberapa hal. :)
Recommendation:Jika anda belum memiliki Facebook Comment Box di Blogger, simak Cara Memasang Facebook Comment Box di Blogger
Baik, mari langsung menuju topik yang sedang hangat-hangatnya saat ini, "RESPONSIVENESS".

Sekarang lagi musimnya segala sesuatu yang berbau desain responsif: template, theme, layout widget, gambar, bahkan hingga iklan pun kini harus responsif, ya gak? (ke depan akan saya bahas tentang layout responsif pada iklan Google Adsense, baik yang synchronous maupun asynchronous). Untuk blog ini, saya membiarkannya ala kadarnya saja lah :). Hehe. Saya mengandalkan mobile template yang masih cukup efektif. Tapi bagi sobat blogger yang menggunakan responsive template, maka mobile template tidak penting, tidak perlu, dan sebaiknya dimatikan, sebab template responsif anda tidak akan berfungsi dengan baik jika mobile template tetap aktif. Konsep responsif adalah satu untuk semua, artinya satu theme atau template untuk semua device, tidak terpisah-pisah.

Namun demikian, ada satu elemen yang cukup luput dari perhatian. Pernahkah melihat widget Facebook comment box pada template responsif tampak aneh karena lebar dan tingginya tetap lantaran tidak ikut responsive? Pernahkah melihat widget facebook like box yang lebarnya melebihi sidebar karena tidak ikut berubah ukuran setelah browser di-resize? Tentu tampak aneh bukan? Karena secara default CSS kedua plugin Facebook tersebut belum menggunakan konsep responsif, maka perlu kita lakukan override atau hack agar keduanya mengikuti aturan responsif sesuai template.

Biasanya untuk mencapai derajat responsiveness, kita dapat menggunakan CSS media queries. Namun dalam hal ini, tidak diperlukan, karena yang dibutuhkan hanyalah membuat lebar (width) Facebook comment box dan like box mengikuti lebar wrapper dimana keduanya disisipkan (embed). Jadi daripada membuat definisi lebar, tinggi, dan margin dalam bentuk fixed, cukup gunakan persentase saja, agar widget mengikuti semua aturan wrappernya.

Setelah kuncinya ditemukan, yang perlu dicari adalah class-class yang digunakan oleh facebook comment box dan like box untuk mengatur tampilan plugin. 
Di atas adalah contoh-contoh class yang bisa diambil dari comment box. Ada beberapa class lain yang juga perlu dilihat dan diubah.

Berikut adalah 4 yang pokok dari styling comment box dan like box:
  • fb-comments
  • fb-comments iframe[style] 
  • fb-like-box 
  • fb-like-box iframe[style]
Setelah mendapatkan class-class yang dibutuhkan, langkah selanjutnya adalah menambahkan aturan width yang otomatis mengikuti perubahan lebar wrapper dimana widget/plugin disisipkan. Caranya? Cukup berikan aturan width: 100%, beres. Tambahkan !important jika diperlukan untuk memaksa browser mematuhi aturan tersebut.

Jadi kita dapatkan:
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
Jika anda pengguna Blogger, letakkan kode di atas diantara tag b:skin di dalam template. Untuk pengguna WordPress yang ingin membuat facebook comment box dan like box responsive, cukup tambahkan kode CSS tersebut ke dalam file style.css, atau lokasi custom CSS sesuai yang telah disediakan oleh theme atau plugin anda.

Jika ingin menggunakannya secara terpisah dari CSS lain, baik pada Blogger maupun WordPress, gunakan tag style pada CSS. Cari </head> di dalam template, dan letakkan kode berikut di atasnya.
<style type="text/css">
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
</style>
Note:
- Blogger: Dashboard > Template > Edit HTML > Ctrl+F, cari </head>
- WordPress: Dashboard > Appearance > Editor > Header.php > Ctrl+F, cari </head>

Jika dalam suatu kasus kode di atas tidak berhasil membuat keduanya responsif, ada kemungkinan kode CSS pada FB Comment dan Like Box anda dilingkupi oleh elemen span, ini biasanya karena modifikasi oleh plugin. Ganti dengan class-class berikut:
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}

Tentunya efek responsif pada comment box dan like box mengikuti template atau theme yang responsif, jadi ini tidak berlaku pada template atau theme non-responsive. Bagi anda yang menggunakan template atau theme non-responsive seperti blog ini, tidak perlu dan tidak ada efeknya.

Anda bisa melihat demo Responsive Comment Box di salah satu halaman di syaircinta.com. Coba resize browser dan lihat perubahan pada Facebook Comment Box (resize berarti mengubah ukuran browser, bukan zoom in dan zoom out).
That's it and have a nice blogging.

© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.

Cara Membuat Facebook Comment Box & Like Box Responsif
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 37 Comment(s):

Fauzi Ramadhan said...

sangat bermanfaat mas, saya coba dulu ya

lokerberita.com said...

thanks bang tutornya.. langsung praktek

Ahmad Manarul said...

Asikk, akhirnya nemu juga caranya di buka rahasia tercinta, jadi gak bingung lagi deh ^_^..

Praktek Langsung.. hihihihi

Cah Gembloengz said...

ngepost lagi nih mas..hahahay
tapi sekarang jarang yg pake komentar fb mas..

abanggoyes said...

Terimakasih kang, artikelnya bagus

infosaja.com said...

Jujur mas belum pernah pakai facebook komentar untuk dibuat diblog,terbilang cukup pengaruh sekali css untuk loading blognya.

Dharla Ferdana said...

wah ini emank keren, thanks n salam kenal om.

muif-aha said...

nyimak dulu, ane baru beres2 blog ane, maklum udah lama nggak kerawat hehehe

muif-aha said...

nyimak dulu, ane baru beres2 blog ane, maklum udah lama nggak kerawat hehehe

prieuk tok said...

bermanfaat skali gan,. Tanks dah mau berbagi.. :)

Agus Alfian said...

wah keren, patut di coba... jangan lupa mampir balik yach ke blog gue

bondan gemstone said...

ok.kern gan....

Windu Wirahardi said...

mas, numpang tanya..
apa caranya juga sama kalo mau bikin cbox/buku tamu jadi responsive?

Adib Setyo Utomo said...

salam blogger. terima kasih atas tutorialnya. sangat membantu, dan sudah saya coba. alhamdulillah berhasil. salam semangat dari saya. :)

Asep Suherdis said...

Keren gan postnya..
apabila anda berkenan berkunjung ke Blog ane,, ane senang sekali..
Ditunggu di http://bllog72.blogspot.com

Icoes Ephraem said...

mas saya sudah membuat koment box FB dan berhasil, tapi kalo ada koment dari pengunjung tidak muncul notifikasi di FB knapa ya? mohon petunjuknya, terima kasih.

Ahmad Khoirul Azmi said...

@Icoes: DUlu bikinnya pake apps sendiri atau nebeng aps Id nya orang lain? Kalo punya sendiri, masuk ke apps dimana anda membuat comment box, masuk ke setting, dan masukkan nama anda sendiri sebagai moderator, otomatis info komentar akan muncul pada notifikasi di akun Facebook anda.

Ahmad Khoirul Azmi said...

@Windu: Beda, beda jauh. Tapi saya belum pernah mengeksplorasinya jadi belum tahu.

Farhan Ammar said...

mau nanya nih. tag antara b:skin tuh dimana ? di atas atau dibawah ?
tolong dijelaskan

Ahmad Khoirul Azmi said...

di mana saja asal di dalam/di antara b:skin
cek: http://buka-rahasia.blogspot.com/2013/08/cara-mencari-kode-blogger-template-editor.html

Farhan Ammar said...

kok saya gak berhasil ya ? :(
padahal saya udah coba kedua-duannya itu class, tapi gak berhasil :(
tolong lah gan

Ahmad Khoirul Azmi said...

Apakah template blog anda responsive/tidak?

Farhan Ammar said...

maksud ?
saya masih newbie

Farhan Ammar said...

bisakah saya minta tolong anda yang pasangkan ? :/
saya nyerah, daritadi gak berhasil
kalo tidak mau ya juga tidak apa

ini link situs saya
http://viewatammarblog.blogspot.com

Ahmad Khoirul Azmi said...

??????!!!!
Maksudnya? BANTU SAYA MEMBANTU ANDA.

Post ini adalah tentang memanipulasi CSS like box dan comment box agar responsive mengikuti template yang juga harus responsive. Jika tidak, maka hack CSS di atas tidak berhasil. Template responsive adalah template yang layoutnya bisa berubah2 sesuai/mengikuti lebar browser.

Pertanyaan saya: Apa yang anda cari dan inginkan?

Farhan Ammar said...

darimana bisa mengetahui templlate yg digunnakan responsiv atau tidak ?
apakah template saya ini responsive ?
http://viewatammarblog.blogspot.com

Ahmad Khoirul Azmi said...

Wah, sori, komentar anda tidak sengaja terdelete, silahkan berkomentar lagi.
Saya tidak tersinggung, cuma bingung. Artikel di atas tidak membahas tentang membuat comment box, tapi membuat comment box responsive, jadi asumsinya pembaca sudah punya comment box. Silahkan coba cari tutorial lain di Google tentang membuat comment box, saya tidak memilikinya.

sk-onehot said...

menyimak dengan takjub
Mampir ya, baca berita baru - baru kang

mustopa kamal said...

sangat membantu ......

ruly-islami said...

makasi atas infonya..gan siip.

Hasby Ash Shiddiq said...

Maaf mas, mungkin pertanyaan saya OOT
Saya mau tahu cara membuat button share dan rating bintang lima seperti yang ada pada blog Anda.

Ahmad Khoirul Azmi said...

Simak di sini:
http://buka-rahasia.blogspot.com/2011/12/cara-pasang-share-buttons-blogger.html
http://buka-rahasia.blogspot.com/2012/01/cara-pasang-blogger-star-rating-widget.html

ahlikomputerisasi said...

Keren sangat bermanfaat .mohion izin di coba yah !! semoga berhasil

Petshop Hamtaro said...

sip gan

Heri Hayufa said...

makasih gan infonya keren

thomas hidayatullah said...

min, related post nya bagus banget. ane pengen yang kaya gitu.. script dan caranya gimana?

please.. thanks before min, ane follow dh ni blog

Dreameliven said...

bagus,.,.
thnks,.

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap