> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://help.kajabi.com/feedback

```json
{
  "path": "/articles/website/blog/how-to-add-facebook-comments-to-your-blog-posts-with-the-legacy-template",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Add Facebook comments with the legacy template

> Enable Facebook comments on blog posts built with the Premier legacy template.

## 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](../../website/pages/how-to-add-facebook-comments-to-your-page).

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/9bs2slimch" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Note>
  **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](https://kajabi.com/pricing/).
</Note>

## Step 1. Get the Facebook Comments code

To add Facebook comments to a blog post, log into your Facebook account and follow [this link](https://developers.facebook.com/docs/plugins/comments) 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**:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/5fz3kihhv8" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Tip>
  **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.
</Tip>

## 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**:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/gy6ucpx20i" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

## 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**:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/kfqmet65oi" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

## 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" %}`:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/zbnk4xzb7k" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

## 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}}`

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/uc9ps8ig74" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

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.
