Need help installing GraphComment please

Developer help Installation
1

Hi there,

I’ve been following the following instructions closely:

but I can’t seem to install GraphComment. I’m using the Dawn theme and I have it open in Atom. I’m editing the file called comment.hbs (where it says “If you want to embed comments, this is a good place to do it!”.

However, when I save the edited file and upload it to my site, nothing happens, no comments appear.

Here is the code … does anyone see what I’m doing wrong? Thanks so much!

{{#if post.access}}
<div class="comment container small">
  <div id="graphcomment"></div>
  <script type="text/javascript">

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

    var __semio__params = {
      graphcommentId: "Rabbit-Holes", // make sure the id is yours

      behaviour: {
        // HIGHLY RECOMMENDED
        //  uid: "...", // uniq identifer for the comments thread on your page (ex: your page id)
      },

      // configure your variables here

    }

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

    function __semio__onload() {
      __semio__gc_graphlogin(__semio__params)
    }


    (function() {
      var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
      gc.onload = __semio__onload; gc.defer = true; gc.src = 'https://devintegration.graphcomment.com/gc_graphlogin.js?' + Date.now();
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
    })();
    

  </script>
</div>
{{/if}}

If you’re looking for some help, it’s important to provide as much context as possible so that people are able to assist you. Try to always mention:

  • What’s your URL? This is the easiest way for others to debug your issue
    https://rabbitholes.ghost.io
  • What version of Ghost are you using?
    Ghost Pro
  • What configuration?
  • What browser?
    Chrome updated
  • What errors or information do you see in the console?
  • What steps could someone else take to reproduce the issue you’re having?
2

Hi,

I was able to implement it fairly easily, however since their last update. The new code they provide does not work on my site. I rolled back to the old one while I troubleshoot the issue.

You only pasted an empty if. Do you have more?

3

(The pasted code was missing a markdown code block so wasn’t displayed - I’ve just edited so the post is clearer.)

1 Like
4

@juliebush, if you try with this code, does it work?

<div id="graphcomment"></div>
<script type="text/javascript">
  /* - - - CONFIGURATION VARIABLES - - - */
  // make sure the id is yours
  window.gc_params = {
    graphcomment_id: 'Your-ID',
    overlay: {"min-width":500,"max-width":750,"button":{"background":"#4F6C83","color":"#d6d6d6"},"bubble":false},
  };

  /* - - - 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>
5

It now works for me with the newest code. The issue was with the AMP option.
Here is my code. I have removed my ID.

<div id="graphcomment"></div>
<script type="text/javascript">
  /* - - - CONFIGURATION VARIABLES - - - */
  var __semio__params = {
    graphcommentId: "MySiteID", // make sure the id is yours
    behaviour: {
      // HIGHLY RECOMMENDED
      // uid: "...", // uniq identifer for the comments thread on your page (ex: your page id)
       uid: "ghost-{{comment_id}}",
       url: "{{url absolute="true"}}",
      telemetricThroughCmp: true
    },
    // configure your variables here
    "sidePanel": {
      "width": 480,
      "button": {
        "background": "#FF0000",
        "color": "#000000",
        "label": "Click to Comment"
      },
      "bubble": true,
      "visible": false,
      "bubble": {
        "background": "#FF0000",
        "color": "#000000"
      }
    }
  }
  /* - - - DON'T EDIT BELOW THIS LINE - - - */
  function __semio__onload() {
    __semio__gc_sidePanel_graphlogin(__semio__params)
  }
  (function() {
    var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
    gc.onload = __semio__onload; gc.defer = true; gc.src = 'https://integration.graphcomment.com/gc_sidePanel_graphlogin.js?' + Date.now();
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
  })();
</script>