Adding Disqus comments to Pagekit

Surfing within the Internet and opening tens and hundreds of sites per a day, we know the value of time and leaving the site if something is not user friendly and requires more time than we can spend on the action. Just imagine you discovered a blog and decided to share your thoughts with authors. Such blog is not important for you, so psychologically you rather leave the site, than waste your time on registration process with confirming your profile via e-mail in sake of a few comments.

In such situation the comment services comes to help. Disqus also requires a registration, but it’s in one's way almost a standard and very useful service for small websites where people won’t register for comments. But having a Disqus profile, it’s easy to log in and to comment.

Implementation of this type snippets is so easy for developer, but I hope this little tutorial will save time to site integrators who are looking for quick solution. Well, here we go.

Conception

Writing a extension takes lot of time and, honestly, such solution does not deserve to be released as a plugin due to its simplicity, but it can be a part of theme settings, though. Within this tutorial we’ll examine how to implement Disqus comments in Blog extension by modifying Pagekit theme. My choice fell on Brick theme which you see in action on this site, but if you’re using another theme, just perform the same steps with your theme. Before you start, please be sure you have all necessary information for the integration. First of all, you must Set up Disqus on a new site. Remember the shortname of created account, we'll require it soon.

Step 1. Modifying the post page

We're going to replace standard comments feed below the post.
Open the file: /pagekit/theme-brick/blob/master/views/blog/post.php

And find the line 27:

<?= $view->render('blog/comments.php') ?>

This is the call of standard comments feed. You can replace this line to the following Disqus snippet:

<div id="disqus_thread"></div>
<script>
    /**
     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
     */
    /*
    var disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() {  // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
        var d = document, s = d.createElement('script');
        
        s.src = '//[shortname].disqus.com/embed.js';  // IMPORTANT: Replace EXAMPLE with your forum shortname!
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

Take a look at this fragment: //[shortname].disqus.com/embed.js' where is [shortname] - insert your shortname without square brackets.

Step 2. Modifying the posts section

In the blog section we can see a typical information: %X comments that count number of comments for each post. We need to operate with Disqus comments and display the number of its comments instead of the standard one.

Go to /yoursite.com/packages/pagekit/theme-brick/blob/master/views/blog/posts.php

Find the code in approximately 31-33 lines:

                    <?php if ($post->isCommentable() || $post->comment_count) : ?>
                    <li><a href="<?= $view->url('@blog/id#comments', ['id' => $post->id]) ?>"><?= _c('{0} No comments|{1} %num% Comment|]1,Inf[ %num% Comments', $post->comment_count, ['%num%' => $post->comment_count]) ?></a></li>
                    <?php endif ?>        

Now you must replace #comments anchor at #disqus_thread. Here is what you get:

                    <li><a href="<?= $view->url('@blog/id#disqus_thread', ['id' => $post->id]) ?>"><?= _c('{0} No comments|{1} %num% Comment|]1,Inf[ %num% Comments', $post->comment_count, ['%num%' => $post->comment_count]) ?></a></li>

Now let's add the following line in the end of posts.php file after the line <?php endif ?>:

<script id="dsq-count-scr" src="//[shortname].disqus.com/count.js" async></script>

Don’t forget to change shortname on your own without square brackets.

Conclusion

Once new features will appear in Blog extension, all themes probably will needed an update according to new changes, so it’s supposedly the developers will provide immediately fixes of their themes. In such case do not forget to perform actions with modifying files again if Disqus comments no longer displayed. It means the modified files should be replaced and you need to perform these manipulations again.

The result of such implementation is seen on this blog. Good luck!