The Facebook Comments Plugin

Facebook continues to be the most popular social media website, with over 2.8 billion monthly active users. This makes it a easy-to-use choice when implementing comments onto your site; users can use their existing Facebook accounts to add comments to your posts and share them with friends, helping to expand your online audience.

The Facebook Comments plugin for Publii makes it easy to activate Facebook comments on your page, and grants multiple options for customising the look and layout of the section to meet your needs.

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 Eexplorer 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.

Enabling Comments

By default, comments are disabled in Publii, even if one of the comments plugins has been enabled. 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 scroll 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.

Activating the Plugin

The plugin can be enabled by clicking the switcher button in the Facebook 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, there are some options that you should check and configure before using this plugin to ensure that it meets your needs. To open the options menu, click on the Facebook Comments box again, anywhere except on the switcher button. This will take you to the Facebook Comments option page.

Facebook Comments Options

The options available here control many visual aspects of how the comments section will appear on your site, as well as some features that will enhance the user experience and security.

The options available for this plugin are:

Comments Configuration

Number of Comments - Defines the number of comments that should be initially displayed when the comments section is first loaded. If there are more comments than this, the user will be able to click to view more at their discretion.
Language - Sets the language that the Facebook-generated text in the comments section should use. By default this is set to British English ("en_GB"), but you can set others using their relevant language code. More information on the language codes supported by Facebook may be found in in this article from Facebook.
Width - Sets the width of the comments section relative to the total width of the page e.g. a setting of "50%" means that the comment section will always stretch to cover half of the the whole width of the page, regardless of screen size. Alternatively, you may define a "pixel count" for the width as a whole number; please note that this setting will only be used when viewing on a large (i.e. desktop) screen; mobile phone or tablet screens will automatically scale to 100% of the width if a pixel count is defined in this field instead of a percentage, to prevent visual errors.
Color Scheme - Sets whether the comment section should utilise a light or dark color palette for its styling.
Comments Order - Sets the order that comments should be displayed; from Newest to Oldest, or Oldest to Newest.

Theme Integration

Header Title - Sets the title that should be displayed at the top of the comments section.
Heading Level - Sets the header size/styling that should be used by the title text defined in the preceding option.
Fallback Message Defines a message that can be displayed if a user has disable scripts or is using a browser that doesn't support scripts, preventing the comments from loading. By default this will advise users to enable JavaScript to view comments.
Comments Wrapper - Sets a custom CSS class for the Comments Wrapper box, which surrounds the comments section. This is used for adding personalised styling to the section. Leave as the default to use the standard theme style.
Comments Inner Wrapper - As above, but this option defines a custom CSS class for the inner wrapper of the comments section; that is, the inner area of the comments box. Leave as default to use the standard theme styling.
Comments Heading - Sets a custom CSS class for the heading text of the comments section, 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 use Lazy Loading to start pre-loading the comments section as the user scrolls down the page, reducing the wait time before the comments are displayed.
Nonce - The nonce attribute is used to provide additional security to the comments section via a cryptographic nonce (Number Used Once). Leave this as the default if you are not familiar with this attribute.

Cookie Banner Integration

Enabling this option adds Facebook cookies that are required for the comments section to the list of cookies that users may consent to via the built-in Publii Cookie Banner. Once this option is enabled, two more options will become available:

Cookie Group ID - Enter a name here for the cookie group that the Facebook cookies should be included in; e.g. ’comments’. Make sure to add (if it doesn't exist) this 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.
Fallback Message - Sets a message that should be displayed if the user does not consent to using Facebook scripts. By default, this will advise users that they need to change their cookie preferences in the banner before comments can be displayed.