Comment Forum in Self-Hosted Ghost Blog using GraphComment

When I moved to Ghost, I was shocked to see it doesn’t have its own built in comment/forum system like wordpress. I had to stuck with disqus, but its free version is quite ads agnostic which disgraces the visitors visiting my site. So I started looking for some what free comment system with less code not self hosted as I didn’t want to exhaust my small server capacity.

I came across a relatively free for hobbyist bloggers like me called GraphComment. I liked it cause its remote hosted and FREE for a long haul.

The problem is its documentation for ghost is quite less but I came across an article by László L. Lieszkovszky link is given below:

Use GraphComment in your (dynamic) Ghost Blog

Background and ResearchGraphComment is fantastic, but, at least for now, their documentation is pretty scarce and doesn’t help much if you’re looking to use GraphComment in anything but the most standard scenario. For my part, I wanted to get GraphComment working on the very cool Zvikov theme - but …

ZenSoft IT NotesLászló L. Lieszkovszky

This article was much helpful but research material in it caused the article to be confusing. So I am writing simple instructions here.

Requirements

I order to work with these instructions, I am mentioning some requirements as I have tested with those requirements and in that way I can be sure that this process works.

• Self Hosted Ghost installation (not on ghost.io, I used digitalocean droplet instructions here)
• Create an account in GraphComment.
• Create a site in GraphComment and save the graphcomment_id: 'GRAPHCOMMENT_ID', somewhere safe as we will be using it soon.

Install GrpahComment code

Go to Ghost Admin and settings and then Code Injection and in the Site Header enter the following code:

<script type="text/javascript" src="https://graphcomment.com/js/integration.js"></script>
<script type="text/javascript">
    (function() {
        console.log("Hello");
        var postsLoaded = [];
        window.postLoaded = function(slug) {
            if (!postsLoaded.includes(slug)) {
                var target = $('#graphcomment-' + slug);
                if (target.length) {
                    var gc_params = {
                        graphcomment_id: 'GRAPHCOMMENT_ID',
                        url: target.data("url"),
                        page_title: target.data("title"),
                        target: target[0]
                    };
                    graphcomment(gc_params);
                    console.log('GRAPHCOMMENT loaded: #graphcomment-' + slug);
                }
                else
                {
                    console.log('GRAPHCOMMENT target does not exist: #graphcomment-' + slug);
                }
                postsLoaded.push(slug);
            }
        };
	})();
</script>

Just replace GRAPHCOMMENT_ID with the GRAPHCOMMENT ID you stored before.

Add Comment code to Ghost Theme

Download your current theme by going to Settings and then Themes and click on download for active theme.

Unzip the theme downloaded and then open in editor. As I required comments in posts so open post.hbs file in theme and in add following code to where you want to show the comments in post view:

<div id="graphcomment-{{slug}}" data-title="{{title}}" data-url="{{url absolute="true"}}"></div>

Now zip the theme folder and upload the theme again to your blog.

Attach the script to load comments in each post

Finally in each post edit where you want to show the comments and click on settings icon and copy Post URL. Then go down in settings of post Code injection and enter the following code to Post footer.

<script type="text/javascript">
    (function() {
        if (window.postLoaded) {
            window.postLoaded('POST_URL');
        }
    })();
</script>

Just change POST_URL with the Post URL you copied earlier. Now update the post and you will be able to see the comments in that post.

Conclusion

GraphComments is a great freemium without ads good comment/forum platform for Ghost where you have separate admin panel in GraphComments to handle those comments as well. It is not much difficult to add GraphComments to Ghost as well. Let me know if you get some issue in applying GraphComments.