Instagram

Displaying live Instagram content on a Webflow site requires third-party tools or custom server-side development, since Instagram's Graph API authentication can't be handled by frontend hosting alone. Connecting Instagram with Webflow lets you display auto-updating feeds, embed posts and Reels, sync content into Webflow CMS collections, and showcase user-generated content as social proof.

It's especially useful for e-commerce brands, photographers, restaurants, and agencies that want website visuals to stay in sync with Instagram without manual uploads.

How to integrate Instagram with Webflow

What is Instagram? Instagram is a social media platform owned by Meta for sharing photos, videos, Reels, and Stories. It supports Business and Creator account types with access to the Instagram Graph API, content publishing tools, shopping features, and performance insights.

Teams connect Instagram to Webflow when they want their website to reflect their latest social content automatically. A restaurant owner might want food photos from Instagram to appear on their homepage without re-uploading each image. An e-commerce brand might want customer-tagged photos displayed as a live gallery on product pages. The right integration method depends on how much control you need over layout, update frequency, and data handling.

The Instagram-Webflow integration supports 4 approaches:

• The SI Instagram Feed app displays your Instagram feed on any Webflow page without writing code.
• Code Embed widgets let you add Instagram feeds from services like Elfsight and EmbedSocial using embed snippets.
• Zapier, IFTTT, and viaSocket sync Instagram posts into Webflow CMS items through automated workflows.
• The Instagram Graph API and Webflow Data API give you full control over content syncing, publishing, and data mapping, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Install the SI Instagram Feed app

The SI Instagram Feed app is the only native Webflow Marketplace app for Instagram. It installs directly from the Webflow Apps directory and displays your Instagram feed on any page without embed code. The app includes a free plan and multiple layout options. It is approved by Webflow, which reflects a quality review rather than an endorsement or certification. You need an Instagram Business or Creator account to connect.

To set up the integration:

1. Go to the SI Instagram Feed listing in the Webflow Marketplace and click Install.
2. Authorize the app with your Instagram Business or Creator account.
3. Choose a layout and configure your feed settings within the app interface.

The app supports several layout options for different page contexts:

• Marquee layout with continuously scrolling rows
• Masonry grid that adjusts to varying image heights
• Slider with left/right cutout effects
• Featured grid for magazine-style hero sections

Because SI Instagram Feed is a native app, it does not require a Code Embed element or a paid Webflow plan with custom code access. For teams that need more layout customization, hashtag-based feeds, or multi-platform aggregation, the embed widget approach below offers more flexibility.

Add Instagram feeds with Code Embed widgets

Widget services handle Instagram API authentication, token refresh, and content polling on your behalf. You configure the feed in the widget service's dashboard, copy a snippet, and paste it into a Code Embed element in Webflow. This is Webflow's own recommended approach for displaying auto-updating Instagram feeds. A paid Webflow site plan is required to use the Code Embed element.

Several widget services are available for embedding Instagram feeds in Webflow, each with different strengths. Elfsight offers 50+ design settings and is featured in Webflow's official help center. EmbedSocial supports Instagram Stories, shoppable posts, and content moderation. Curator.io aggregates feeds across Instagram, Facebook, TikTok, and other platforms with a free-forever plan, though it is not listed on Webflow's own properties.

You can also embed a single Instagram post directly without any third-party service, which is useful for highlighting a specific campaign or announcement.

Embed an auto-updating feed with Elfsight

Elfsight is commonly used on Webflow sites. It supports combining posts from multiple Instagram accounts, hashtags, and specific post URLs in one widget. The widget auto-updates as you post new content to Instagram.

To add an Elfsight Instagram feed:

1. Create an account at elfsight.com and select Instagram Feed from the apps menu.
2. Choose a template — slider for homepage hero sections, grid for portfolios, or cards with header for sidebars.
3. In the Sources tab, enter your Instagram username, hashtag, or location. Use the Layout, Post, and Style tabs to customize the appearance.
4. Click Publish and copy the generated embed code.
5. In Webflow, drag a Code Embed element onto your page, paste the Elfsight code, and click Save & Close.
6. Publish your Webflow site to see the feed on your live or staging domain.

The widget will not render on the Webflow canvas — this is expected behavior. Verify the feed after publishing to a live or staging domain.

Embed an auto-updating feed with EmbedSocial

EmbedSocial supports feed types including Instagram Stories and shoppable product galleries. It includes content moderation tools and GDPR-compliant lazy loading. The free plan provides one source with auto-sync every 24 hours.

To add an EmbedSocial widget:

1. Sign up at embedsocial.com and go to Sources > Instagram to authorize your account.
2. Choose a feed type — account feed, hashtag feed, Instagram Stories, or mentions.
3. Select a template, customize the layout, and go to the Embed tab.
4. Click Copy code, then paste it into a Code Embed element in Webflow.
5. Publish your Webflow site.

EmbedSocial is a strong option when you need Stories on your website or want visitors to click through from Instagram photos to product pages.

Embed a single Instagram post

For featuring one specific post, photo, video, or Reel, Instagram's native embed button works without any third-party account. This method does not auto-update — it shows that exact post permanently.

To embed a single post:

1. Open the Instagram post in a desktop browser at instagram.com.
2. Click the three-dot (…) menu on the post and select Embed.
3. Click Copy embed code.
4. In Webflow, drag a Code Embed element to your page, paste the copied code, and click Save & Close.
5. Publish your site to see the embed render.

This method only works with public accounts that have embedding enabled. Stories are not supported. If the embed shows only a loading icon after publishing, add //platform.instagram.com/en_US/embeds.js to your site's custom code in the footer so the script loads on every page.

Connect with Zapier, IFTTT, or viaSocket

Automation platforms can sync Instagram posts into Webflow CMS collections, giving you full design control over how feed content appears. Instead of rendering an iframe widget, your Instagram posts become CMS items that you style with Collection List and Webflow's native layout tools. All automation platforms require an Instagram Business or Creator account. Personal accounts are not supported.

Available triggers and actions across platforms:

• Zapier: New media posted → Create live Webflow CMS item. New tagged media → Create Webflow CMS item. Pre-built templates available for both draft and published items.
• IFTTT: New photo or video by you → Create Webflow collection item, create live Webflow collection item, or publish Webflow site. Most Webflow actions require a paid IFTTT Pro plan.

To set up a Zapier sync (the most common automation approach):

1. Create a Webflow CMS collection with fields for image URL, caption, post date, and permalink.
2. In Zapier, create a new Zap with Instagram for Business as the trigger app and select New Media Posted in My Account.
3. Connect your Instagram Business or Creator account.
4. Set Webflow as the action app and select Create Live Item.
5. Map the Instagram fields (media URL, caption, timestamp, permalink) to your CMS collection fields.
6. Turn on the Zap and test by publishing a new Instagram post.

New posts appear as CMS items, rendered through your Collection List layout. Keep in mind that Zapier uses polling rather than true webhooks, so there may be a delay. The CMS plan supports 2,000 items, so high-volume accounts should monitor item counts and verify Business plan limits directly on Webflow's pricing page to avoid hitting plan limits.

Build with the Webflow and Instagram APIs

For full control over content syncing, publishing, and data mapping, you can build a custom integration using both APIs. This approach requires server-side development. Webflow does not execute backend code, so you need middleware (such as Vercel Functions, AWS Lambda, or Cloudflare Workers) to handle Instagram API authentication and proxy requests to the Webflow Data API.

The relevant APIs for this integration:

• The Instagram Graph API handles reading user media, insights, comments, and publishing content. It requires a Business or Creator account and an access token with appropriate permissions.
• Webflow's Data API v2 handles CMS collection reads, item creation, updates, and publishing.
• Webflow webhooks fire outbound HTTP notifications on events like form_submission and site_publish, which can trigger downstream actions in your middleware.

A custom API integration is appropriate when you need automated deduplication, custom filtering logic, scheduled syncs on your own infrastructure, or two-way data flow between Instagram and Webflow CMS.

Sync Instagram posts to Webflow CMS

The most common API use case fetches recent Instagram posts and creates corresponding CMS items. This runs as a scheduled serverless function — typically every few hours — comparing fetched media IDs against existing CMS items to avoid duplicates.

To implement a basic sync:

1. Fetch the user's recent media from the Instagram Graph API. This requires a long-lived access token with instagram_business_basic permission:

GET https://graph.facebook.com/v25.0/{ig-user-id}/media
   ?fields=id,caption,media_type,media_url,thumbnail_url,permalink,timestamp
   &access_token={long-lived-token}



2. For each new post not already in Webflow, create a live CMS item using the Webflow Data API. You need a Webflow API token with sites:read, cms:read, and cms:write scopes:

POST https://api.webflow.com/v2/collections/{collection_id}/items/live
Authorization: Bearer {webflow-token}

{
 "isDraft": false,
 "isArchived": false,
 "fieldData": {
   "name": "Post caption or ID",
   "slug": "post-{ig-media-id}",
   "instagram-id": "{ig-media-id}",
   "image-url": "{media_url}",
   "caption": "{caption}",
   "post-date": "{timestamp}",
   "permalink": "{permalink}"
 }
}



3. For batches, use the bulk create endpoint (POST /v2/collections/{collection_id}/items/bulk) to create up to 100 items per request.
4. Schedule a token refresh before the 60-day expiration window. Long-lived Instagram tokens expire after 60 days and must be refreshed proactively via GET /refresh_access_token. Set up a cron job to call this endpoint within the window — tokens not refreshed in time expire permanently.

This scheduled sync pattern gives you a maintainable foundation for an Instagram-to-Webflow CMS pipeline.

What can you build with the Instagram Webflow integration?

Integrating Instagram with Webflow lets you display live social content on your website without manually re-uploading photos or maintaining separate content workflows.

• Social proof galleries on product pages: Display customer-tagged Instagram photos alongside product descriptions on e-commerce pages. A nail polish brand, Revel Nail, placed Instagram UGC on their cart page and reported a 2% decrease in cart abandonment, estimated at $400,000 saved.
• Auto-updating creative portfolios: Photographers and designers connect their Instagram feed to their Webflow portfolio site so new work appears automatically. Webflow's Evore template is built specifically for this use case, with tags for "Instagram Feed," "Content Creator," and "Link In Bio."
• Restaurant and hospitality visual showcases: Food and hospitality businesses embed Instagram feeds as dynamic visual menus and atmosphere previews that update without staff intervention. This drives local foot traffic by surfacing authentic customer content directly on the business website.
• Shoppable Instagram feeds on Webflow Ecommerce sites: Connect Instagram Shopping to tag products in posts and link them directly to Webflow product pages. Webflow has a dedicated Instagram Shopping setup that syncs your product catalog to Meta's Commerce Manager, letting visitors move from an Instagram image to checkout.

If you need more control over filtering logic, custom data transformations, or real-time comment moderation dashboards, the API integration path covers those cases with full flexibility.