How do I use disqus comments in github pages blog (Markdown)?

Question

Is it possible to integrate disqus html comments in a blog using github-pages? I like the idea of using github, jekyll and markdown to manage my site and blog for simplicity. However, I'd like to include disqus commenting capability. However, since markdown generates the html - how do I include the html/js code for disqus ?

Answer 1

The easiest and cleanest way to do it is to create a partial with the HTML that disqus provides in your _includes/ folder (e.g. _includes/disqus.html) and then just including it in your posts layout file (e.g. _layouts/post.md):

{% include disqus.html %}

You can see an example here: post layout and disqus partial.

Answer 2

There is an "official" way to accomplish this task. You can find the Disqus indication at this link. In details, the procedure is the following:

1. Add a variable called comments to the YAML Front Matter (i.e. the header of your post file) and set its value to true. A sample front matter might look like:

    layout: default
    comments: true
    # other options
   

2. Create a new template file (i.e. disqus.html) and put the Universal Embed Code there between {% if page.comments %} and {%- endif -%}.

3. Include the disqus.html file into your post template.

Hope it helps :)

Answer 3

Include the disqus comment in your post.html, and set an identifier for the comment count link:

<div id="disqus_thread"></div>
<script type="text/javascript">
    var disqus_shortname = '<your-disqus-name>'; 
    var disqus_identifier = '{{ page.id }}'; 
...
</script>

In your default.html template include the comment count script:

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = '<your-disqus-name>';
...
</script>

Then add the link to the comments using the data-disqus-identifier attribute, so that the comment count will show up after each post in your blog's main page:

<a href="{{post.id}}" data-disqus-identifier="{{post.id}}">Leave a comment</a>

Answer 4

To summarise:

1. Use 3rd comment service Disqus, create one its account
2. Associate your site, that is your github site, with disqus
3. Get Disqus shortname in admin/settings/general/
4. Edit your _config.yml of github, make sure it contains following content:

disqus:
    shortname: <your disqus short name>

5. Make sure there is disqus.html under _includes and it looks like:

   {% if page.comments %}
   <div class="comments">
   <div id="disqus_thread"></div>
   <script type="text/javascript">
   var disqus_shortname = '{{ site.disqus.shortname }}';
   (function() {
   var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
   dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
   (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>
   </div> 
   {% endif %}
   

   6. Include disqus.html in _layouts/post.html

   7. To enable comment, add comments:true on your post yaml front matter. Disable it by setting comments: false or by not including the comments option at all.

Answer 5

Open config.yml and add the following line of code disqus_shortname: username. Replace username with your Disqus shortname.

Create a file called disqus_comments.html in Jekyll’s _includes folder and add your Disqus Universal Embed Code in between a {% if page.comments %} and a {% endif %} liquid tag

{% raw %}{% if page.comments != false %}
<div id="disqus_thread"></div>
<script type="text/javascript">
  var disqus_shortname  = '{{ site.disqus_shortname }}';
  var disqus_identifier = '{{ page.url }}';

  (function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (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>
{% endif %}{% endraw %}

You simply add comments: false in any posts front-matter to turn off that post comments.

Finally, open your post.html file and add the following liquid include tag just after the end </article> tag.

{% if site.disqus_shortname %}
  {% include disqus_comments.html %}
{% endif %}

You can follow my detailed blog post on how to add Disqus comments to Jekyll if you get stuck.

Answer 6

That's true Jekyll will render HTML from your Markdown files (locally using Jekyll or remotely by pushing to gh-pages). However it doesn't really matter as this kind of code has to be in a layer, so not in the Markdown source file.

_layouts
    `- default.html
    `- post.html <- `layout: default` in the YAML header
_posts
    `- YYYY-MM-DD-my-post.md <- `layout: post` in the YAML header

By following this tree view, you'll able to render your Markdown files by using your post layout, which can contain your Disqus script.