Oy guys, Disqus salah satu platform komentar populer yang digunakan didalam platform blog seperti contoh Blogger dan Wordpress. Sistem komentar satu ini mempermudah kita dalam mengontrol komentar, reaksi artikel, menghilangkan komentar spam dan lainnya.
Namun blia agan memakai Disqus ini biasanya dapat memperburuk performa atau kecepatan akses dalam blog. Bila blog lola alias loading lama tentu pengunjung memilih mundur dan memilih yang lain. Google pun tidak terlalu suka website dengan kecepatan akses yang lama.
Untuk itu kita bisa akali masalah tersebut dengan membuat tombol komentar Disqus agar performa akses web tidak terganggu. Simpelnya Disqus akan di load setelah menekan tombol tersebut. Untuk memaksimalkan kecepatan akses, kita tidak menggunakan JQuery untuk script ini nanti.
Tombol Komentar Disqus Tanpa JQuery
Konsepnya nanti saat akses website atau artikel, komponen komentar Disqus tidak ikut dipanggil jadi tidak ada beban dari Disqus. Kemudian saat pengunjung ingin berkomentar barulah Disqus dipanggil dan diproses agar menampilkan komentar. Jadi penggunaan tombol ini hanya memanggil Disqus bila diperlukan.
Script ini dapat berjalan tanpa menggunakan JQuery dimana penggunaan JQuery walau memudahkan dalam menulis script tapi punya kelemahan pengaruh di kecepatan website. Script ini pun dapat dipasang walau website sudah memakai JQuery.
Sebelum memulai, pastikan sudah memasang dahulu Disqus di website kita dan backup tema atau template bila mungkin ada kesalahan. Sudah? lanjut ke langkah berikut:
1. Pertama kita akan membuat tampilan tombol terlebih dahulu. CSS nya sebagai berikut
.buttonx{cursor:pointer;margin:5px;color:#fff!important;padding:5px 15px;outline:none;border-radius:14px;border:none;background:#6A5FCC;}
2. Kemudian kita taruh tombol yang dimana tombol ini juga menjadi tempat Disqus akan diload. Untuk Blogger, taruh dibawah <div id="comments">
<button class='buttonx btn-comments' id="diqus_trigger" onclick="buka_disqus()">Buka Komentar</button> <!--Tulisan di tombol --></div>
3. Terakhir kita tempel script berikut, jangan lupa sesuaikan nickname Disqus agan
function buka_disqus() {
// Prepare the trigger and target
var disqus_trigger = document.getElementById('disqus_trigger'),
disqus_target = document.getElementById('disqus_thread'),
disqus_embed = document.createElement('script'),
disqus_hook = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]),
disqus_shortname = "nickname"; //Ganti dengan nickname Disqus kamu
// Load script asynchronously only when the trigger and target exist
if( disqus_target && disqus_trigger ) {
disqus_embed.type = 'text/javascript';
disqus_embed.async = true;
disqus_embed.src = '//' + disqus_shortname + '.disqus.com/embed.js';
disqus_hook.appendChild(disqus_embed);
disqus_trigger.remove();
console.log('Disqus loaded.');
}
}
Untuk Blogger temukan dan hapus script
Kemudian tambahkan script tombol komentar Disqus di Blogger berikut
<b:if cond='data:view.isPost'> <script> //<![CDATA[
function load_disqus() {
window.disqus_blogger_current_url = $('link[rel=canonical]').attr('href');
window.disqus_shortname = 'nickname'; // Ganti dengan shortname Disqus kamu
var disqus_trigger = document.getElementById('disqus_trigger'),
disqus_target = document.getElementById('disqus_thread'),
disqus_embed = document.createElement('script'),
disqus_hook = (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]);
// Load script asynchronously only when the trigger and target exist
disqus_embed.type = 'text/javascript';
disqus_embed.async = true;
disqus_embed.src = '//' + disqus_shortname + '.disqus.com/blogger_item.js';
disqus_hook.appendChild(disqus_embed);
disqus_trigger.remove();
console.log('Disqus loaded.');
}
//]]> </script> </b:if>
Selesai, tombol komentar Disqus seharusnya berhasil dipasang. Untuk demo langsung saja menuju area komentar untuk tesnya.
Selain performa, Disqus punya masalah komentar yang tidak konsisten di Blogger. Pada versi Desktop ada komentar, kemudian saat diakses di HP komentar tersebut tidak ada. Hal tersebut dikarenakan penggunaan ?m=1 atau ?m=0 di Blogger, kesini untuk lebih lanjut.
Sekian, tutorial kali ini tentang tombol komentar Disqus tanpa JQuery. Script referensi dari w3bits. Matur nuwun.
Reaksi dan Komentar