How to Embed an Instagram Feed on Your Website: 4 Free Methods

Instagram has more than 2 billion monthly active users, making it one of the largest social platforms in the world. But almost none of that attention happens on your website. Visitors land on your homepage, scroll once, and leave. The social proof you are building on Instagram, the new products, the customer photos, the behind-the-scenes content, stays locked inside an app that most of your visitors will not open during their session.

An Instagram feed widget embedded on your website fixes that. Done well, it is fresh content without the content treadmill, social proof that updates itself, and for ecommerce brands, a shoppable moment at the exact second a visitor is deciding whether to trust you.

This guide walks through why to add an Instagram feed, where to place it on your site, and the four methods available, ranked by effort, cost, and maintenance burden. It includes a step-by-step walkthrough with screenshots, the HTML code you need, and answers to the questions people actually search for. By the end you will know exactly which method fits your setup.

Why Add an Instagram Feed Widget to Your Website?

Before the how, it is worth being clear on the why. Five benefits show up consistently in real conversion and engagement data.

1. Social Proof and Trust at the Lowest Possible Cost

User-generated content (UGC) consistently outperforms brand-produced content on trust signals. Shoppers tend to trust photos from real customers more than polished brand photography, which is why customer review widgets, photo galleries, and social-proof modules have become standard on modern ecommerce stores. An embedded Instagram feed is one of the cheapest UGC pipelines you have: if your customers are already posting photos that tag you, the content already exists. No incentive program, no DAM, no rights workflow.

2. Fresh Content Without the Content Treadmill

Google's ranking systems reward sites that demonstrate activity, and AI Overviews increasingly privilege pages that signal recency. An embedded Instagram feed auto-updates every time you post, so your homepage and category pages stay alive without your team manually rotating hero images or banner promos.

3. Shoppable Moments for Ecommerce and DTC Brands

If you tag products in your Instagram posts, a feed on your product detail page or homepage becomes a direct visual path from inspiration to checkout. Showing real customer photos next to your brand product images gives the buyer a "this is how it looks in real life" reference, especially valuable for fashion, beauty, home, and food categories where the lifestyle context shifts the buying decision.

4. Unified Brand Experience Across Channels

Your website and your Instagram presence stop feeling like separate islands. Visitors immediately understand your voice, aesthetic, and community in a single scroll. Especially important for brands where Instagram is the primary channel for new collections, restocks, or events.

5. Engagement and Time on Site

Visual content keeps people scrolling. Lower bounce rate, higher time on page, more pages per session, all of which Google uses as indirect quality signals via Chrome user experience data. A feed that loads efficiently (more on Core Web Vitals below) gives you the engagement boost without the speed penalty.

When an Instagram Feed Makes Sense (and When It Does Not)

Most guides on this topic stop at "add the feed!" The honest answer is that an Instagram feed is not right for every site. Here is the impartial take.

Good Fits

• Ecommerce and DTC brands, especially fashion, beauty, home, and food, where UGC drives purchase confidence
• Restaurants, cafes, and hospitality, where visual appetite appeal converts directly to bookings and walk-ins
• Fitness studios, salons, and service businesses, showing atmosphere and outcomes that words cannot
• Creators, coaches, and personal brands, where Instagram is already the main stage and the website is a credibility anchor
• Events, venues, and tourism, capturing energy, attendance, and ambient social proof

When Not to Embed an Instagram Feed

This is the part most guides skip. An embedded feed actively hurts credibility in a few cases.

• B2B SaaS with no visual product. Customer testimonials, logo walls, and case study cards convert better than lifestyle photos.
• Law firms, accountants, financial services, healthcare. Unless you are deliberately building a personal brand presence, the channel mismatch costs you trust.
• Sites whose Instagram has very few posts, or where the posting cadence is inconsistent. A dead-looking feed hurts more than no feed at all.
• Sites already saturated with social proof. If you already have reviews, case studies, and a logo wall above the fold, the feed is noise.

Where to Place Your Instagram Feed on a Website

Placement matters more than most people think. The same Instagram feed can either drive conversions or distract from them depending on where it sits.

Homepage, Below the Fold

The safest high-impact placement. Your hero stays focused on the primary CTA. The feed lives mid-page as social proof after visitors have seen your core value proposition. This is where most brands should start.

Footer or Global Section

Low-cost, omnipresent placement. The feed appears on every page without competing for attention in the hero. Great for brand-building, weaker for direct conversion. Pair with a "Follow us" CTA and UTM-tagged links.

Dedicated "@yourbrand on Instagram" Page

A direct SEO play. Rank for branded searches like "yourbrand instagram" and give your most engaged visitors a destination. Useful if your Instagram already drives meaningful referral traffic. Pair with a follow CTA and a hashtag explainer.

Product Detail Pages (PDP)

The highest-converting placement for ecommerce. Show UGC tied to the specific SKU on the page. This is where shoppable Instagram feeds earn their keep, especially for fashion, beauty, and home. Filter by branded hashtag or product tag so the right photos show on the right product.

Thank-You and Confirmation Pages

Often overlooked. Post-purchase is the moment a customer is most primed to follow you on social. A feed on the order confirmation page, paired with "Tag us with #yourbrand to be featured," converts buyers into followers and future UGC creators.

4 Ways to Embed an Instagram Feed on a Website

There are essentially four routes to embed an Instagram feed on your website. They differ wildly in effort, cost, and flexibility. Below they are ordered starting with the method that fits most sites, down to the most specialized.

Method 1: Cross-Platform Instagram Feed Widget (No Code)

The no-code route, and the one most sites should start with. You configure your feed (layout, filters, color palette, post count) in a dashboard, the tool generates an HTML embed snippet, and you paste it anywhere. Shopify, Wix, WordPress, Webflow, Squarespace, Framer, Divi, plain HTML, it makes no difference. The same snippet works on every platform.

Pros: Works on any platform. No developer time. No token refresh, no Meta API maintenance, no breaking changes hitting your code. Layouts include grid, slider, masonry, and carousel. Hashtag and account filtering. The vendor maintains compatibility for you. Free tier available.

Cons: Subscription cost above the free tier. One additional vendor relationship to manage.

Best for: The majority of small and mid-sized businesses. Common Ninja's free Instagram feed widget lets you publish a responsive grid in minutes without writing a line of code, and the same approach applies to other reputable widget platforms like EmbedSocial, LightWidget, and Curator.io.

Method 2: Platform-Specific Instagram Feed Plugins

If your site runs on a single platform, there are native Instagram feed plugins built specifically for it.

• WordPress Instagram feed plugin: Smash Balloon Instagram Feed is the dominant choice, with a free tier and paid plans for advanced features.
• Shopify Instagram feed app: Instafeed, Socialphotos, and others in the Shopify App Store. Most have free tiers limited to a small number of posts.
• Wix Instagram widget: The built-in Instagram Feed element in the Wix editor, plus marketplace alternatives.
• Squarespace Instagram block: The native Instagram Block, with limited customization.
• Webflow Instagram feed: No native option, usually solved with a third-party embed (see Method 1) or a custom Webflow integration.

Pros: Platform-native installation. Typically free or low cost. Inherits platform-native styling controls in some cases.

Cons: Platform lock-in. Migrating to a different CMS means starting over. Quality varies wildly between plugins. Many have aggressive upsells or limited free-tier post counts. Multi-site brands end up maintaining a different plugin per platform.

Best for: Single-platform sites where a specific well-reviewed plugin happens to fit your exact requirements.

Method 3: Custom Code via the Instagram Graph API

The developer route. Register an app on Meta for Developers, complete OAuth, obtain long-lived access tokens, call the Instagram Graph API, cache responses on your backend, and render the feed with your own front-end code.

Pros: Full control over layout, filtering logic, and styling. No per-month SaaS cost. Direct relationship with the API, no middleman.

Cons: Real engineering work. Long-lived tokens expire every 60 days and must be programmatically refreshed. Rate limits apply. Graph API breaking changes can take down your feed without warning. Initial build cost: 2 to 5 dev days. Ongoing maintenance: a few engineering hours every quarter, more around Meta API version bumps.

Best for: Enterprise sites with in-house developers and unusual requirements (custom filtering, integration with a headless CMS, internal personalization).

Method 4: Instagram's Native oEmbed (Single Posts Only)

Instagram exposes an oEmbed endpoint via the Meta for Developers platform that lets you embed individual posts. You generate an embed code from a post's menu, paste it into your page, and Instagram renders it inside an iframe.

Pros: Free, official, no third-party dependency. Works in any HTML page.

Cons: Embeds individual posts, not a feed. No grid layout. Each embed breaks if the underlying post is deleted. Displaying embeds at scale requires you to register a Facebook App, which means OAuth and a privacy review.

Best for: Embedding a single Instagram post inside a blog article. Not a viable option for a homepage feed or PDP grid.

Method	Effort	Cost	Customization	Maintenance	Feed vs single post
Cross-platform widget	Very low	Free to low	High	None	Yes
Platform plugin	Low	Free to low	Limited	Low	Yes
Custom code (Graph API)	High	2 to 5 dev days + ongoing	Full	High	Yes
oEmbed (native)	Low	Free	None	Medium (App review)	Single post only

Step-by-Step: Build a Free Instagram Feed Widget

For Method 1 (the cross-platform widget), here is the actual flow. Screenshots are from the Common Ninja editor, but the same shape applies to most reputable widget platforms: pick a source, customize the design, publish, paste.

Step 1: Open the Instagram Feed Widget Editor

Go to the Common Ninja Instagram feed widget page and click Create Instagram Feed. The editor opens with a default Instagram-style grid you can replace with your own account in the next step. Common Ninja's free tier lets you publish the widget without entering payment details.

Step 2: Add Your Instagram Account as the Feed Source

In the Feed Sources panel on the left, paste your Instagram profile URL (for example, https://www.instagram.com/yourbrand/) or just the username. The widget preview on the right updates with your real posts within a second or two. You can optionally add a tab name and thumbnail for multi-source feeds. Public Personal accounts work; Business and Creator accounts unlock extras like post insights.

Step 3: Customize the Design With a Natural-Language Prompt

The fastest way to restyle the feed is the AI design assistant at the bottom of the editor. Type something like "Make the design more attractive with vibrant colors" or "Match this to a dark, moody fashion brand", hit send, and the widget regenerates with new colors, typography, and card styling. Prefer manual control? Every property is editable from the sidebar too.

The AI design chat at the bottom of the editor accepts plain-language design requests and applies them across the whole widget.

Step 4: Refine the Color Scheme and Layout

After the AI applies a new palette, fine-tune it from the sidebar: card spacing, corner radius, typography, hover effects, and per-element color overrides. If you want a specific brand color, paste your hex value directly. The preview is live, so you can see Core Web Vitals-friendly changes (smaller card sizes, fewer posts) immediately reflected in the preview render.

After the AI regenerates the palette, the widget cards adopt a vibrant color scheme that you can still fine-tune manually.

Step 5: Publish and Assign the Widget to a Project

When the design looks right, click Publish in the top right. The Assign to a project modal lets you group widgets by site, brand, or environment. Pick the right project (or create one), then click Save Changes. Projects make it easier to manage analytics and updates if you eventually deploy more than one widget.

Projects keep your widgets grouped by site or brand, useful when you scale beyond one feed.

Step 6: Copy the Embed Code and Paste It Into Your Website

The success modal exposes the Copy Code button. Click it, then paste the snippet wherever you want the feed to appear on your website: a Shopify section, a WordPress block, a Wix HTML element, a Webflow embed component, or directly into your own HTML. The widget itself, including image hosting and delivery, runs on the Common Ninja side, so you do not need to host any assets yourself.

One Copy Code click, one paste, and the Instagram feed widget is live on any page that supports HTML.

The HTML snippet itself looks roughly like this. You can paste it into any block that accepts custom HTML.

<script src="https://cdn.commoninja.com/sdk/latest/commonninja.js" defer></script> <div class="commonninja_component pid-YOUR-WIDGET-ID"></div>

Design Best Practices for an Instagram Feed Widget

Regardless of which method you pick, a few design principles separate Instagram feeds that feel intentional from feeds that feel like noise.

• Match your site's aesthetic. Padding, corner radius, typography, and background should feel continuous with the rest of the page, not like an Instagram iframe airlifted in.
• Choose the right layout. Grid for homepages and PDPs, slider or carousel for footers and narrow sections, masonry for editorial sites with mixed aspect ratios.
• Optimize for mobile first. Most traffic is mobile. Tap targets at minimum 44px. Test on a real phone, not just your laptop browser's dev tools.
• Lazy-load the feed. Instagram images are heavy. If the feed sits below the fold, do not load it on initial page paint. This is the single biggest source of avoidable Largest Contentful Paint regressions in Instagram embeds.
• Do not autoplay video. Almost always annoying, burns mobile data, and counts against your CLS and INP scores.
• Filter thoughtfully. A curated branded-hashtag feed almost always beats "all my posts" for conversion. Show the moments that match the page's intent.
• Caption the feed. A one-line "Follow us @yourbrand" above the grid converts feed views into followers, which is the long-term compounding value.

Common Mistakes to Avoid

• Embedding a stale feed. If you post once every couple of months, the feed will broadcast that. Fix the cadence before you expose it on the homepage.
• Showing too many posts. Six to nine is almost always enough for a homepage feed. More becomes visual noise and slows the page.
• Ignoring accessibility. Alt text matters. Good Instagram feed widgets pull alt text from the original post caption. If yours does not, add a sitewide rule.
• Not tracking clicks. Add UTM tags to your "View on Instagram" links so you can measure the feed's contribution to follower growth and referral traffic in GA4.
• Blocking the feed behind a cookie banner with no fallback. Native Instagram embeds set third-party cookies and trigger GDPR consent requirements in the EU. Choose a widget that either avoids third-party cookies or shows a graceful click-to-load fallback inside your consent layer.
• Treating the feed as set-and-forget. Review it every quarter. Make sure the posts on display still represent the brand you want to be.

Wrapping Up

If you have no developer and want your Instagram feed live today, use a cross-platform widget (Method 1). If you are on a single platform and want a fully native feel with no extra vendor, a platform plugin like Smash Balloon (Method 2) is solid. If you have custom layout requirements and an engineering team, the Instagram Graph API (Method 3) gives you total control at the cost of ongoing maintenance. Native oEmbed (Method 4) is best reserved for embedding a single Instagram post inside a blog article, not for displaying a feed.

Whichever method you pick, decide on the placement first, match the design to the rest of your site, and protect your Instagram posting cadence. The feed on your homepage is only as good as the content it is reflecting back from the app.

Want the fastest route? Spin up a free Instagram feed widget using the step-by-step above, then read our cross-platform branding guide and how to increase your conversion rate piece to make the most of it once it is live. For more on showcasing social content, see how brands excel with Instagram integration.