Halo sobat blogger, Kali ini admin akan berbagi caraa membuat kolom komentar facebook responsive untuk blog yang responsive.
Cara Mudah Membuat dan Memasang Kotak Komentar Facebook Responsive di Blogspot - Memasang kolom comment facebook di blog sangatlah mudah , Karena facebook sendiri sudah menyediakan plugin comment yang dapat kita pasang di blog kita
Tapi kali ini saya akan memodifikasi komentar facebook di blog kita menjadi responsive dengan tujuan , sehingga pengunjung mengakses blog kita dalam bentuk apapun dapat berkomentar di blog kita menggunakan komentar facebook dengan nyaman , karena udah di modif responsive . cara membuatanya pun tidak jauh beda debgan cara membuat kolom komentar lainnya , disini kita merubah satuan widht ( px ) menjadi ukuran 100% dan menambahkan komponen java script agar widht 100% tadi bisa bekerja , karena kalau tidak dikasih java script ukuran widht 100% tidak akan bekerja , sedangkan untuk widht default komen facebook menggunakan ukuran pixel ( px ).
Berikut langkah langkah membuat kolom komentar facebook responsive
1. Masuk ke dasshboard blog dengan akun masing masing ,pada bilah kiri pilih menu template >> EDIT HTML , setelah editor template terbuka silahkan cari kode <head> setelah kode sudah ditemukan copy code dibawah ini dan taruh tepat dibawah kode <head> Untukk mempermudah pencarian gunakan tombol keyboard CTRL + F > PADA kolom ketikan kode <head> lalu enter.
<meta content='FB Profile ID' property='fb:admins'/><meta content='App ID' property='fb:app_id'/>
# Keterangan: Pada tulisan yang admin warnai merah diatas " FB ID dan App ID" Silahkan ganti dengan ID facebook sobat, Cara mengetahui ID facebook silahkan dilihat disini #
2. pada langkah kedua silahkan sobat cari kode </head> sesudah itu copy pastekan kode dibawah ini tepat diatasnya.
<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. Selanjutnya pemasangan HTML berikut tepat dibawah <data:post.body/> ( setiap templat kode seperti ini tidak sama , misalkan templat sobat ada tiga kode seperti ini ,maka sobat coba satu persatu ) .
<b:if cond='data:blog.pageType == "item"'><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='500'/></div></b:if>
4. langkah terakhir simpan template.
Demikian cara membuat kolom komentar facebook responsive buat blog responsive ,Mungkin ulasan diatas masih kurang detail ,jadi silahkan berkomentar untuk menambah kekurangannya, semoga informasi ini bisa bermanfaat ,terimakasih Atas kunjungannya.
No comments:
Write comments