Adding comments to your Ghost blog

UPDATE (May 26, 2014): Facebook recently made some changes to their social API that completely broke the Facebook commenting support on my site when I tried to update my code. I wasted a couple of hours on a weekend afternoon trying to get it to work, to no avail. I don't really like Facebook anyway, so...I just removed it. Warning...the samples below for integrating Facebook commenting likely will not work anymore. Sorry for any inconvenience.


Having recently setup Ghost to start blogging with, I wanted to be able to get feedback on posts. Ghost doesn't have comment functionality built-in, so you need to integrate an external provider into your theme. This is how I did it.

I've used Disqus before and was happy with it, but I also wanted to use Facebook comments as an alternate option for anyone who might prefer that. So I decided to wire 'em both up.

I decided to setup two separate tabs in the comment section, one for Disqus comments and one for Facebook comments, with Disqus the one shown by default.

I've created my own custom them for Ghost (I call it Cypress) that is a fork of the default Casper theme that is installed with Ghost by default. I added comments by editing the post.hbs theme template with the following markup:

...
<footer class="post-footer">  
...
</footer>  
<!-- This is my custom comments block, inserted *after* the `.post-footer` thats already in the template -->  
<section class="post-comments">  
    <h4>Discussion</h4>
    <ul class="discussion-tabs">
        <li data-show="disqus" class="active">Comment with Disqus</li>
        <li data-show="facebook">Comment with Facebook</li>
    </ul>
    <div id="disqus-comments-container" class="comments-container">
        <div id="disqus_thread"></div>
        <script>
            var disqus_shortname = "<your-disqus-short-name-here>";
            var disqus_identifier = "{{uuid}}";

            (function () {
                var dsq = document.createElement("script")
                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>
    </div>
    <div id="facebook-comments-container" class="comments-container hidden">
        <div id="fb-root"></div>
        <script>
            (function(d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) {
                    return;
                }
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=<your-facebook-app-id-here>";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>
            <div
                class="fb-comments"
                data-href="{{@blog.url}}/{{slug}}"
                data-colorscheme="light"
                data-numposts="10">
            </div>
    </div>
</section>  

That markup is styled with the following CSS:

.post-comments {
    margin: 4rem 0;
    padding: 4rem 0 0 0;
    border-top: #ebf2f6 10px solid;
    position: relative;
    zoom: 1;
}

.post-comments: before, .post-comments: after {
    content:"";
    display: table
}

.post-comments: after {
    clear: both
}

.post-comments.discussion-tabs {
    border-bottom: #ebf2f6 1px solid;
    list-style-type: none;
    margin: 0;
    padding: 0;
    zoom: 1;
}

.post-comments.discussion-tabs: before, .post-comments.discussion-tabs: after {
    content:"";
    display: table
}

.post-comments.discussion-tabs: after {
    clear: both
}

.post-comments.discussion-tabs li {
    background: #f7fafb;
    border-left: #ebf2f6 1px solid;
    border-right: #ebf2f6 1px solid;
    border-top: #ebf2f6 1px solid;
    cursor: pointer;
    display: inline-block;
    font-size: .75em;
    float: left;
    margin: 0.5em 0 0;
    padding: .1em 1em;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

.post-comments.discussion-tabs li: hover {
    background: #eff5f7
}

.post-comments.discussion-tabs li.active {
    background: #3a4145;
    color:# f7fafb
}

.post-comments.comments-container {
    min-height: 350px;
    padding: 2rem 0 4rem 0;
}

.post-comments.fb-comments, .post-comments.fb-comments * {
    /* Make facebook comments widget fluid */
    width: 100 % !important;
}

Which was generated from the following Stylus, if you prefer that (as I do):

.post-comments {
    margin: 4rem 0;
    padding: 4rem 0 0 0;
    border-top: #EBF2F6 10px solid;
    position: relative;
    clearfix();

    .discussion-tabs {
        border-bottom: #EBF2F6 1px solid;
        list-style-type: none;
        margin: 0;
        padding: 0;
        clearfix();

        li {
            background: #F7FAFB;
            border-left: #EBF2F6 1px solid;
            border-right: #EBF2F6 1px solid;
            border-top: #EBF2F6 1px solid;
            cursor: pointer;
            display: inline-block;
            font-size: 0.75em;
            float: left;
            margin: 0 0.5em 0 0;
            padding: 0.1em 1em;

            border-radius: 10px 10px 0 0;

            &:hover {
                background: darken(#F7FAFB, 2.5%);
            }

            &.active {
                background: #3A4145;
                color: #F7FAFB;
            }
        }
    }

    .comments-container {
        min-height: 350px;
        padding: 2rem 0 4rem 0;
    }

    /*! Make facebook comments widget fluid */
    .fb-comments, .fb-comments * { width: 100% !important; }
}

So far I'm pleased with how it came out. Please let me know if you run into any problems with it.