How to Add a Facebook Feed on Your Website

Displaying a Facebook feed on your website is a great way to keep visitors updated with your latest posts, announcements, photos, and events. Instead of manually adding new content to your website, you can automatically showcase updates from your Facebook Page to keep your site fresh and engaging.

With the Facebook Feed widget, it’s easy to embed a live Facebook feed on your website without any coding experience. Jotform lets you customize the layout, adjust the display settings, and seamlessly match the widget to your website’s overall design.

Creating and Getting Your Facebook Feed Widget Embed Code 

To embed a Facebook Feed widget on your website, you’ll first need to configure the Facebook Feed Widget and get its embed code. Here’s how to get started: 

1. On your Workspace page, click on Create on the top-left side of the page.

2. Then, in the window that opens up, select Website Widget from the assets.

3. Next, in the Search bar at the top of the Choose Website Widget page, search for the Facebook Feed.
4. Now, in the search results, click on Use Widget.

5. Once the widget opens, the Widget Properties menu will automatically appear on the right side of the Website Widgets. Under the General tab, set up these things under Connected Sources:
   • Source Type — Facebook is selected by default.
   • Source — Enter the URL of the Facebook Page you want to display or click on Connect to Facebook to select one of the Facebook Pages you manage. 
6. After everything’s set, click on Add Page. 

7. Once the page is connected, scroll down and set up these display options:
   • Header — Choose whether to display the header above the feed.
   • Widget Title — Enter the title displayed at the top of the feed.
   • Widget Description — Add a short description below the widget title.
   • Source Tabs — Choose whether to let visitors switch between connected Facebook Pages.
   • Author Name — Show or hide the page name on each post.
   • Author Picture — Show or hide the page profile picture.
   • Publication Date — Choose whether to display the publication date for each post.
   • Post Text — Show or hide the caption or description for each post.
   • Source Label — Choose whether to display the Facebook label on each post.

8. Next, under the Style tab, personalize the appearance of your Facebook feed with these options:
   • Color Scheme — Switch between Light and Dark themes.
   • Title Alignment — Align the widget title and description to the left, center, or right.
   • Jotform Branding — Choose whether to display the Powered by Jotform badge below the feed.
   • Post Style — Select how posts are displayed, such as Classic, Compact, or Tile.
   • Action on Post Click — Choose whether clicking a post opens a popup, the original post, or does nothing.
   • Popup Style — Select how post content is displayed in the popup.
   • Image Ratio — Choose how post images are cropped.
   • Actions Bar — Choose whether to display the Like, Comment, and Share actions.

9. Then, scroll down to continue personalizing these options:
   • Source Style — Display the Facebook source as an icon or label.
   • External Links — Allow visitors to open the original Facebook post.
   • Card Accent Colors — Choose whether to use Facebook colors, a single custom color, or no accent color.
   • Background Color — Customize the background color of the widget.
   • Feed Surface Color — Set the background color behind the post cards.
   • Post Background — Customize the background color of individual post cards.
   • Post Text Color — Choose the color of the post text.
   • Post Link Color — Set the color used for links within posts.

10. After that, scroll down to customize these remaining appearance settings:
    • Popup Background — Customize the background color of the popup window.
    • Popup Backdrop Color — Choose the color displayed behind the popup.
    • Popup Text Color — Set the text color used inside the popup.
    • Text Size — Adjust the size of the post text.
    • Corner Radius — Choose how rounded the corners of post cards and pop-ups appear.
    • Card Shadow — Add or remove the shadow around each post card.

11. Next, under the Layout tab, adjust these layout settings:
    • Layout — Choose how the widget content is displayed.
    • Width — Adjust the width of the widget.
    • Columns — Set the number of columns displayed in the widget.
    • Rows — Specify the number of rows displayed at a time.
    • Item Spacing — Adjust the spacing between items in the widget.
    • RTL — Enable right-to-left (RTL) layout support for languages such as Arabic and Hebrew.
    • Open Links in New Tab — Choose whether links open in a new browser tab when clicked.
12. Once you’ve finished configuring the widget, in the pink navigation bar on the top of the page, click on Publish.

13. Finally, in the Embed section, click on Copy Code.

14. Or, if your website is built on a supported platform, in the menu on the left side of the page, click on Platforms.
15. Then, search for or select your platform to copy the embed code and view platform-specific embedding instructions, and you’re done.

That’s it! You can now paste the copied embed code into your website or follow the platform-specific instructions to add the widget to your site. The screenshot below shows an example of how the Facebook Feed Widget will look when embedded:

Updating Your Facebook Feed Widget

You can update your Facebook Feed widget at any time after it’s embedded on your website. Here’s a quick how-to:

1. On your Workspace page, at the top, click on Filter.
2. Then, in the menu that opens, hover over Website Widgets and click on Only to display only website widget assets on the page. 

3. Next, hover your mouse over the widget you want to edit and click on Edit Widget on the right side of the page.

4. Now, in the Widget Properties menu that opens on the right side of Website Widgets, under the General, Style, and Layout tabs, edit the properties to change how your Facebook Feed widget looks and works on your website.

That’s it! Your changes will be applied to your Facebook Feed widget automatically.