Facebook Feed
Facebook Feed
Welcome to the “Facebook Feed” documentation.
Looking to integrate Facebook Feed into your website? Our block allows you to enhance user engagement, and showcase dynamic, real-time content directly on your website.
In this guide, we'll show you how to use the editor to customize your Facebook Feed block.
Step 1 : Open The Editor
1. Go to Facebook Feed template.
2. Click on "Edit" after choosing your template.
class="flex justify-center items-start h-auto w-auto" alt="">Step 2: connect to your Facebook account
Begin by connecting to your facebook account:
1. First, click on the "Continue with Facebook" button.
class="flex justify-center items-start h-auto w-96" alt="">2. After logging in, you can either proceed directly with your current account or edit access first.
class="flex justify-center items-start h-auto w-128" alt="">3. Here for example, we have two pages. Simply select the pages whose content you wish to load.
4. Additionally, you have the option to log out or deauthorize as needed.
class="flex justify-center items-start h-auto w-96" alt="">Step 3 : Adjust The Layout
1. In this panel, you have the option to choose how to display your layout, either as a carousel, grids, masonry or list.
class="flex justify-center items-start h-auto w-96" alt="">
2. For each layout type, you can customize specific options. For example, you can adjust the gap between cards, and specify the number of columns and rows.
For the carousel, you can customize the autoplay delay, set the maximum number of items to appear, decide whether to enable the loop, and choose whether to display dots and controls.
In other cases, you can define the button label, adjust its roundness, and customize its border.
class="flex justify-center items-start h-auto w-auto" alt="">Step 4: Configure settings
In the settings panel, easily adjust the spacing around the block by customizing the margin and padding. You also have the option to open links in a new tab, toggle the content display between right-to-left or reverse as needed.
class="flex justify-center items-start h-auto w-96" alt="">Step 5: Personalize cards
In the card panel, you have control over various aspects:
1. Select the image position and height. And select the action that occurs when the post is clicked.
class="flex justify-center items-start h-auto w-96" alt="">2. In the "Props" section:
class="flex justify-center items-start h-auto w-auto" alt="">
class="flex justify-center items-start h-auto w-auto" alt="">3. In this section, you can opt to show or hide each card's content.
class="flex justify-center items-start h-auto w-80" alt="">Step 6: customize the popup
1. When configuring the popup, choose its display mode, either default or mobile. You can also decide whether to show or hide the media link.
class="flex justify-center items-start h-auto w-96" alt="">2. In the "Props" section, you can set the popup's roundness.
class="flex justify-center items-start h-auto w-80" alt="">3. Additionally, you can choose whether to show or hide each popup's content as required.
class="flex justify-center items-start h-auto w-80" alt="">Step 7: Choose Colors
Within this panel, you can select colors that match your website's design.
class="flex justify-center items-start h-auto w-80" alt="">Step 8 : Preview
Lastly, you can click on “Preview” to see how your facebook feed block looks on both desktop and mobile devices. After this, you can proceed to the next step.
class="flex justify-center items-start h-auto w-auto " alt="">