Cara Pasang Kolom Komentar Facebook Responsive Pada Blog
Memasang komentar facebook pada blog bukanlah sesuatu yang baru. Hal ini sudah usang dilakukan oleh para blogger. Bahkan ada yang sudah mematikan kolom komentar blog dan hanay memasang komentar facebook saja. Ada beberapa pakar SEO menyampaikan bahwa komentar facebook mempunyai rating yang cukup tinggi sehingga lebih disukai oleh google. Sebenarnya sih sama saja dengan komentar yang lain berdasarkan saya. Apalah gunanya bila kolom komentar facebook tersebut hanya jadi pajangan saja (tak ada yang mengisi kolom komentarnya / tak ada pengunjung blognya).
Kolom komentar facebook ini dipakai untuk mempermudah pengunjung blog melaksanakan interaksi dengan pemilik blog ataupun dengan pengunjung blog yang lain. Jika sebelumnya saya sudah menunjukkan tutorial cara memasang komentar adonan facebook, blogger dan disqus dalam satu blog dengan tampilan tab, kini saya akan menunjukkan tutorial menambahkan komentar facebook pada blog dengan tampilan responsive.
Kenapa harus responsive?. Ini penting, semoga dikala blog Anda diakses melalui Android atau perangkat HP lainnya maka tampilannya akan menyesuaikan sesuai ukuran device HP yang Anda gunakan. Kode ini juga lebih efektif untuk proses loading blog.
Untuk tampilannya kurang lebih menyerupai dibawah ini :
Cara Pasang Kolom Komentar Facebook Responsive Di blog
Langsung saja kita mulai tutorial kali ini
Silahkan login ke Blogger Anda dan masuk ke Theme Lalu Pilih Edit HTML
1. Simpan aba-aba berikut sempurna dibawah <head>
2. Langkah selanjutnya, Sebelum tag epilog head atau </head>, tambahkan aba-aba berikut ini
3. Terakhir, masukkan aba-aba berikut ini sempurna dibawah aba-aba <data:post.body/> yang ada di halaman post tempalte blog Anda
Untuk menambahkan comment count facebook di halaman index dan post, silahkan tambahkan aba-aba berikut ini pada markup post meta atau post info yang sesuai dengan template blog yang Anda gunakan, alasannya yakni niscaya tiap template mempunyai letak yang berbeda.
Tampilan untuk pemasangan kolom komentar facebook pada tutorial diatas yaitu berada diatas kolom komentar blogger atau berada pertama sebagai kolom komentar sehabis postingan. Namun bila ingin menciptakan tampilannya berdampingan, silahkan baca cara menciptakan kolom komentar facebook blogger berdampinganKolom komentar facebook ini dipakai untuk mempermudah pengunjung blog melaksanakan interaksi dengan pemilik blog ataupun dengan pengunjung blog yang lain. Jika sebelumnya saya sudah menunjukkan tutorial cara memasang komentar adonan facebook, blogger dan disqus dalam satu blog dengan tampilan tab, kini saya akan menunjukkan tutorial menambahkan komentar facebook pada blog dengan tampilan responsive.
Kenapa harus responsive?. Ini penting, semoga dikala blog Anda diakses melalui Android atau perangkat HP lainnya maka tampilannya akan menyesuaikan sesuai ukuran device HP yang Anda gunakan. Kode ini juga lebih efektif untuk proses loading blog.
Untuk tampilannya kurang lebih menyerupai dibawah ini :
Cara Pasang Kolom Komentar Facebook Responsive Di blog
Langsung saja kita mulai tutorial kali ini
Silahkan login ke Blogger Anda dan masuk ke Theme Lalu Pilih Edit HTML
1. Simpan aba-aba berikut sempurna dibawah <head>
<meta content='Kode ID Facebook admin' property='fb:admins'/> <meta content='Kode ID Aplikasi Facebook' property='fb:app_id'/>2. Langkah selanjutnya, Sebelum tag epilog head atau </head>, tambahkan aba-aba berikut ini
<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. Terakhir, masukkan aba-aba berikut ini sempurna dibawah aba-aba <data:post.body/> yang ada di halaman post tempalte blog Anda
<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='650'/></div> </b:if>Untuk menambahkan comment count facebook di halaman index dan post, silahkan tambahkan aba-aba berikut ini pada markup post meta atau post info yang sesuai dengan template blog yang Anda gunakan, alasannya yakni niscaya tiap template mempunyai letak yang berbeda.
<a expr:href='data:post.url + "#fb-comment"'><span class="fb-comments-count" expr:data-href='data:post.url'></span> facebook comments</a>Terima kasih telah mengunjungi blog saya, semoga tutorial ini bermanfaat. Jika ada yang masih belum jelas, silahkan layangkan pertanyaan Anda dikolom komentar.