Elfsight Facebook Feed

Webflow has no native element that pulls posts from a Facebook Page onto a page. Keeping a site current with social content means re-creating each post by hand, or sending visitors off to Facebook and hoping they come back.

The Facebook Feed widget from Elfsight's widget platform closes that gap with a hosted embed. You paste one snippet once, then manage the feed's content and appearance from Elfsight's editor, and new posts from your Page show up on the Webflow site with no further edits.

The setup fits business owners and agencies that keep client sites current with social content. A restaurant can show daily specials and a nonprofit can post community updates without anyone touching the site build, and developers who look after many sites can script the install instead of pasting snippets one at a time.

How to integrate Elfsight Facebook Feed with Webflow

What is Elfsight Facebook Feed? Elfsight Facebook Feed is a hosted, no-code widget that displays a Facebook Page's posts along with their photos and videos. It caches the feed and auto-refreshes roughly every six hours, and the layout adapts to the screen width it renders at.

Teams pair the widget with Webflow when a section of the site needs to stay current without anyone editing it. A restaurant's menu page picks up customer food photos as they land on Facebook, and an agency keeps a client's community section moving without a content handoff every week. One constraint shapes every path below: Elfsight publishes no app in the Webflow Marketplace, so the widget always arrives as embed code.

The Elfsight Facebook Feed and Webflow integration supports three approaches:

• The Code Embed element places the widget at a specific spot on a page without writing code.
• Site-wide or page-level custom code loads the widget on every page, or in one page's head or body tags.
• The Webflow Data API registers and applies the widget script programmatically, but needs server-side development.

Most sites need only one of these. Pick based on whether the feed lives on a single page or on all of them.

Embed the widget with a Code Embed element

This method drops the feed exactly where you want it on the canvas, and it covers most single-page setups. Publishing custom code needs a paid Webflow Site plan or a paid Workspace plan. On the Facebook side, the widget connects only to Pages you manage with Full control or Partial control, and Elfsight is explicit that personal profiles and Groups cannot be connected at all, so a widget is not a way to surface someone's personal timeline.

To set up the integration:

1. Open the Facebook Feed configurator on elfsight.com, sign in, and pick a template.
2. Click Connect to Facebook, switch on every toggle in the Edit Requested Access window, then select your Page.
3. Adjust layout and header settings, including the post limit, on the Layout tab.
4. In your Elfsight dashboard at dash.elfsight.com, click Install next to the widget, open the Embed Code tab, and copy the code.
5. In Webflow, open the Add panel and drag a Code Embed element to the target spot.
6. Paste the snippet into the code editor and click Save and close.
7. Click Publish > Publish to Selected Domains.

After that one-time paste, the rest of the work happens in Elfsight's editor rather than in Webflow:

• Moderation mode: Auto-moderation approves posts against the filters you set, while manual moderation holds every post until you approve it yourself.
• Whitelists and blacklists: Auto-approve accounts you trust, and permanently hide posts from specific users or posts containing keywords you name.
• Header and sizing: Show or hide the header and its elements, add or remove the Like and Share buttons, and set width and height in pixels, percentages, or auto.
• Language and custom code: Pick the widget's display language on the More tab, and add custom CSS or custom JS from the same tab.

Custom JS runs only on the installed widget and not in the editor, so test any behavior change on a published staging domain. The widget itself also stays invisible while you edit in Webflow: check Preview mode or the published site. If the feed stops updating, the Facebook token has probably expired and needs reconnecting from the Elfsight editor.

Load the widget through site custom code

Use this method when the feed should appear on every page, or when you would rather manage the snippet from Site settings than from the canvas. The snippet is identical to the Code Embed path; only its location changes. Elfsight's own Webflow installation guide, linked from this page, documents both placements, and the site-wide route works best for floating widgets.

Add the snippet site-wide in head code

Head code loads the widget script on every published page of the site.

To install site-wide:

1. In the Webflow dashboard, click the three dots on your site and choose Settings.
2. Open the Custom Code tab and paste the installation code into Head Code.
3. Click Save, then Publish > Publish to Selected Domains.

External scripts in the head can slow first render, so the loading attribute is worth checking before you paste. Widgets installed after October 7, 2024 already ship with async. Older snippets may still carry defer plus a data-use-service-core flag, and Elfsight's widget loading speed guide tells you to switch those to async and drop the flag.

Add the snippet to a single page's settings

Page settings scope the code to one page without placing an element on the canvas.

To install on one page:

1. Open Page settings for the target page in Webflow.
2. Paste the code under Inside <head> tag or Before </body> tag.
3. Click Save changes and publish.

Code placed before the closing </body> tag loads after the page content, which keeps the widget from holding up first paint.

Deploy the script with the Webflow Data API

Agencies rolling the widget onto dozens of client sites can script the install instead of pasting snippets by hand. Elfsight has no public REST API: its only developer-facing product is a client-side Embed SDK for widgets, so all of the server-side work happens on the Webflow side. The Custom Code API accepts OAuth tokens from a Webflow App only, and rejects site and Workspace tokens.

The relevant endpoints all sit on the https://api.webflow.com/v2/ base URL:

• Register a hosted script (POST /v2/sites/{site_id}/registered_scripts/hosted) registers https://static.elfsight.com/platform/platform.js against the site.
• Upsert site custom code (PUT /v2/sites/{site_id}/custom_code) applies the registered script site-wide.
• Upsert page custom code (PUT /v2/pages/{page_id}/custom_code) scopes the same script to one page.
• List registered scripts (GET /v2/sites/{site_id}/registered_scripts) audits what a site already loads, against a documented ceiling of 800 registered scripts per site.

Registering the script is only half of it. Each page still needs the widget container for the platform script to find and fill.

Render the feed with the widget container

The platform script looks for a container div carrying your widget's unique ID and draws the feed inside it.

To render the feed:

1. Copy your widget ID from the installation code in your Elfsight dashboard.
2. Place this container where the feed should appear, for example inside a Code Embed element:

<div class="elfsight-app-[unique-id]" data-elfsight-app-lazy></div>

3. Publish the site. The data-elfsight-app-lazy attribute holds off loading until the widget is actually needed.

One caution for anyone running many client accounts: Elfsight warns that removing permissions during a Facebook reconnection disconnects your other widgets on the same Elfsight account, and each one then has to be reconnected by hand.

What you can build with the Elfsight Facebook Feed Webflow integration

Integrating the Elfsight Facebook Feed widget with Webflow puts live Page content on your site without re-creating each post by hand.

The setups teams reach for most often:

• Restaurant menu galleries: Build a menu page where daily specials and customer food photos pull from your Facebook Page and refresh on their own.
• Product page social proof: Place customer photos and posts from your Page next to purchase options so buyers see real use before they commit.
• Event photo pages: Stream attendee photo posts onto an event landing page, then leave it up as the proof point for next year's dates.
• Nonprofit update feeds: Publish fundraising news, community stories, and volunteer updates on a charity site straight from the organization's Page.

See how the same pattern plays out on the other half of Meta's platform in our guide to embedding an Instagram feed on a Webflow site. If you look after a portfolio of sites where snippets like these live, connect the Webflow MCP server and let an agent handle the site management around them, from content audits to per-site agent instructions.