Fouita Widgets

Welcome to the “Facebook Feed” documentation. Looking to integrate Facebook Feed into your website? Our widget 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 widget.

Step 1 : Open The Editor

Step2 : Connect To Your Facebook Account

Step 3 : Adjust The Layout

Step 4 : Configure settings

Step 5 : Personalize cards

Step 6 : Customize the popup

Step 7 : Choose Colors

Step 8 : Preview

Step 1 : Open The Editor

1. Go to Facebook Feed template.

2. Click on "Edit" after choosing your template.

Step 2: connect to your Facebook account

Begin by connecting to your facebook account:

1. First, click on the "Continue with Facebook" button.

2. After logging in, you can either proceed directly with your current account or edit access first.

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.

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.

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.

Step 4: Configure settings

In the settings panel, easily adjust the spacing around the widget 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.

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.

2. In the "Props" section:

In the "Props" section: If you've chosen the left, right, top or bottom image position in the preview section, specify Image height, border style, shadow, roundness, choose to display a short, full, or scroll description, and write the label for the "more" button.

If you choose the cover image , you can do the same as the top or bottom image. Additionally, you can opt to show an overlay over the card and adjust its opacity.

3. In this section, you can opt to show or hide each card's content.

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.

2. In the "Props" section, you can set the popup's roundness.

3. Additionally, you can choose whether to show or hide each popup's content as required.

Step 7: Choose Colors

Within this panel, you can select colors that match your website's design.

Step 8 : Preview

Lastly, you can click on “Preview” to see how your facebook feed widget looks on both desktop and mobile devices. After this, you can proceed to the next step.

widgets