Facebook Feed Widget Tutorial

Intro

Elementor Facebook feed widget gives you the ability to embed Facebook feed into your page through Elementor Page Builder.

Facebook is one of the major social media networks with many influential people and organizations use it as a way to communicate, and share their ideas and opinions on a wide variety of topics, from science to humor, from politics to entertainment.

You can find that almost every major organization is using Facebook, so using the Elementor Facebook Feed Widget can be a good way to share these posts from Facebook into your pages seamlessly. You can easily connect your personal Facebook page or your company page to your website. As Elementor Facebook Feed widget automates most of the process for you, allowing you to provide a better insight on any specific topic with minimum effort.

Requirements:

  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Elementor Facebook Feed Widget
Elementor Facebook Feed Widget

Click here to check Premium Facebook Feed Widget demo.

Key Features

Content

  • Access Credentials
  • Layout
  • Advanced Settings
  • Carousel

1. Access Credentials

Here we go with the initial setup, connect the widget to your Facebook account or Facebook page.

  • Log in with Facebook: You have to log in with Facebook to fetch automatically the ID and Access Token Fields.
  • ID: Insert Facebook Page ID.
  • Access Token: Insert Facebook page access token.
Elementor Facebook Feed Widget Access Credentials
Elementor Facebook Feed Widget Access Credentials

2. Layout

In the Layout options, you can set how to display the content of Elementor Facebook Feed Widget on your site.

  • Style: Select the layout style that will be used to display the posts. There are two available styles: List and Grid style.
  • Equal Height: Enable this option to make all posts boxes take the same height.
  • Posts/Row: Select how many posts per row.
  • Direction: This allows you to set the direction for thumbnail, and other posts info about the authors from Left to Right (LTR), or Right to Left (RTL).
  • Content Alignment: Adjust alignment for posts content to be displayed Left, Center, Right, or Justified.
Layout Settings for Facebook Feed Widget for Elementor Page Builder
Layout Settings for Facebook Feed Widget for Elementor Page Builder

3. Advanced Settings

Page Settings, in this tab you can show or hide Facebook Page elements.

  • Posts/Account: Set how many posts will be shown for each page, the default is 5.
  • Post length: Set how many characters of posts text to show (default is 200 characters).
  • Show Post media: Enable/disable displaying media (videos and images).
  • Show Avatar: Show or hide the author’s avatar (thumbnail image).
  • Show Profile Name: Show or hide the author’s name.
  • Show Date: Show or hide the date the shows when the posts were published.
  • Show Feed Content: Show or hide posts content.
  • Show Read More Button: Show or hide the read more button on posts.
  • Show Facebook Icon: Show or hide Facebook icon on the posts.
Page Settings for Facebook Reviews Widget for Elementor
Page Settings for Facebook Reviews Widget for Elementor

4. Carousel

  • Carousel: Enable/disable showing Facebook feed in a carousel. You will be able to control the following option if the Carousel is enabled.
    • Autoplay: Enable/disable the autoplay of posts carousel.
    • Autoplay Speed: Set the autoplay speed.
    • Arrow Position: Adjust the position of carousel arrows.
Elementor Facebook Feed widget Carousel Options
Carousel Options in Elementor Facebook Feed Widget

Style

  • Post Box
  • Content
  • Avatar
  • Facebook Icon
  • Author
  • Date
  • Carousel
  • Container

1. Post Box

  • Background: Select a background color for Post Box.
  • Border Type: Set a border type for Post Box in Facebook Feed Elementor Widget. Choose from the following border types:
    • None (Default)
    • Solid
    • Double
    • Dashed
    • Groove.
  • Width: Set border width.
  • Color: Choose a color for your border.
  • Border Radius: Set Border Radius for Post Box using pixels (PX), percentage(%), or em(EM). Higher border-radius means a more circular border.
  • Box Shadow: Set box shadow for Facebook Feed box container. The available options are:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset.
  • Margin: Creates space around the Post Box, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
  • Padding: Creates space around the Post Box, inside of any defined margins and/or borders. You can set Post Box Padding in Pixel (px), Em (em), or Percentage (%) Note* Padding does not accept negative values.

Same Exact Settings are in Both Normal and Hover in Post Box.

Elementor Facebook Feed Widget Post Style
Elementor Facebook Feed Widget Post Style

2. Content

  • Typography: Set the font style for Facebook Feed content.
    • Font Family: Select a font family.
    • Size: Set font size.
    • Weight: Select font-weight.
    • Transform: Select the font transform.
      • Uppercase
      • Lowercase
      • Capitalize
      • Normal
    • Style: Select font style by choosing from:
      • Normal
      • Italic
      • Oblique
    • Decoration:
      • Underline
      • Overline
      • Line Through
      • None
    • Line-Height: Set font line-height.
    • Letter-Spacing: Set font letter-spacing.
  • Text Color: Set color for the content of the posts in Elementor Facebook Feed Widget.
  • Links Color: Set color for the links inside posts in Elementor Facebook Feed Widget.
  • Links Hover Color: Set color when hovering on links inside posts in Elementor Facebook Feed Widget.
  • Margin
Read More Link
  • Color: Set a color for the Read More link.
  • Hover Color: Set a hover color for the Read More link.
  • Typography
  • Margin
  • Padding
Facebook Feed Widget for Elementor, Content Styling Options
Facebook Feed Widget for Elementor, Content Styling Options

3. Avatar

  • Size: Adjust the Avatar size of Facebook thumbnails.
  • Border Type
    • Width
    • Color
  • Border Radius
  • Margin
Avatar Styling Settings in Elementor Facebook Feed Widget
Avatar Styling Settings in Elementor Facebook Feed Widget

4. Facebook Icon

  • Color
  • Size
  • Margin
Facebook  Icon Styling Options Included in Facebook Feed Widget for Elementor
Facebook Icon Styling Options Included in Facebook Feed Widget for Elementor

5. Author

  • Color
  • Hover Color
  • Typography
  • Margin
Author Settings in Facebook Feed Widget for Elementor
Author Settings in Facebook Feed Widget for Elementor

6. Date

  • Color
  • Typography
  • Margin
Facebook Feed Widget, Date Styling Settings
Facebook Feed Widget, Date Styling Settings

7. Carousel

  • Arrow Color: Set the colors for the carousel arrows.
  • Size: Set the size for the carousel arrows.
  • Background Color: Set a background color for the carousel arrows.
  • Border: Set a border for the carousel arrows.
  • Padding: Set padding for the carousel arrows.
Elementor Facebook Widget Carousel Style
Elementor Facebook Widget Carousel Style

8. Container

  • Background: Set a background color for the container.
  • Border Type
  • Border Radius
  • Box Shadow: Set box shadow for Facebook Feed box container. The available options are:
    • Color
    • Horizontal
    • Vertical
    • Blur
    • Spread
    • Position
      • Outline
      • Inset.
  • Margin
  • Padding
The Available Styling Options for Container Box in Premium Facebook Feed for Elementor
The Available Styling Options for Container Box in Premium Facebook Feed for Elementor

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 25+ Elementor Widgets Totally Free of charge.

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.