Getting the Disqus code
First you will need to make an account on Disqus.
Login to your disqus account and go to settings. Click on universal code to get the code you need. Copy the code. It should look something like this:
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'blogahmedamayemcom'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(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>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
(I replaced the spaces with tabs for my own benefit.)
Making a new theme
Now we need to open up our theme. Head over to our console and ssh into our trusty linux server. First let’s go to our themes, which are in the directory ghostdir/content/themes .
[ahmed@amayem ~]$ cd /var/www/ghost/content/themes/
You should be running ghost using its own user, which is probably called ghost. Since we will be modifying things to do with ghost its best if we switch to the ghost user so we don’t have to keep sudoing and messing up file ownership.
[ahmed@amayem themes]$ sudo su ghost
Cool we are now acting as the ghost user. Let’s check which themes we have.
[ghost@amayem themes]$ ls
casper ghostwriter
Looks like I have two themes. If you haven’t installed any new themes you will see just the default theme, which is currently casper. Let’s first change casper, but it’s probably not a good idea for us to be modifying our one and only casper theme, so let’s make a copy of the theme.
[ghost@amayem themes]$ cp -r casper/ casper-disqus
[ghost@amayem themes]$ ls
casper casper-disqus ghostwriter
Go into the casper-disqus directory and let’s see what we have.
[ghost@amayem themes]$ cd casper-disqus/
[ghost@amayem casper]$ ls -1
assets
default.hbs
index.hbs
LICENSE
package.json
page.hbs
post.hbs
README.md
tag.hbs
Since our comments will be on the pages for indidiual posts it would seem that the one we are most interested in is post.hbs. Let’s do some exploration.
[ghost@amayem casper-disqus]$ vi post.hbs
The filename extension is .hbs, which stands for handlebars. Handlebars is an html templating tool. This is my first time looking at handlebars templates so I will be doing some explanation. If you just want to know where to put the code go to the final paste
Exploring handlebars, where to put the code
Looking at the file I’m not sure exactly where to paste the code, so let’s do some experimenting. Let’s add some text to before the </footer>, {{/post}}, </article> and </main> tags. We should also have one before and after the </section> tags. Make sure the text you put in indicates where you are in the file. Enter insert mode using i and move the cursor where you want it with the arrow keys. Here is an example of what my file looked like:
{{!< default}}
{{! The comment above "< default" means - insert everything in this file into
the {body} of the default.hbs template, which contains our header/footer. }}
<main class="content" role="main">
<article class="{{post_class}}">
{{! Each post has the blog logo at the top, with a link back to the home page }}
<header class="post-header">
<a class="blog-logo" href="{{@blog.url}}">
{{#if @blog.logo}}
<img src="{{@blog.logo}}" alt="Blog Logo" />
{{else}}
<span class="blog-title">{{@blog.title}}</span>
{{/if}}
</a>
</header>
{{! Everything inside the #post tags pulls data from the post }}
{{#post}}
<span class="post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format='DD MMM YYYY'}}</time> {{tags prefix="on " separator=" | "}}</span>
<h1 class="post-title">{{{title}}}</h1>
<section class="post-content">
{{content}}
before post-content ends
</section>
after post-content
<footer class="post-footer">
<section class="author">
<h4>{{author.name}}</h4>
<p>{{author.bio}}</p>
<ul class="author-meta clearfix">
{{#if author.location}}<li>{{author.location}}</li>{{/if}}
{{#if author.website}}<li><a href="{{author.website}}">{{author.website}}</a></li>{{/if}}
</ul>
before author section ends
</section>
after author section
<section class="share">
<h4>Share this post</h4>
<a class="icon-twitter" href="https://twitter.com/share?text={{encode title}}&url={{url absolute="true"}}"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<span class="hidden">Twitter</span>
</a>
<a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<span class="hidden">Facebook</span>
</a>
<a class="icon-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}"
onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
<span class="hidden">Google+</span>
</a>
before share section ends
</section>
After share section
</footer>
Before post ends
{{/post}}
Before article ends
</article>
Before main ends
</main>
Exit insert mode using Esc or ctrl+c then save and exit using :x. Now let’s restart ghost and check our new theme.
[ghost@amayem casper-disqus]$ forever list
info: Forever processes running
data: uid command script forever pid logfile uptime
data: [0] v7zw /usr/bin/node /var/www/ghost/index.js 914 10545 /home/ghost/.forever/v7zw.log 0:12:24:33.846
[ghost@amayem casper-disqus]$ forever restartall
info: Forever restarted processes:
data: uid command script forever pid logfile uptime
data: [0] v7zw /usr/bin/node /var/www/ghost/index.js 914 10545 /home/ghost/.forever/v7zw.log 0:12:24:37.725
Head over to your ghost admin panel and change the theme to our new theme, but wait we don’t see casper-disqus, we just see two caspers. That must mean the name of the theme isn’t derived from the name of the directory. It’s probably in some config file. Let’s take a look at the directory again.
[ghost@amayem casper-disqus]$ ls
assets default.hbs index.hbs LICENSE package.json page.hbs post.hbs README.md tag.hbs
Let’s vi into package.json, and voila we see the name there. Change it to casper-disqus, save and exit. Restart ghost again as above.
Now when we head over to the ghost admin panel we see our new disqus theme. Choose the theme and save the settings.
Let’s open up a post on the blog and see what we find. Our changes are mostly on the bottom, where comments are most likely to be. The line Before main ends is way out of alignment so we certainly don’t want it there. The before share section ends is also out of alignment so that’s also a no. If we insert the comments where the post-content lines are then the author name and the share section will be after the comments. That’s probably a bad idea. If you are viewing the post on a computer it would seem that the following lines are all in the same place.
before author section ends
after author section After share section
Before post ends Before article ends
But if you resize your window to mobile you will see that the share section is actually in between the author and share sections. Hence we only have three places left to put the comments and those are:
- After share section
- Before post ends
- Before article ends
Putting it in any of those should be equal. Let’s give it a try.
Final Paste
Back in our trusty terminal we open post.bs again using vi. Delete our test lines by going to the line and pressing dd. Paste your disqus code into the place of your choosing. This article from disqus suggests you do it between {{/post}} and </article>. Restart ghost as above and check your blog again. Voila we have comments.
References
- Ghost Doc Themes
- Disqus installation article, which I found through this post by Christoph Voigt.
