GraphComment + Ghost Integration

How to use Ghost and GraphComment together

Most of website owner doesn’t like Disqus for some reason. There is too much alternative out there (Facebook Comments, Commento, CommentBox etc.) and GraphComment one of them. It’s simple to use (like Discuss and other alternatives) on your Ghost. GraphComment is free to use, but there are two 2 pricing plans. However, i think most of website owner will not be able to reach 1,000,000 data loads.

First of all, you need to create an account on GraphComment. After then, add your Ghost to GraphComment Backoffice.

Copy the Ghost-GraphComment code

First, copy your Ghost-Specific GraphComment code into your clipboard. The code below is just an example, you need to get your own code from GraphComment Backoffice.

<div id="graphcomment"></div>
<script type="text/javascript">

  /* - - - CONFIGURATION VARIABLES - - - */

  // make sure the id is yours
  window.gc_params = {
    graphcomment_id: 'YOUR GRAPHCOMMENT ID',

    // if your website has a fixed header, indicate it's height in pixels
    fixed_header_height: 0,
  };

  /* - - - DON'T EDIT BELOW THIS LINE - - - */

  
  (function() {
    var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
    gc.src = 'https://graphcomment.com/js/integration.js?' + Math.round(Math.random() * 1e8);
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
  })();

</script>

Paste the comment code into post.hbs

Next, in your Ghost theme, locate the template file where you want to insert comments on your site. Usually post.hbs - right after the content. In Casper , Ghost’s default theme, you’ll see a line of code specifically reserved for inserting comments. This is where you’ll want to paste the GraphComment code:


Make sure you remove the comments on line 65 and 69

Find your GraphComment ID

Next you’ll need to visit GraphComment Backoffice, and get your ID from Setup tab.

Insert your ID into the GraphComment code

Lastly, find the line of code in your post.hbs file witch says:

    graphcomment_id: 'YOUR GRAPHCOMMENT ID',

and replace YOUR GRAPHCOMMENT ID with your ID. Then save the file, upload a fresh copy of your theme, and restart Ghost. Comments should now be loading on your site.

And there is more…

With GraphComment, you can add comment counter or Top Widget to your theme. Just visit to Setup tab on GraphComment Backoffice and generate widget codes. All you need is to paste the code where you want it to appear.

Read this guide in Turkish (Bu rehberi Türkçe okuyun)

Summary

English is not my primary language, i just duplicate Disqus tutorial.

4 Likes

Hi,

I really like GraphComment as well. Thank you for the integration tutorial.
Have you been able to sync Ghost members with GraphComment users as well?

Cheers,