The Facebook Comments block allows visitors to engage with your page content using their Facebook accounts, bringing a familiar commenting experience directly to your SeedProd pages.
This block is ideal for blog posts, landing pages, or any content where you want to encourage discussion without managing a separate comment system. Visitors can comment, reply, and interact using their existing Facebook identity.
Adding the Facebook Comments Block to Your Pages
Follow these steps to add a Facebook Comments block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks, drag and drop the Facebook Comments block into the desired section of your page.
Step 2: Configure Content Settings
Once added, click on the Facebook Comments block to open its settings. In the Content tab, configure how the comments widget behaves.
Facebook Setting:
- Facebook App ID: Displays your connected Facebook App. If no App ID is configured, you’ll see a prompt to set it in Page Settings. Once connected, a Change App option appears to switch to a different Facebook App.
- Number of Comments: Set the minimum number of comments to display, from 5 to 20.
- Order By: Choose how comments are sorted — Social (ranked by engagement), Reverse Time (oldest first), or Time (newest first).
- Color Scheme: Choose between a Light or Dark color scheme for the comments widget.
- Lazy Loading: Toggle on to defer loading the Facebook Comments widget until it scrolls into the visitor’s view, improving page load performance.
- Target URL: Set the URL the comments are associated with. Choose Current Page to use the page’s own URL, or Custom to specify a different URL. When set to Custom, an additional Link field appears to enter the custom URL.
- URL Format (visible when Target URL is set to Current Page): Choose between Plain Permalink or Pretty Permalink for how the page URL is passed to Facebook.
- Alignment: Set the horizontal alignment of the comments widget — Left, Center, or Right.
Step 3: Customize the Design
In the Advanced tab, you can adjust the spacing and visibility of your Facebook Comments block.
Spacing:
- Margin: Control the outer spacing around your Facebook Comments block (Top, Right, Bottom, Left).
- Padding: Adjust the inner spacing within your Facebook Comments block (Top, Right, Bottom, Left). Supports per-device values for desktop, tablet, and mobile.
Attributes:
- CSS ID: Displays the auto-generated unique identifier for your Facebook Comments block, created automatically by SeedProd for custom styling or JavaScript targeting.
- Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS.
- Custom Attributes: Add any HTML attributes to the block wrapper element. Enter each attribute on a new line using the format: attribute-name|value.
Device Visibility:
- Hide on Desktop: Hide the Facebook Comments block on desktop screens.
- Hide on Tablet: Hide the Facebook Comments block on tablet devices.
- Hide on Mobile: Hide the Facebook Comments block on mobile devices.
Animation Effects:
- Entrance Animation: Choose an animation effect that plays when the Facebook Comments block scrolls into view, such as Bounce, Fade In, Zoom In, Rotate In, and many more.
Step 4: Save Your Changes
Once you have finished configuring the Facebook Comments block and customizing its appearance, make sure to save your work.
You’ve successfully added a Facebook Comments block to your page! This block makes it easy to encourage visitor engagement using a commenting system your audience already knows and trusts. Make sure your Facebook App ID is configured correctly so the widget loads and saves comments as expected.