|
Dapat di lihat di versi desktop / mobile |
Cara Membuat Komentar Facebook Responsive Blogspot - Tutorial cara memasang komentar facebook responsive di blog khususnya blogspot ini beda dengan tutorial yang sudah banyak di bagikan.
Kebanyakan tutorial yang ada sebelumnya tidak benar-benar bisa responsive terpasang di blog anda, saya sudah mengalaminya sendiri.
Nah pada kesempatan kali ini saya ingin membagikan bagaimana caranya
Membuat Komentar Facebook yang benar-benar responsive.
Banyak faktor yang menyebabkan bagi para pemilik blog untuk mengganti metode dalam memberikan komentar / tanggapan untuk artikel yang di bagikan di blognya, dari metode komentar bawaan blogspot ke komentar facebook responsive.
Hal yang membedakan tutorial ini dengan yang lainnya adalah dari hasilnya.
Pertama : Kotak komentar facebook benar-benar responsive.
Artinya, kotak komentar facebook dapat dengan otomatis menyesuaikan dengan apa halaman blog anda di kunjungi.
Dengan begini maka akan membuat rasa nyama pengunjung jika ingin meninggalkan sebuah tanggapan.
Kedua : Kode komentar facebook di lengkapi dengan moderator view.
Artinya, dengan fitur ini anda dengan mudah mengatur baik itu :
- Menghapus komentar yang telah masuk
- Membanned akun facebook yang hanya memberikan spam
Ketiga : Tidak terlalu membuat loading blog semakin lama.
Artinya, script tidak banyak serta tidak di hosting oleh sebab itu kotak komentar facebook responsive ini tidak memberatkan loading blog anda.
Untuk anda pemilik blog yang ingin menampilkan kolom komentar facebook responsive di blog. Ikuti tutorial yang saya bagikan di bawah ini.
Cara Membuat Komentar Facebook Responsive Blogspot
- Pertama, lakukanlah tindakan mencadangakan berkas template anda terlebih dahulu. Ini berguna jika anda salah dalam mengedit template dan bingung cara mengembalikannya seperti semula.
Caranya untuk mencadangkan:
Klik Laman Template - Cadangkan / Pulikan - Unduh file lengkap - Simpan.
Caranya untuk mengembalikan template seperti semula :
Klik Laman Template - Cadangkan / Pulikan - Pilih file template yang sudah anda unduh tadi - Unggah - Selesai. - Kedua, pergi ke editor template , lalu pasang meta content berikut dibawah kode <head>
<meta content='FB Profile ID' property='fb:admins'/>
<meta content='App ID' property='fb:app_id'/>
- Ganti kode FB Profile ID dengan nomer ID Facebook anda.
Jika anda tidak mengetahui nomer ID Facebook anda karena sudah menggunakan username.
Cara mengetahuinya :
klik http://findmyfacebookid.com/. Kemudian masukkan URL profil Facebook anda contoh : https://www.facebook.com/mas.trihartanto. Lalu klik Lookup numeric ID, jika sukses muncul deretan angka itulah nomer ID Facebook anda. - Ganti kode App ID dengan kode aplikasi facebook yang anda miliki. Jika anda belum memiliki ID aplikasi facebook sebaiknya anda membuatnya.Caranya bisa anda baca di sini. - Kemudian cari kode </head> (gunakan Ctrl+F untuk memudahkan).
Copy-Paste kode berikut di bawah kode </head>
<div id='fb-root'/>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : 'App_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();}
</script>
Jika sudah tersalin, klik simpan template. - Keempat, pasang html berikut tepat dibawah <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu ).
<!-- facebook comments responsive -->
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
$(window).bind("load", function(){
var container_width = $('.fbbox-comments').width();
var fburl=(window.location.href);
var fbfix=fburl.indexOf('?');
var fburlfix = fburl.substring(0, fbfix != -1 ? fbfix : fburl.length);
$('.fbbox-comments').html('<div class="fb-comments" ' +
'data-href="' + fburlfix + '"' +
' data-width="' + container_width + '" data-num-posts="3"></div>');
FB.XFBML.parse( );
});
//]]>
</script>
<div class='fbbox-comments' style='width:100%;background:#f5f5f5;box-shadow:1px 1px 5px rgba(1,1,1,.1);border:1px solid #fff;margin:8px 0;padding:8px;'>
<div class='fb-comments' data-num-posts='2' data-width='612' expr:data-href='data:blog.url'/>
</div>
</b:if>
Jika sudah tersalin klik simpan template. - Langkah terakhir ialah melihat hasilnya. Kunjungilah salah satu halaman postingan anda, jika berhasil maka kotak komentar akan terlihat.
Jika anda ingin menguji apakah Kotak komentar yang anda buat benar-benar responsive, gunakanlah ganget anda untuk mencobanya.
Sekian masalah Bagaimana caranya membuat komentar facebook responsive di blogspot terselesaikan.
Jika anda yang membaca kemudian melakukan tutorial ini dan hasilnya tidak memuaskan, entak itu kotak komentar tidak mucul, atau kotak komentar tidak responsive.
Atau barangkali fitur moderator view yang seharusnya ada malah tidak bisa di manfaatkan, atau pun hal lainya.
Silahkan dengan senang hati bertanyalah maka saya semapunya akan memjawabnya.
Wassalam