The Facebook Feed widget by Atomic Addons shows the latest posts of a Facebook page on your site. Each post is a card with the page's picture and name, the date, the post text, its photo or album, the number of reactions and comments, a link to the post and a share menu. The posts load from Facebook with a page ID and a page access token. This guide covers connecting your page, adding the widget and setting up the cards.
Enable the Facebook Feed Widget
Facebook Feed is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Facebook Feed. You can also open the Marketing category.
- 4
Turn the Facebook Feed widget on.
- 5
Click Save Settings.
Connect Your Facebook Page
The widget needs two things from Facebook: the Page ID of the page whose posts you want to show (its numeric ID or its username) and a page access token with the pages_read_engagement and pages_show_list permissions. You get both from a Facebook app at developers.facebook.com; the Graph API Explorer can generate the token. Save them once for the whole site:
- 1
Go to WordPress Dashboard → Atomic Addons → Settings.
- 2
In Social Login Access, paste the page ID into Facebook Feed Page ID and the token into Facebook Feed Access Token.
- 3
Click Save Settings.
Every Facebook Feed widget set to Global (the default) then uses these details. To show a different page in one widget, enter its details in the widget itself, as described under Facebook Feed.
Keep your access token private. It is stored in your site's settings and used only on the server, so it never appears in the page source.
Add the Facebook Feed Widget
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Facebook Feed. The widget sits in the Atomic Addons Pro category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
If the page ID or token is missing or wrong, or the page has no posts, the editor shows a short notice in place of the feed explaining what Facebook answered. Visitors see nothing until the feed loads.
Facebook Feed
Content → Facebook Feed sets where the posts come from:
- 1
Select API: Global, the default, uses the page ID and token saved in Atomic Addons → Settings. Custom adds two fields to this widget.
- 2
Page ID: Custom only: the ID or username of the Facebook page to show.
- 3
Access Token: Custom only: the page access token for that page.
- 4
Cache Feeds: Keeps a copy of the posts on your server so the page doesn't call Facebook on every visit. On by default.
- 5
Reload Cache after: How long the copy is kept before the widget asks Facebook again: 30 Minutes, 1, 3, 6, 12 or 24 Hours, or 7, 15 or 30 Days. 12 Hours by default.
With the cache on, a new post on Facebook appears on your site the next time the cache reloads. When Facebook refuses the request, for example because the token has expired, the widget waits five minutes before it tries again.
Additional
Content → Additional sets the layout and what each card shows:
- 1
Masonry: Stacks the cards in columns of different heights, so tall and short posts fit together without gaps. On by default. Turn it off for a regular grid where each row lines up.
- 2
Columns: 1 to 6 columns: 3 by default, 2 on tablets and 1 on phones. Use the device icon to change the tablet and phone numbers.
- 3
Row Gap: The space between rows of cards, 20px by default.
- 4
Column Gap: The space between columns, 20px by default.
- 5
Layout Style: 1, the default, puts the See More link and share button under the text and runs the photo to the edges of the card at the bottom. 2 pads the whole card, shows the photo with rounded corners right after the text and moves the link and share button below it.
- 6
Show Text: The post's text. On by default.
- 7
Text Word Count: Cuts the text to this many words, 15 by default, and adds “…”. Set it to 0 to show the whole text.
- 8
Show Image Album: For posts with several photos, shows up to four of them in a tiled album; when there are more, the fourth tile shows the rest as “+3” and so on. Off by default.
- 9
Show Feature Image: Shown while Show Image Album is off: the post's main picture. On by default.
- 10
Show Author Image: The page's profile picture, linked to the page on Facebook. On by default.
- 11
Show Author Name: The page's name, linked to the page. On by default.
- 12
Show Date: The date of the post, in your site's date format (Settings → General). On by default.
- 13
Show Like: The number of reactions to the post. On by default.
- 14
Show Comments: The number of comments. On by default.
- 15
Show Read More: A link to the post on Facebook. On by default.
- 16
Show Share: A share button that opens a small menu with Facebook, X and Pinterest, each sharing the post's Facebook link. It opens on click or tap and works with the keyboard. On by default.
- 17
Read More Text: The text of the post link, See More by default.
- 18
Link Target: Whether the links open in a new window (the default) or the same window. It applies to every link in the card: the page, the photos, See More and the share menu.
- 19
Post Limit: How many posts to show, 6 by default.
Posts are shown newest first, as Facebook returns them. A post without a picture shows as a text card.
Style the Facebook Feed
Everything below is on the Style tab:
- Item — the card's background, border, radius, padding and shadow, in Normal and Hover states.
- Author — the page name's color, hover color, typography and text shadow, and under Image the profile picture's size, border, radius and the gap beside it.
- Date, Text and Read More — color and typography, with a hover color for the link.
- Like / Comments — Like Color, Comments Color, background, typography, padding, radius and gap.
- Image — the photo's radius and spacing, the Album Gap between album tiles, and the color, overlay and typography of the Album Count on the last tile.
- Share — the share button in Normal and Hover states, and the Dropdown menu's background, border, padding, shadow, title and links.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.