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

Görüntüleme

( Kelime)

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 İki Farklı Seçenek Sunmaktadır.

1. Butona tıklayarak Disqus yorumlarının yüklenmesini sağlamak.
2. 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çı;

• Disqus yorum yapmak için birçok özelliği bünyesinde barındırmaktadır.
• Disqus’da yapılan yorumları harici bir Veri Tabanın’da (Database) barındırmanız gerekmez.
• 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 JavaScript 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 JavaScript Embed kodu, Yorum Formunu yüklemek için Web Sayfanızda ya da Blog Sayfanızda "#disqus_thread" kodunu arar. Disqus JavaScript 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 javaScript Embed kodu yorumların varlığını kontrol etmektedir.

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

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

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

Aşağıdaki Disqus JavaScript Kodunu Web Sitenizin veya Blog Sayfanızın</body> tagının bir satır üzerine ekleyin.

Disqus JavaScript Kodu

JS<script type='text/javascript'>
//<![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 JavaScript Kodlarının Özellikleri;

"disqus_load()" Tembel yükleme olarak aşağıda yazılı görevleri yerine getiren bir fonksiyondur.

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

Disqus'u JavaScript Komut Dosyası İle 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 JavaScript Kodu

JS<script type='text/javascript'>
//<![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.

Disqus'u Sayfayı Aşağı Kaydırarak Yükleme (Tembel 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 JavaScript Kodunun Özellikleri:

• "#disqus_thread" yorum formunun yükleneceği alanı tanımlar.
• "#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.
• Disqus JavaScript Embed dosyasını hazır hale getirir ve "#disqus_thread" bağlanmasını sağlar.
• 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

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

Aşağıdaki Disqus JavaScript Kodunu Web Sitenizin veya Blog Sayfanızın </body> tagının bir satır üzerine ekleyin.

Disqus JavaScript Kodu

JS<script type='text/javascript'>
//<![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.

NOT : 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.