Ghost Blog Theme Configuration File: Elegant Disqus & Google Analytics integration

When you are creating your theme for Ghost Blog system, don't you wish there was a elegant way for adding in a configuration where users can easily edit your theme settings? If so, keep on reading...

In my Donnie Dark theme I made it so that users are being able to just edit one configuration file to make the site to use Google Analytics or Disqus. By default the Google Analytics & Disqus integration are disabled until user inputs their configuration keys. You could also add any other settings you'd like users to be able to switch in the same file. Cool, huh? Let me explain the process.

Creating Configuration File

Let's first start by creating configuration file which contains your Google Analytics and Disqus configuration options.

First create file config.js in your theme/assets/js folder. Then in the file, add this:

// Should you wish to have google analytics enabled on your site, just add your google analytics key here.
var google_analytics_key = '';

// Should you wish to have disqus comment system enabled on your site, just add your disqus shortname here.
var config_disqus_shortname = '';

Simple, isn't it. Now to first add Disqus.

Adding Disqus

Create file disqus.js in your theme/assets/js folder. Now in that file add this:

var disqus_loaded = false;
function load_disqus() {
    if (config_disqus_shortname !== '') {
        disqus_loaded = true;
        var disqus_shortname = config_disqus_shortname;
        // For embedding disqus under a post
        (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);
        })();
    }
}

load_disqus();

Now in your theme/post.hbs file add the div where you want disqus to be added in with this code:

<div id="disqus_thread"></div>

And include your disqus.js script on bottom of your theme/post.hbs file:

<script src="{{asset "js/disqus.js"}}"></script>

That's it for Disqus support!

Optional: Loading Disqus only after you scroll to bottom of the page

This step is optional. With the script above Disqus will be loaded directly when user visits a blog post. Loading comments immediately can be pretty heavy operation. To make your comments to load only after user scrolls to bottom of a blog post, replace load_disqus(); in above script with this:

// Load Disqus only after user has scrolled to bottom of the page
window.onscroll = function(e) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        //hit bottom of page
        if (disqus_loaded==false){ load_disqus() };
    }
};

Wait, what about buttons?

Getting greedy there, aren't you? Yes, you can also make it so that you have a button which can be pressed to load Disqus comments. To achieve that, do not add load_disqus(); method call or the scroll to bottom code above and instead create a button in your post.hbs file, like this:

<button type="button" class="btn btn-default" onclick="load_disqus();">Show Comments</button>

Simple as that!

Adding Google Analytics

  • Start by creating file google_analytics.js in your theme/assets/js folder.
  • Add the code below in your just created google_analytics.js file:
if (your_theme_id_google_analytics_key !== '') {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', your_theme_id_google_analytics_key, 'auto');
    ga('send', 'pageview');
}

Now, on bottom of your theme/default.hbs file, add this:

<script src="{{asset "js/google_analytics.js"}}"></script>

Done!

That's it. Now whenever Disqus or Google Analytics keys are empty in your configuration file, they are not being utilized in your site. Whenever user inputs their keys, they will be loaded.

Where to go from here?

Now that your theme has a config.js file, feel free to add in more configuration options. Here is a example setting that I added in my configuration options:

var donnie-dark-static-page-publish-dates = false;

And in my page.hbs file I added this:

if (!donnie_dark_static_page_publish_dates) document.getElementById("donnie_dark_published_time").style.display = "none";