What am I doing wrong with this Javascript + Genesis?

[lvvvvvl]

Hello,

I'm trying to load Disqus lazily using javascript I found on a website which I've tried inserting in my header and footer afterwards:

<script type="text/javascript">
var comments = document.getElementsByClassName('comments')[0],
    disqusLoaded=false;

function loadDisqus() {
    var disqus_shortname = 'disqus_shortname';
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    disqusLoaded = true;
}
//Get the offset of an object
function findTop(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return curtop;
    }
}

if(window.location.hash.indexOf('#comments') > 0)
    loadDisqus();

if(comments) {
    var commentsOffset = findTop(comments);

    window.onscroll = function() {
        if(!disqusLoaded && window.pageYOffset > commentsOffset - 1500) {
            console.log('load comments, NOW!!');
            loadDisqus();
        }
    }
}
</script>

And the following in my functions:

/*** Disqus Comment for Genesis Framework ***/
remove_action( 'genesis_comments', 'genesis_do_comments' );
add_action('genesis_comments', 'wpa_disqus_comments' );
function wpa_disqus_comments() {
if ( is_single() ) {
?>
<div class="comments"></div>
<?php }
}

But it doesn't seem to call the embed.js file to load the disqus shortname I modified in the javascript. What am I doing wrong?

[James]

hey there

in order to include any script on a site you need to use 'wp_enqueue_script'

for example you can add this to your functions.php

add_action( 'wp_enqueue_scripts', 'jm_enqueue_disqus_scripts' );
function jm_enqueue_disqus_scripts() {

	wp_enqueue_script( 'disqus-script', get_bloginfo( 'stylesheet_directory' ) . '/js/disqus.js', array( 'jquery' ), '1.0.0', true );
 	
}

and add your script 'disqus.js' to a folder 'js' in your theme directory.

this will then call your script on every page.

[lvvvvvl]

Hey mate,

Thank you for the suggestion. I successfully enqueued the script on every page but unfortunately I'm still having the same problem. I can see in the source the disqus.js is loaded, and in the genesis_comments the <div identifier is replacing the comments but the disqus embed just won't load up and displays blank.

I've even tried replacing the getElement to document.getElementById('disqus_thread') so I could use the default <div id="disqus_thread" data-disqus-url="<?php the_permalink(); ?>"></div> with no success.

Maybe it's something wrong with the javascript itself.

[Author]

Posts