Build comment system without the need for custom theme

Themes
1

Hi , I am new to Ghost. Just want to ask how is it possible to build a comment system but without the need of using custom theme. I want to stay with the starter pro plan and I cannot afford to go to the creater plan.

I read some comment system but need to modify the theme , hence will be regarded as custom theme. Still scratching my head

2

Adding comments necessitates a custom integration and changes to the themes post template.

3

thanks @mjw, so this means that there is no way to incorporate comment system without upgrading to Creator level, which is a big jump for me. Now I need to look into this under a different light

4

I self-host, but it looks like the entry Ghost Pro plan excludes custom integrations. Maybe a Ghost Pro user can confirm this?

5

It’s possible to use Disqus comments without customizing your theme.

You’d load their installation code into an HTML card in the post (or save it in a snippet).

The downside here is twofold:

  • You have to add comments manually to every post (a burden somewhat alleviated by reusable snippets)
  • It doesn’t align with Disqus’ recommended configuration. The issue is that you can’t set an identifier other than the URL from the editor, so you risk ending up with split/missing threads if you change the URL. Being aware of this potential problem, it may be worth trying out, since it’s free and and you could remove the HTML cards if you don’t like it.
1 Like
6

thanks @TheRoyalFig again, I might give this a try and see how this goes

7

I found a way to add comments via code injection. It is not ideal but kind of working

I am not a coder so I have no idea what I am doing. Just followed the instruction here.

However, I cannot get the comments to appear before the footer (it appears at the bottom of the page so it is hard to notice)

See this as an example

8

Did you follow the steps outlined under ** How to custom configure comment dialog?: The hard way**?

Apparently, this does what you want and works on Casper.

9

@mjw

yes, I followed exactly (just copied to code, I do not know what I am actually doing), but it did not work, there may be something that I missed

10

That tutorial is, unfortunately, out of date, so its code isn’t going to work without modifications. The other issue is that the utterances commenting system requires you to have a Github repo with the app installed. I didn’t see that included in your code.

If you do that step, then you could use the following code in Code Injection > Site Footer:

<script>
const isAPost = document.querySelector('.post') // Select the content container

if (isAPost) { // If were on a post, load the comments
        const scriptTag = document.createElement('script'); // Create a script tag and add attributes
        scriptTag.setAttribute('src', "https://utteranc.es/client.js");
        scriptTag.setAttribute('repo', "THIS IS WHERE YOU NEED TO ADD YOUR GITHUB REPO");
        scriptTag.setAttribute("issue-term", "url");
        scriptTag.setAttribute('theme', "github-dark");
        scriptTag.setAttribute('crossorigin', "anonymous");
        isAPost.appendChild(scriptTag); // Add the script to the page
}
</script>
11

good point, should have included the codes that I used. The GitHub repo is fuzzygelblog/comments. I tried to switch the order of the two code blocks but makes no difference.

codes
codes1920×1264 110 KB

codes 1
codes 11358×690 156 KB

codes 2
codes 2776×322 55.9 KB

12

Great. Got it working then:

image
image848×696 58.9 KB

Remove your existing script tags and add the one I posted above.

13

thanks again and sorry for being so thick, I am still struggle to make it work,

do I replace the line

scriptTag.setAttribute(‘repo’, “THIS IS WHERE YOU NEED TO ADD YOUR GITHUB REPO”);

with

scriptTag.setAttribute(‘repo’, fuggygelblog/comments);

14

I fixed it by trial and error :sweat_smile:

I changed the line to the followings, with double inverted quoted

scriptTag.setAttribute(‘repo’, fuggygelblog/comments);

thanks again @TheRoyalFig and others, you’ve made my day.

2 Likes