Integrate Disqus With Octopress

Integrate your Octopress with Disqus

I’m new to Octopress platform for Blogging, but so far I think is great and simple.

Creating my first post I felt so excited, as when you discover a new treasure or a secret path in your favorite game. But everything at the beginning is not going to be smooth. My first problem was that my post weren’t displaying the Disqus comments, that are a very common system for comments in the blog community. After hours of searching the web and reading lot of post about the topic I had a goodunderstand of how to integrated them.

So I thought of sharing my experience:

Fisrt you have to register you site in Disqus, you will receive a short code. After that go to your _config.yml file inside your project and add it.

1
2
3
# Disqus Comments
disqus_short_name: *****************
disqus_show_comment_count: false

After that make sure that you allow comments in your post. Inside source/_posts/ there will be all your post, and on the top are some configuration :

1
2
3
4
5
6
7
---
layout: post
title: "File rename"
date: 2014-04-13 18:48:47 +0200
comments: true
categories: ruby
---

And that’s it, or wasn’t ?

But it didn’t work, I went on a quest for solving this. Octopress uses the liquid syntax for loading the different layouts, reading the post layout inside source/_layouts/_posts you will see that load a file call disqus_thread.html, I looked for it and found it, and saw this:

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

Felt a little weird, that’s not what you expect, searching in the wide Internet some people talked about another file disqus.html inside the _include folder, once there the code felt more appropiated. Copying that inside disqus_thread.html the problem solve.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
      var disqus_shortname = 'gustavocasogithubio';
      {% if page.comments == true %}
        {% comment %} `page.comments` can be only be set to true on pages/posts, so we embed the comments here. {% endcomment %}
        // var disqus_developer = 1;
        var disqus_identifier = 'http://gustavocaso.github.io/2014/04/integrate-disqus-with-octopress/';
        var disqus_url = 'http://gustavocaso.github.io/2014/04/integrate-disqus-with-octopress/';
        var disqus_script = 'embed.js';
      {% else %}
        {% comment %} As `page.comments` is empty, we must be on the index page. {% endcomment %}
        var disqus_script = 'count.js';
      {% endif %}
    (function () {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    }());
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Hope I could help.

Comments