Disqus loading but only after refresh, not on first page load


#1

Hi everyone,

I’m currently moving my portfolio (www.samuelzeller.ch) running on SQS over to Ghost V2 (not self-hosted). I added Disqus comments on post.hbs using the “has” helper to trigger it only on posts who have the tag “journal” or “article” which are blog posts. The Disqus div is loading correctly on a page like this one: https://samuelzeller.ghost.io/journal/erik-madigan-heck-first-solo-exhibition-at-the-musee-des-beaux-arts-du-locle/ but only after I scroll down and refresh the browser. It’s not loading if I navigate back to blog and then back to the article, it doesn’t load on first page visit.

Any idea why it’s behaving like that?

Here’s how the snippet in my post.hbs looks like, it’s placed after /footer and before /article

{{#has tag="journal, article"}}
<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
   this.page.url = "{{url absolute="true"}}";  
   this.page.identifier = "ghost-{{comment_id}}"
    };
    (function() {
        var d = document, s = d.createElement('script');
        s.src = 'https://samuel-zeller.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
{{/has}}

#2

That is because the theme that you are have is using swup.js.

“… loading the contents of the new page and replacing required parts in DOM …”

When you go from page to page you don’t really do it, only the necessary parts are replaced.
What you have to do is to initialize Disqus when content is replaced. Add the following code in your main.js file.

swup.on('contentReplaced', function () {
    var disqus_config = function () {
        this.page.url = window.location.href;
        this.page.identifier = $('#disqus_thread').attr('data-id');
    };

    (function() {
    var d = document, s = d.createElement('script');
    s.src = '//'+ config['disqus-shortname'] +'.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
});

In post.hbs replace:

<div id="disqus_thread"></div>
with
<div id="disqus_thread" data-id="{{comment_id}}"></div>

I haven’t really tested but should work. Give it a shot.


#3

Thanks it worked!


closed #4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.