The GraphComment Plugin

With a unique voting, sharing and thread-managing system, GraphComment is a powerful tool for providing comments to your users, with an alternative design philosophy that makes it great for building communities.

The GraphComment Plugin integrates GraphComment into your Publii website, providing users with the ability to add comments, vote up and down other comments, and create threads of popular discussions.

Adding Comment Plugin Support to Your Theme (for older or custom themes)

If you are using a earlier version of Publii themes, or your own custom theme, then before you can use the comments plugins available from our Marketplace, you will need to make a small change to your theme's post.hbs file to enable the comments to function correctly. To do so, follow these steps:

Open your preferred file explorer app, and navigate to the Documents/Publii/sites/YOUR_SITE/input/themes/YOUR_THEME folder.
where 'YOUR_SITE' is your site's name, and 'YOUR_THEME' is the folder for the theme that you are currently using on the site.
Using the code editor of your choice, open the post.hbs file (this can be opened in basic apps such as notepad, if you don't have any special code editor installed).

Near the bottom of the code list, find the section which might look like this:

{{#if @config.post.displayComments}} 
    <div class="post__comments"> 
       <div class="wrapper"> 
          <h2 class="h5">{{ translate 'post.comments' }}</h2> 
       {{> disqus}} 
       </div> 
    </div> 
{{/if}}

And change it to:

{{#if @config.post.displayComments}}
    <div class="post__comments"> 
       <div class="wrapper"> 
          {{{@commentsCustomCode}}}
       </div> 
    </div> 
{{/if}}

Once you have edited the file, save the changes; you will now be able to use the comments plugins without issues.

Activating the Plugin

The plugin can be enabled by clicking the switcher button in the GraphComment Comments box of the Tools & Plugins section of the Publii app. If the switcher changes from grey to blue. then the plugin is enabled. However, you will need to add one piece of information to the plugin's settings before it can function properly; the GraphComment ID. To open the Plugin Options screen, click on the GraphComment box anywhere except on the switcher button; this will open the Plugin options. Only the GraphComment ID is required, but you can find further details on the available options in this section later in this guide.

How to Get a GraphComment ID

The GraphComment Comments Plugin requires a GraphComment ID to work correctly. The ID can be set when creating an account on the GraphComment website. To get it, follow these steps:

Go to the GraphComment and click on the Sign Up button at the top of the screen.
You will be prompted to sign-up for GraphComment using your Google, Facebook or Twitter account; click the one that you wish to use to sign in. Alternatively, there is an option for signing up via email; click on the Email text at the bottom of the Sign-Up box to start this process.
Once signed up, you will need to create a website. The important option here is the Site ID; here you can enter the text for your GraphComment ID, which you can then enter into Publii.
If you have already created your site in GraphComment and need to retrieve the GraphComment ID, you can do so by opening the GraphComment dashboard and clicking on your website's name is the left-sidebar. Then, click on the Setup tab at the top of the screen. You will be taken to the Setup page that contains information on how to add GraphComment to your site.
By default, you should see the Universal Code option selected on the left; if not, click on it now. You will see a box containing the embed code; from this, we only need the value from the graphcommentId variable. It should look something like this:
```
graphcommentId: "SITE_NAME-"
```
Copy the text between the quotation marks; this is your GraphComment ID.
Open Publii and enter the Site ID into the plugin settings and save the changes. The plugin is now ready to go!

Enabling Comments

There's one more thing you'll need to do before GraphComment can display comments on your posts; you'll need to enable the comments section in Publii. Publii themes include a section for the comments, but it is disabled by default to prevent any visual errors occurring when no comments plugins are enabled. You will need to change the Comments option in your theme settings; once enabled, Publii will create a comments area on the page where the plugin can display. To use comments on your site, first navigate to the Theme section of the app by clicking the option in the left-sidebar menu, then navigating down to the Custom Settings → Post Options section of the Theme Settings and enable the Display Comments option.

Alternatively, you may enable comments on individual posts on a case-by-case basis when creating a new post or editing an existing post by clicking on the Settings icon in the top-right of the editing area (represented by a cog) to open the settings, then clicking on the Other Options option to see the full selection of options. At the bottom of this section will be the Display Comments option, which you can enable/disable specifically for that one post.

GraphComments Comments Options

Via the GraphComment plugin's options, you can change the styling and other visual elements of the comments section on your site. The available options are:

Comments Configuration

GraphComment ID - Enter the Site ID you set when creating a website in GraphComment here. The ID must be entered before the plugin can function.

Theme Integration

Header Title - Text entered in this field will be used as the title for the comments box on your site.
Heading Level - Sets the header size/styling that should be used for the header title.
Fallback Message - Text entered in this field will be displayed if the comments box is unable to load due to the user disabling scripts or using a browser that doesn't include support for scripts. By default it advises that JavaScript must be enabled to display comments.
Comments Wrapper - Sets a custom CSS class for the comments wrapper; that is, the outer area surrounding the comments section. Leave this as the default to use the standard styling set in the theme code.
Comments Inner Wrapper - Sets a custom CSS class for the inner wrapper of the comments; the inner area of the comments section. Leave as default to use the theme's built-in comment styling.
Comments Heading -Sets a custom CSS class for the comments heading; for additional styling options on top of or alternatively to the default styling that is applied to the respective H2-H6 text. Leave as default to use the standard theme styling.
For example, for semantic purposes, you want to leave heading H2 but reduce its font size, so you can use one of the available classes in our themes: h1 h2 h3 h4 h5 h6
To change the text alignment, use the following classes: align-left align-right align-center

Advanced Options

Lazy Load - Enabling this option allows the comments section to utilise Lazy Loading. This uses moments when the browser is idle to start pre-loading the comments section as the user scrolls down the page to reduce the delay before comments are displayed.
Cookie Banner Integration - Enabling this option will add an option to the built-in Publii cookie banner for users to consent to cookies from GraphComment.
Cookie Group ID - This option only becomes available when the Cookie Banner Integration option is enabled. Here, you can specify the cookie group that the GraphComment cookies should be added to, e.g. 'comments'. Make sure to add (if it doesn't exist) the group name to the GDPR section of the site settings. You can find instructions on how to do this in the GDPR section of this documentation.