Disqus Yorum Formunu Tıklama ve Kaydırma Yöntemi ile Yükleme

Disqus Yorum Formunu Tıklama ve Kaydırma Yöntemi ile Yükleme - Bu yazımız tamamen Disqus yorum formu yüklenme sorununu giderme ile ilgili o...

Disqus Yorum Formunu Tıklama ve Kaydırma Yöntemi ile Yükleme - Bu yazımız tamamen Disqus yorum formu yüklenme sorununu giderme ile ilgili olup, sayfa yüklenme hızını artırmak için iki farklı teknik yöntemden bahsedeceğiz. Bu teknik yöntemler bir butona tıklayarak ya da ekranı aşağı doğru kaydırarak sayfa yüklenme hızını etkilemeden Disqus yorum formunun yüklenmesini sağlayacak.

Disqus gibi bağımsız yorumlama sistemi platformları son günlerde oldukça popülerdir. Bu tür sistemlerin birkaç dezavantajının yanı sıra bazı avantajları da var:

1. Yorum yapmak için birçok özellik ve ek işlevsellik sunar.
2. Yorumlar için ayrı bir veri tabanı tutmanıza gerek yok.
3. Yorum denetleme ve spam konusunda endişe edecek bir durum yok.

Tembel yükleme eklentileri ile web sitesinizin yüklenme hızını etkilemeden Disqus yorum formunun yüklenmesi sağlanabilir.

Bunu yaparak, Disqus veritabanının sorgulama süresini azaltabilirsiniz.

Disqus gibi bağımsız yorumlama sistemleriyle bunu yapmak daha da kolay. Yorumları senkronizasyon olmayacak şekilde yüklemek için Disqus'ın JS API dosyası avantajlarından yararlanacağız.

Açıklamalar

Bu yöntemlerle, kullanıcı sitenizde bir sayfa veya yayına tıkladığında yorum bölümü yüklenmez. Bu, sitenizin biraz daha hızlı yükleneceği anlamına gelir.

Disqus JS embed kodu yorum formunu yüklenmek için web sayfalarınızda "#disqus_thread" bölümünü arar. Kontrollü kod "#disqus_thread" bölümünü bulduğunda bu bölüm içindeki yani sayfaya ait tüm yorumlar yüklenir. Yani, fikir olarak Disqus JS embed dosyasının yüklenmesini kontrol etmektir.

Aşağıda paylaşılan kodlar, Disqus JS embed dosyasını yalnızca kullanıcının belirli tepkilerine göre yüklenecektir. Kulağa yeterince hoş geliyor galiba.

Disqus'ı bir butona tıklayarak (click-event) yükleme

Disqus yorum formunu bir butona tıklayarak yüklemek istiyorsanız, sitenize bu kodu ekleyin. Bu kodu kullanmak için tek şart sitenizde Google API veya benzer işlevsel jQuery dosyasının olması gerekir. jQuery dosyası kullanmıyorsanız endişelenmeye gere yok, bir sonraki bölüme bakın.

Disqus komut butonu

<div id="disqus_thread"></div>
<a id="disqus_loader" onclick="load_disqus('bloggerekibi')"><h4><data:messages.postAComment/></h4></a>
</div>

Aşağıdaki Disqus JS dosyasını web sitenizin </body> kodunun bir satır üzerine ekleyin.

Disqus JS dosyası

<script>
//<![CDATA[
function load_disqus(disqus_shortname) {
    var disqus_trigger = jQuery('#disqus_trigger'),
        disqus_target = jQuery('#disqus_thread');
    if (disqus_target && disqus_trigger) {
        jQuery.ajaxSetup({
            cache: true
        });
        jQuery.getScript('//' + disqus_shortname + '.disqus.com/embed.js');
        jQuery.ajaxSetup({
            cache: false
        });
        disqus_trigger.remove();
        console.log('Disqus loaded.');
    }
}
//]]>
</script>

"disqus_load()" tembel yükleme olarak aşağıdaki görevleri yerine getiren bir fonksiyon tanımlı:

1. Web sitenizde kullandığınız Disqus kısa adınızı sorgular,
2. Disqus kısa adınızı kullanarak sitenize ait olan Disqus JS embed dosyasını yükler,
3. #disqus_loaded Disqus yorumlarını yüklemek için komut butonu işlevselliğini oluşturur.

Disqus'ı JavaScript komut dosyası ile yükleme

Web sitenizde jQuery kullanmıyorsanız, Disqus'ı yüklemek için ham JavaScript komut dosyası ile de aynı versiyonu kullanabilirsiniz.

Disqus JS dosyası

<script>
//<![CDATA[
function load_disqus(disqus_shortname) {
    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]);
    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.');
    }
}
//]]>
</script>

Kod içerisinde belirtilmiş olan yere "bloggerekibi" Disqus kısa adınızı eklemeyi unutmayın.

Disqus'ı tembel-yükleme ile sayfayı aşağı kaydırarak (scroll) yükleme

Buradaki yöntem yukarıdaki işlevden farklı çalışmakta, kullanıcı sayfayı aşağı kaydırdığında Disqus yüklenecek. Aşağıdaki JS kodunun özellikleri:

1. "#disqus_thread" yorum formunun yükleneceği alanı tanımlar.
2. "#disqus_thread" içeriğindeki değişikliği saptamak için "#disqus_empty" kontrol eder. Bu, verilerin tekrar tekrar yüklenmesini önlemeye yardımcı olacaktır.
3. Disqus JavaScript embed dosyasını hazır hale getirir ve "#disqus_thread" bağlanmasını sağlar.
4. Kullanıcının yorum bölümüne kadar sayfayı kaydırıp kaydırmadığını kontrol eder ve yorumları yükler.

Disqus konum kodu

<div id="disqus_thread">
<div id="disqus_empty"/>
</div>

Aşağıdaki Disqus JS dosyasını web sitenizin </body> kodunun bir satır üzerine ekleyin.

Disqus JS kodu

<script>
//<![CDATA[
function load_disqus(disqus_shortname) {
    var is_disqus_empty = jQuery('disqus_empty'),
        disqus_target = jQuery('disqus_thread'),
        disqus_hook = (jQuery('head')[0] || jQuery('body')[0]);
    if (disqus_target && is_disqus_empty) {
        jQuery.ajaxSetup({
            cache: true
        });
        jQuery.getScript('//' + disqus_shortname + '.disqus.com/embed.js');
        jQuery.ajaxSetup({
            cache: false
        });
        is_disqus_empty.remove();
    }
}
jQuery(document).scroll(function(e) {
    var currentScroll = $(window).scrollTop;
    var disqus_target = jQuery('#disqus_thread');
    if (currentScroll > disqus_target.getBoundingClientRect().top - 150) {
        load_disqus('bloggerekibi');
        console.log('Disqus loaded.');
    }
}, false);
//]]>
</script>

Disqus jQuery versiyonu

Web sitenizde jQuery doyası kullanıyorsanız, yukarıda açıkladığımız gibi bu web siteniz için daha kullanışlı olabilir.

Disqus JS kodu

<script>
//<![CDATA[
function load_disqus(disqus_shortname) {
    var is_disqus_empty = jQuery('disqus_empty'),
        disqus_target = jQuery('disqus_thread'),
        disqus_hook = (jQuery('head')[0] || jQuery('body')[0]);
    if (disqus_target && is_disqus_empty) {
        jQuery.ajaxSetup({
            cache: true
        });
        jQuery.getScript('//' + disqus_shortname + '.disqus.com/embed.js');
        jQuery.ajaxSetup({
            cache: false
        });
        is_disqus_empty.remove();
    }
}
jQuery(document).scroll(function(e) {
    var currentScroll = $(window).scrollTop;
    var disqus_target = jQuery('#disqus_thread');
    if (currentScroll > disqus_target.getBoundingClientRect().top - 150) {
        load_disqus('bloggerekibi');
        console.log('Disqus loaded.');
    }
}, false);
//]]>
</script>

Notlar

Disqus ile ilgili yukarıda paylamış olduğumuz bilgiler ve kodlar Blogger, Wordpress ve diğer tüm platformlar için geçerlidir.

• Yukarıdaki kodlarda "bloggerekibi" belirtilen yeri Disqus kısa adınız ile değiştirin.
• Disqus kısa adınız, genellikle Disqus hesabınıza giriş yapmak için kullandığınız kullanıcı adınızdır.
• "disqus_thread" kimliğine sahip bölüm, yorumların yukarıdaki iki yoldan herhangi birini kullanarak yüklendiği yerdir.
• Web sitenizde jQuery kullanmıyorsanız, jQuery yöntemine kullanmaya gitmeyin. Çünkü sadece Disqus'ı yüklemek için jQuery kullanmak iyi bir fikir değil. Bunun yerine ham JavaScript komut dosyasını paylaştık.

Kurulum ile ilgili yardım ve destek talepleriniz için yorum yaparak bize ulaşabilirsiniz.