Skip to main content

​
Overview

This article covers how to add Facebook comments to blog posts built with the Premier legacy template. If you are using Kajabi Pages or Website Builder, please refer to the updated guide.
Note: To add Facebook comments, you will need to be on a Kajabi Pro account to access the code editor. Learn about the different plans here.

​
Step 1. Get the Facebook Comments code

To add Facebook comments to a blog post, log into your Facebook account and follow this link to configure and generate HTML snippets for the Facebook Comments plugin:
  1. Copy and paste the blog page URL into the Comments Plugin Code Generator URL field.
  2. Enter the number of posts (or comments) to display on the page.
  3. Click GET CODE:
Tip: Keep two tabs open in your browser for your Kajabi Blog and the Facebook Comments Plugin Code Generator to easily switch back and forth during the process of adding Facebook Comments to your page.

​
Step 2. Open the Code Editor in Kajabi

Once the code snippets are generated, head back to Kajabi and enter the Blog Post code editor:
  1. Open the Website tab from the Dashboard.
  2. Select Pages.
  3. Locate the Blog Post page template.
  4. Click … on the far right and choose Modify code:

​
Step 3. Paste the first code snippet into Kajabi

Open the Layouts folder in the code editor:
  1. Click on the theme.liquid file.
  2. Scroll down to the <body> tag (usually around line 70 of a freshly installed template).
  3. Copy the first code snippet from the Comments Plugin Generator.
  4. Paste the code snippet one line below the <body> tag.
  5. Click Save:

​
Step 4. Paste the second code snippet

Open the Templates folder in the code editor:
  1. Click on the blog_post.liquid file.
  2. Locate the {% section "blog_post_body" %} tag (usually around line 5 of a freshly installed template).
  3. Copy the second code snippet from the Comments Plugin Generator.
  4. Paste the second code snippet one line below the {% section "blog_post_body" %}:

​
Step 5. Configure the second code snippet

Finally, to get your Facebook Comments to fully function on all of your blog posts:
  1. Replace the site URL within the quotations in the second code snippet with this exact text: #####{{canonical_url}}
For example, if the second code snippet began like this: <div class="fb-comments" data-href="https://help.kajabi.com/blog/getting-to-know-the-how-tos"data-numposts="3" data-width=""></div> It would be changed to look like this: <div class="fb-comments" data-href="#####{{canonical_url}}" data-numposts="3" data-width=""></div> Click Save and preview your blog posts to see Facebook Comments near the bottom of the page.