Facebook Feed

The Responsive Addons for Elementor (RAE) Facebook Feed widget allows you to display your Facebook page posts in a credible manner and thus improve your website.

Getting Access Token: #

1) Get Page ID:

• Copy your Facebook page URL.

• Go to https://findidfb.com/
• Paste the link in the input box and click “Find numeric ID”.

• Extracted ID is your “Page ID”.

2) Get Page Access Token

• Go to https://developers.facebook.com/ and click on “My Apps”.

• Once redirected, click on “Create App” and scroll down to select “None” and hit “Continue”.
• Next, enter your project name and click “Create App”. A prompt to enter your Facebook password will appear. Submitting this will create your app.

• Hover over “Tools” and click on “Graph API Explorer”.

• Under “Get Token”, select “Get Page Access Token”.

• Click “Continue”, select your page and click “Next”

• Check both boxes if they are not already checked and click “Done”.

• Once done with these steps, your page will be successfully linked to your facebook account.
• The final step is to add certain permissions mentioned below if they are not already added.
  • pages_manage_cta
  • pages_manage_engagement
  • pages_manage_instant_articles
  • pages_manage_metadata
  • pages_manage_posts
  • pages_read_user_content

• You now have your page access token!

Widget Settings #

Content #

Facebook Account Settings: #

1. 1.Page ID: Enter your Facebook Page ID.
2. 2.Access Token: Enter your Facebook Page Access Token.
   1. 1.Note: Both “Page ID” & “Access Token” are needed to retrieve your facebook feed.
3. 3.Data Cache Time: Set time in minutes for the fetched data to be cached thus reducing load times.

Feed Settings: #

1. 1.Sort by: Allows you to sort the fetched posts in oldest or newest order as per the post date.
2. 2.Max Visible Items: Default number of posts to be displayed on page load or when fetching more posts after clicking “Load More”.

General Settings: #

1. 1.Layout Settings:
   1. 1.Layout: Change post display layout as a card or overlay.
   2. 2.Overlay Image: Choose a default image to be displayed in case the post does not have an image. A preset image will be used if no image is provided.
   3. 3.Columns: Default number of columns to display the posts in. Columns will be automatically adjusted as per available screen width.
2. 2.Content Settings:
   1. 1.Display Message: Whether or not to display the post body message.
   2. 2.Max Message Length: Control the number of words displayed in the message after which an ellipsis (…) is added.
   3. 3.Display Likes: Whether to show the like counter.
   4. 4.Display Comments: Whether to show the comment counter.
   5. 5.Display Date: Whether to show the post date.
   6. 6.Open Link In New Window: Whether clicking the post should open the link in a new window or the same window.
3. 3.Preview Content Settings:
   1. 1.Show Preview Content: Whether or not to display media and video related information.
   2. 2.Show Preview Thumbnail: Whether or not to display media on posts.Note: For the “Overlay” layout, if this setting is checked then the image from the post will be displayed. If no image is available then the image added by the user is selected. In case the user has not uploaded an image, the default fallback image is used. If this setting is unchecked then the user uploaded image will be used for all posts. In case the user has not uploaded an image, the default fall back image is used.
   3. 3.Show Preview Host Name: Whether or not to display video host info.
   4. 4.Show Preview Title: Whether or not to display video title info.
   5. 5.Show Preview Description: Whether or not to display video description info.
4. 4.Load More Button:
   1. 1.Show Load More: Whether or not display the “Load More” button.
   2. 2.Label: Enter button text to be displayed.

Style: #

1. 1.Post Container:
2. 2.Space Between Posts: Set white space between posts.
3. 3.Border Type: Select border type to display.
4. 4.Width: Increase/Decrease border width.
5. 5.Color: Change the border color.
6. 6.Border Radius: Adjust the border radius of the post containers to make it appear as square or have rounded corners.
7. 7.Background Type: Select “Classic” to change the color or add an image background. Select “Gradient” to apply a “Linear” or “Radial” gradient background with two colors.
8. 8.Shadow: Apply a box shadow effect to the container.

Following styles will apply to “Card” layout only.

Card Header: #

1. 1.Container:
   1. 1.Background Type: Select “Classic” to change the color or add an image background. Select “Gradient” to apply a “Linear” or “Radial” gradient background with two colors.
   2. 2.Padding: Increase the size of the header by changing this property.
   3. 3.Border Radius: Adjust the border radius of the post containers to make it appear as square or have rounded corners.
2. 2.Page Name:
   1. 1.Typography: Set the typography settings for the page name.
   2. 2.Color: Change the text color of the page name.
3. 3.Post Time:
   1. 1.Typography: Set the typography settings for the post time.
   2. 2.Color: Change the text color of the post time.

Card Body: #

1. 1.Container:
   1. 1.Typography: Set the typography settings for the message text.
   2. 2.Color: Change the text color of the message text.
2. 2.Media:
   1. 1.Border Radius: Adjust the border radius of the media images to make it appear as square or have rounded corners.
   2. 2.Padding: Increase the size of the header by changing this property.
3. 3.Video Host:
   1. 1.Typography: Set the typography settings for the video host.
   2. 2.Color: Change the text color of the video host.
4. 4.Video Title:
   1. 1.Typography: Set the typography settings for the video title.
   2. 2.Color: Change the text color of the video title.
5. 5.Video Description:
   1. 1.Typography: Set the typography settings for the video description.
   2. 2.Color: Change the text color of the video description.

Card Footer: #

1. 1.Background Type: Select “Classic” to change the color or add an image background. Select “Gradient” to apply a “Linear” or “Radial” gradient background with two colors.
2. 2.Color: Select text/icon color.
3. 3.Size: Change icon/text font-size.
4. 4.Padding: Increase or decrease footer container size by changing this property.

Following styles will apply to “Overlay” layout only.

Overlay Styles:

1. 1.Background Color: Change background color.
2. 2.Padding: Increase whitespace by changing this property.
3. 3.Border Radius: Adjust the border radius of the overlay images to make it appear as square or have rounded corners.Styles henceforth will be visible only when hovered over the image container.
4. 4.Background Color: Change the background overlay color.
5. 5.Page Name:
   1. 1.Typography: Set the typography settings for the page name.
   2. 2.Color: Change the text color of the page name.
6. 6.Body:
   1. 1.Typography: Set the typography settings for the body message text.
   2. 2.Color: Change the text color of the body message text.
7. 7.Footer:
   1. 1.Color: Select text/icon color.
   2. 2.Size: Change icon/text font-size.

Load More Button: #

1. 1.Padding: Increase button size by changing this property.
2. 2.Margin: Increase whitespace by changing this property.
3. 3.Typography: Set the typography settings for the button text.
4. 4.Border Type: Select border type to display.
5. 5.Width: Increase/Decrease border width.
6. 6.Color: Change the border color.
7. 7.Border Radius: Adjust the border radius of the button to make it appear as square or have rounded corners.
8. 8.Box Shadow: Apply a box shadow effect to the button.
9. 9.Normal State:
   1. 1.Background Color: Change the button background color.
   2. 2.Color: Change the button text color.
10. 10.Hover State:
    1. 1.Background Color: Change the button background color on hover.
    2. 2.Color: Change the button text color on hover.
11. 11.Button Alignment: Align the button left, center, or to the right within its container.