If you are building your website with the legacy theme, Premier, learn to add a Facebook comments section to your Blog Posts.
In this article:
- Step 1. Get the Facebook Comments code
- Step 2. Open the Code Editor in Kajabi
- Step 3. Paste the first code snippet into Kajabi
- Step 4. Paste the second code snippet
- Step 5. Configure the second code snippet
Step 1. Get the Facebook Comments code
To add Facebook comments to your Blog Post, log into your Facebook account and follow this link to to configure and generate HTML snippets for the Facebook Comments plugin:
- Copy and paste your landing page URL into the Comments Plugin Code Generator URL field.
- Enter the number of posts (or comments) you want displayed on the page.
- Click GET CODE:
Step 2. Open the Code Editor in Kajabi
Once these codes are generated, head back to the Kajabi admin and enter your Website code editor:
- From the Dashboard, open the Website tab.
- Select Manage Themes.
- Click
…and choose Edit Code:
Step 3. Paste the first code snippet into Kajabi
Open the Layouts folder in the code editor:
- Click on the
theme.liquidfile. - Scroll down to the
<body>tag (usually around line 50 of a freshly installed theme). - Copy the first code snippet from the Comments Plugin Generator.
- Paste the code snippet a line below the
<body>tag: - Click Save:
Step 4. Paste the second code snippet
Open the Templates folder in the code editor:
- Click on the
blog_post.liquidfile. - Locate the
{% section "blog_post_body" %}tag (usually around line 5 of a freshly installed theme). - Copy the second code snippet from the Comments Plugin Generator.
- Paste the second code snippet a line below the
{% section "blog_post_body" %}. - Click Save:
Step 5. Configure the second code snippet
Finally, to get your Facebook Comments to fully function on your Blog Posts:
- Replace your site URL within the quotations in second code snippet with this exact text:
{{canonical_url}}
In this example, the second code snippet would begin 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>
and would be changed to read 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.
