Disqus'u Tıklama ve Kaydırma Yöntemi ile Yükleme

Bu yazımın amacı Disqus’da ki yorumların yüklenme sorunlarını ortan kaldırma ile ilgili olmasının yanı sıra, sayfanın yüklenme sırasındaki hızını arttırabilmek için hangi teknikleri uygulayabileceğimizden bahsedeceğim.

Bunun için Disqus bize iki farklı seçenek sunmaktadır.
1.si bir butona tıklayarak Disqus yorumlarının yüklenmesini sağlamak.
2.si ise sayfayı aşağıya doğru kaydırarak Disqus yorumlarının yüklenmesini sağlamak.

Disqus vb gibi yorum yazabilmek adına tasarlanmış hazır platformlar son günlerde oldukça revaçtadır. Bu ve bunun gibi platformlar insanların hayatını kolaylaştırarak ve  kullanıcılara dezavantajın yanında büyük avantajlarda sağlamaktadır.

Bu avantajların bir kaçı;

1. Disqus yorum yapmak için birçok özelliği bünyesinde barındırmaktadır.
2. Disqus’da yapılan yorumları harici bir Veri Tabanın’da (Database) barındırmanız gerekmez.
3. Disqus’da yorum denetleme sayesinde spam konusunda da endişe edeceğiz bir durum söz konusu değil.

Tembel  yükleme eklentileri kullanarak da Web sitenizin veya Blog Sayfanızın yükleme hızını etkilemeden Disqus Yorum Formunun yüklenmesini sağlayabilir, Disqus Veritabanının (Database) sorgulama sürecini minimalize edebilirsiniz. Ancak Disqus gibi hali hazırda kusursuz  bir yorum yazma platformu ile bunları yapmak oldukça kolay ve zahmetsizdir. Disqus Java Script ve API dosyası avantajlarından nasıl yararlanacağımızı öğreneceğiz.

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 Java Script Embed kodu, Yorum Formunu yüklemek için Web Sayfanızda ya da Blog Sayfanızda "#disqus_thread" kodunu arar. Disqus Java Script Embed Kodu sayesinde "#disqus_thread" bölümünü bulduğunda bölüm içerisindeki sayfaya ait bütün yorumlar yüklenir. Mantık olarak Disqus java Script Embed kodu yorumların varlığını kontrol etmektedir.

Siz değerli takipçilerim ile paylaşacağım bu kodlar, Disqus Java Script Embed dosyasını kullanıcıların istekleri doğrultusunda yükleneceğini belirtmek isterim.

1. Adım - Disqus’u bir butona tıklayarak yükleme
Disqus yorumlarını bir butona tıklama yardımı ile yüklemek istiyorsanız aşağıdaki paylaştığım kodu Web Sayfanıza veya Blog Sayfanıza eklemelisiniz. Bu kodu kullanmanın iki şartı Google API veya buna muadil olacak JQuery dosyası olması gerekmektedir. JQuery dosyası kullanmıyorsanız bir sonraki adıma bakabilirsiniz.

Disqus Komut Butonu HTML Kodu

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

Aşağıdaki Disqus Java Script Kodunu Web Sitenizin </body> tagının bir satır üzerine ekleyin.

Disqus Java Script Kodu

<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>

Aşağıda yer alan Java Script kodlarının özellikleri;
"disqus_load()" Tembel yükleme olarak aşağıda yazılı görevleri yerine getiren bir fonksiyondur.

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.

2. Adım - Disqus'u JavaScript komut dosyası ile yükleme
Web Sitenizde veya Blog Sayfanızda jQuery kullanmıyorsanız, Disqus'u yüklemek için sade bir JavaScript komut dosyası ile de bu işlemleri gerçekleştirebilirsiniz.

Disqus Java Script Kodu

<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 "bloggelistiricim" Disqus kısa adınızı eklemeyi unutmayın.

4. Adım - Disqus'u Tembel-Yükleme ile sayfayı aşağı kaydırarak yükleme
Buradaki yöntem butona tıklayarak yüklemeden biraz daha farklı çalışmakta olup Kullanıcılar sayfanın alt kısmına inmeye başladıkça Disqus yorumları yüklenmeye başlayacak.

Aşağıdaki Java Script 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 HTML Kodu

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

Aşağıdaki Disqus Java Script Kodunu Web Sitenizin </body> tagının bir satır üzerine ekleyin.

Disqus Java Script 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('bloggelistiricim');
        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 Java Script 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('bloggelistiricim');
        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 "bloggelistiricim" 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.

Disqus'u Tıklama ve Kaydırma Yöntemi ile Yükleme ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.