How to use Facebook Feed Widget of Sky Addons for Elementor

The Sky Addons Facebook Feed widget pulls posts from a Facebook Page and renders them directly on your WordPress site in a responsive grid. Two layout styles — a Classic Post style that mirrors the native Facebook card and an E-commerce Card style — give you options for both content-heavy and product-oriented pages. Built-in transient caching means subsequent page loads serve from WordPress rather than hitting the Facebook API every time, keeping your site fast and your API quota intact. This documentation will guide you through the process of using the Facebook Feed Widget to create a live social media showcase on your website.

Features:

1. Two Layout Styles: Classic Post style shows the full Facebook card including author header, post text, images, engagement counts, and action buttons. E-commerce Card style presents the post image and CTA prominently for product promotion.
2. Global or Per-Widget API Credentials: Use the Page ID and Access Token set in Sky Addons → Settings for a site-wide default, or override them on individual widgets for multi-page setups.
3. Smart Transient Caching: Responses are cached in the WordPress database and refreshed on a schedule you choose (30 minutes to 7 days), eliminating redundant API calls.
4. Masonry Grid: Optional Pinterest-style column packing so expanded “See more” cards never leave empty gaps beside their row.
5. Entrance Animations: Cards can fade, fade-up, or zoom in as they scroll into view, with a subtle stagger between items.
6. Load More Button: An optional AJAX “Load More” button appends additional posts from the cached set without a page reload or any extra API calls.
7. Engagement Display: Show reactions, comment counts, and share counts — or hide them — per widget instance.

Insert Facebook Feed Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Facebook Feed in the widget panel and drag it onto the canvas.

Configure Layout

The Layout section sets the visual composition and grid structure.

1. Layout Style: Choose Classic Post for a social-feed feel with author info, text, images, and engagement row. Choose Card (E-commerce) for a product-card look with a prominent image and CTA button.
2. Masonry: Enable to pack cards by column height (Pinterest-style) so the grid fills cleanly when cards have different heights.
3. Columns: Set the number of columns per breakpoint (desktop 1–4, defaults to 3).
4. Column / Row Gap: Uniform gap between all cards.
5. Entrance Animation: Select None, Fade In, Fade Up, or Zoom In for the scroll-triggered card entrance.

Configure Facebook Source

The Facebook Source section connects the widget to the Facebook Graph API.

1. API Source: Choose Global to use the Page ID and Page Access Token stored in Sky Addons → Settings → API → Facebook. Choose Custom to enter credentials directly on this widget.
2. Page ID (Custom only): The numeric ID or username of the Facebook Page whose feed you want to show.
3. Page Access Token (Custom only): A Page access token with permission to read the Page feed.
4. Cache Feed: Keep this on (strongly recommended). Caching stores the API response and photos in WordPress transients to avoid hitting the Facebook API on every page load.
5. Refresh Cache Every: How often the cached data is refreshed — from 30 minutes up to 7 days.

Configure Feed Display Options

The Feed section controls how many posts appear and which elements are shown inside each card.

1. Number of Posts: How many posts to show initially (max 50 per cached set).
2. Author Image / Author Name: Show or hide the page profile picture and name in the card header.
3. Verified Badge: Show a verification checkmark beside the page name (Classic Post style only).
4. Date: Show or hide the post date.
5. Post Text: Toggle the post message. Set Text Word Limit (0 = full text) and enable Read More Link to truncate long posts. Choose whether the Read More link Expands Here (inline reveal) or Opens on Facebook.
6. Post Image: Show or hide the post’s attached image. For album posts in Classic Post style, set Max Images (album) — extra photos collapse into a “+N” tile.
7. Engagement (Classic Post): Toggle Reactions, Comments Count, Shares Count, and Action Buttons (Like / Comment / Share) independently.
8. Card Buttons (E-commerce Card): Toggle a floating Share button on the image, a Facebook icon, and a CTA button with customisable label.
9. Open Links In: New Window or Same Window for all Facebook links.
10. Load More Button: Enable an AJAX button to append more posts. Set Posts Per Click and customise the button label and end-of-feed message.

Style Your Facebook Feed

Use the Style tab to customise every visual element of the feed.

1. Item:
   Accent color, background, border, border radius, padding, and box shadow for each feed card.
2. Author:
   Typography, color, and spacing for the page name and profile picture area.
3. Date:
   Typography and color for the post date.
4. Text:
   Typography, color, line-height, and “See more / See less” link style for the post body.
5. Image:
   Border radius, aspect ratio, and object-fit for post images and album tiles.
6. Engagement:
   Icon color, count typography, and row spacing for reactions, comments, and shares.
7. Card Button:
   Typography, padding, border, radius, background, and text color for CTA and action buttons.
8. Load More Button:
   Typography, padding, border radius, and Normal / Hover color states.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your Facebook Feed widget in action.

Best Practices

1. Store your Page Access Token in the global Sky Addons settings rather than duplicating it on individual widgets — this makes it easier to rotate the token when it expires.
2. Keep the cache duration at 6–12 hours for most sites. Shorter durations increase API calls; longer durations may leave stale posts visible for too long.
3. Use the Load More button rather than a high initial post count — it keeps the page load fast and serves all extra posts from the already-cached set.
4. Enable Masonry whenever post text lengths vary significantly across the feed, to avoid uneven white space in the grid.

Troubleshooting

1. Feed shows no posts or an error message: Double-check your Page ID and Page Access Token. Access tokens expire — generate a long-lived token via the Facebook Developer dashboard and update it in Sky Addons settings or the widget. Make sure your token has the pages_read_engagement and pages_show_list permissions.
2. Posts are stale and not updating: If caching is on, the feed refreshes on the schedule you set. To force an immediate refresh, temporarily disable Cache Feed, save and preview the page, then re-enable caching.
3. Load More button loads no additional posts: The Load More button serves from the cached set of up to 50 posts. If your page has fewer than the initial post count, there is nothing extra to load and the button will not appear.

Frequently Asked Questions

Do I need a Facebook Developer account to use this widget?

Yes. You need a Facebook Page Access Token, which requires a Facebook App registered in the Facebook Developer portal and admin access to the Facebook Page you want to display.

Can I show feeds from multiple Facebook Pages on the same site?

Yes. Set the API Source to Custom on each widget instance and enter the Page ID and Access Token for each individual Page.

How do I get a long-lived Page Access Token?

Use the Facebook Graph API Explorer or the Token Debugger in the Facebook Developer portal to exchange a short-lived user token for a long-lived one, then generate a Page Access Token from it. Long-lived tokens are valid for approximately 60 days; some Page tokens do not expire at all.

Will the widget slow down my page?

No, as long as caching is enabled. Cached feeds are served from the WordPress database — no outbound HTTP request to Facebook is made until the cache expires. For best performance, set a reasonable cache duration and enable the Load More button instead of fetching a large initial post count.

Can I show the feed in a carousel instead of a grid?

Yes. The Facebook Feed Carousel widget uses the same data layer and content controls as this grid widget but wraps the posts in a Swiper carousel with navigation, pagination, and per-slide Normal / Hover / Active styling.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the Facebook Feed widget:

• Facebook Feed Carousel: Display the same Facebook posts in a horizontally scrollable Swiper carousel.
• Instagram Feed: Show a similar social feed from your Instagram Business account.
• Generic Grid: A general-purpose post grid widget for any custom post type.

Conclusion

The Facebook Feed widget from Sky Addons makes it straightforward to bring your Facebook Page activity onto your WordPress site — with smart caching, flexible layout styles, and full control over which post elements are displayed. Configure it once and it keeps itself up to date automatically. If you have any questions or need help, visit the Sky Addons support center.