You can embed an Instagram feed on your website by connecting your account to a third-party widget tool, copying the generated code snippet, and pasting it into your site’s HTML or block editor. The process takes about 15 minutes on a standard plan.
SMM & Reputation Growth
Grow Your Brand Online — Faster
Boost your social media presence and build a stronger online reputation with SMMSEO24. Trusted by businesses across the US.
- Fast Delivery
- 24/7 Support
- Secure Checkout
Your platform (WordPress, Shopify, Wix), the layout style you pick (grid, slider, masonry), and whether you need a business or personal account change which steps you’ll follow.
Who needs an Instagram feed widget
Three different people usually look for step-by-step guidance on adding an Instagram feed to a website, and they need very different things. A small business owner running a WordPress site wants recent posts displayed on their homepage to build trust with visitors. They already have a business account and just need the exact plugin name and where to paste the code.
A web designer building a custom HTML page for a client needs a lightweight JavaScript snippet that won’t slow down the load time. They care about CSS customization and responsive breakpoints, not drag-and-drop builders.
A hobbyist blogger on a free Wix or Weebly plan wants to show off personal photos but doesn’t want to pay a monthly subscription for a premium widget. They need a completely free option, even if it shows ads.
This page serves the first two readers best. It assumes you’re using a CMS like WordPress or Shopify, or you have access to edit your site’s source code directly. If you’re on a locked-down free website builder without custom HTML blocks, you’ll need to check that platform’s specific app market instead, as the methods here won’t apply.
What Changes Your Instagram Feed Embed Setup
Four things decide which path you take and how long the job actually takes.
Account type. Meta requires a business or creator account to use the official Instagram Graph API, which almost all reliable widget tools rely on. If you’re using a personal account, switch it in the Instagram app settings under “Account type and tools” first. Without this, the authorization step will block you every time.
Website platform. If you’re on WordPress, you’ll install a plugin directly from the dashboard. On Shopify, add an app from the Shopify App Store. If you’re writing raw HTML, you’ll copy a <script> tag.
Widget provider. Free tools like SnapWidget offer basic grids but often include branding or limit updates. Paid tools like Elfsight or Taggbox remove limits, offer more layouts, and refresh faster.
Layout choice. A grid works best for static pages showing 6 to 12 posts at once. A carousel saves vertical space on mobile screens. Choose a slider for long pages or a grid for empty sidebar space.
Steps to add the Instagram widget
Pick a widget provider that matches your budget and platform. This guide uses a standard third-party tool like Elfsight as the example, since it works across WordPress, Shopify, and custom HTML sites. The process takes about 10 to 15 minutes on a stable connection.
- Go to your chosen widget provider’s website and create a free account. You’ll land on the main dashboard immediately after verifying your email address.
- Select “Instagram Feed” from the list of available widgets. Click the button to start building your new widget configuration.
- Click “Connect Instagram Account” and log in through the Meta authorization window. Grant the requested permissions. You’ll see your profile picture appear in the tool’s dashboard when it succeeds.
- Choose your layout style—grid, slider, or masonry—and set the number of posts to display. Six to twelve posts is the standard range for a homepage section. Preview the changes on the right side of the screen.
- Customize the colors, fonts, and spacing to match your website’s design. Toggle off any elements you don’t need, like captions or follower counts. The preview updates instantly with each click.
- Click “Save” or “Get Code” to generate your unique installation snippet. Copy the entire block of HTML or JavaScript code provided to your clipboard.
- Log in to your website’s admin panel. For WordPress, go to Appearance > Theme File Editor or open a Custom HTML block in the page editor. For Shopify, go to Online Store > Themes > Edit Code.
- Paste the copied code exactly where you want the feed to appear. Save the file or update the page. View your live website in a new tab to confirm the images load correctly.
The single judgment call that separates a clean setup from a messy one is placement. Don’t drop the code inside your header or footer files unless you want it on every single page. Put it in the specific page template or content block where it adds value. If your site requires editing core PHP theme files and you aren’t comfortable with code, hire a developer for this step—one misplaced bracket can take your site offline.
Layout options compared
Different page designs require different widget setups to look natural. Here’s how the common variations compare when you’re deciding what to paste into your site.
| Situation | What to do | What it takes | What to watch for |
|---|---|---|---|
| WordPress homepage | Use a block plugin | 10 minutes setup | Block alignment breaking mobile view |
| Shopify product page | Install a store app | 5 minutes setup | App slowing page load speed |
| Custom HTML site | Paste script tag | 15 minutes coding | Script conflicting with other JS |
| Wix website builder | Add an HTML iframe | 10 minutes setup | iFrame borders showing on screen |
| Sidebar display | Choose narrow grid layout | 5 minutes config | Images shrinking too small |
| Full-width banner | Use a horizontal slider | 10 minutes config | Slider jumping on slow connections |
| Blog post footer | Embed a small 3-post grid | 5 minutes setup | Pushing comments too far down |
Choose the row that matches your current setup.
Details that make the feed look right
Picking the right spot on the page
The container width dictates how your images render, so place the code inside a section that matches your intended layout. If you paste a full-width grid code into a narrow sidebar, the images shrink until they’re unreadable.
Load order matters for performance. Placing the script just above the closing </body> tag keeps it from delaying text and navigation.
Matching your site’s design
Strip away default widget borders if your website uses a flat, minimalist design. Most tools let you set the padding to zero pixels and remove background colors entirely. Leaving the default white box around a dark-themed site makes the integration look like an afterthought.
Test responsiveness by resizing your browser window to 375 pixels wide. If the grid stays locked at four columns, your visitors will have to scroll sideways. Switch to a layout that automatically drops to one or two columns on mobile devices.
Fixing feed display problems
When the widget breaks, the symptoms point directly to the cause. Match what you see on your screen to the table below to find the fix without guessing.
| What you notice | What it usually means | What to do first | How to stop it happening again |
|---|---|---|---|
| Blank white space | Script didn’t load | Check browser console errors | Place code before closing body tag |
| “Account disconnected” message | Access token expired | Reconnect account in widget dashboard | Set calendar reminder to renew yearly |
| Only one image showing | Post limit set to one | Change limit to six or twelve | Double-check settings before saving |
| Images look stretched | Wrong aspect ratio chosen | Switch layout to square crop | Always select original or square format |
| Old posts keep appearing | Cache hasn’t cleared | Click clear cache in widget settings | Lower cache duration to one hour |
| Widget breaks site layout | Container is too narrow | Wrap code in a wider div | Test on mobile before publishing |
| Slow page loading | Too many API calls | Reduce refresh rate in settings | Limit displayed posts to twelve maximum |
Don’t try to edit the generated JavaScript manually to force a fix.
Rules for displaying Instagram content
Meta enforces strict rules on how you display content pulled from its platforms. Use Meta’s official embed or API mechanisms, or a provider that complies with Meta’s terms; the legal requirements also depend on content rights and applicable law. Scraping content through unofficial scripts violates their terms of service and risks getting your connected account restricted.
If you operate in Europe or serve European visitors, the General Data Protection Regulation (GDPR) applies to the cookies these widgets drop. Third-party embed tools load resources from external servers, which can collect visitor IP addresses. You may need to add the widget provider to your site’s cookie consent banner. Check your local privacy laws or consult your legal team if you’re unsure whether your region requires prior consent before loading social media scripts.
What the widget costs
The price depends entirely on the provider you choose and the features you need. Free plans exist, but they come with visible trade-offs that affect how professional your site looks.
Free tiers from services like SnapWidget give you a basic grid, but they usually display the company’s logo on your site and limit you to one widget. They might also restrict how often the feed updates, meaning new posts won’t appear for several hours.
Paid plans are typically inexpensive compared with the alternative. You get unlimited updates, no third-party branding, multiple layouts, and support. If you’re running a business site where appearance builds trust, the paid tier pays for itself quickly.
Custom development without a third-party tool costs significantly more upfront. You’ll pay for the developer’s time, and you’ll be responsible for maintaining the code whenever Meta updates its API versions. Prices shift, so check the pricing page of your chosen provider directly for today’s numbers.
Keeping the feed updated
Once the code is live, the widget runs automatically, but the connection between your site and Instagram doesn’t last forever. Meta issues access tokens that expire periodically. When a token expires, your feed stops updating and displays an error or goes blank.
Log in to your widget provider’s dashboard once a month to verify the connection status. If the tool shows a warning icon next to your account name, click it and re-authorize the connection. This takes about thirty seconds and prevents visitors from seeing a broken section on your homepage.
Clearing the widget’s cache manually is necessary if you delete a post on Instagram but it still appears on your website. Look for a “Clear Cache” button in your provider’s settings rather than waiting for the automatic refresh cycle to catch up.
When a widget is the wrong choice
An embedded feed slows down your page load time because it pulls external scripts and images from Meta’s servers. If your site relies on passing Core Web Vitals for search rankings and you’re already struggling with speed, adding a heavy widget will push your metrics further into the red. In that case, link directly to your Instagram profile using a simple text or image button instead.
If you only want to show a single promotional photo rather than a live stream of updates, don’t use a feed widget. Upload the image directly to your website’s media library and insert it like any normal picture. It loads faster and gives you full control over alt text for accessibility.
If you need to moderate every image before it appears publicly—for instance, on a school or corporate compliance site—a live automated feed is the wrong tool. You can’t filter individual posts easily once the API connection is live. Build a manual gallery where you upload approved screenshots yourself. Anything involving legal review of user-generated content should be handled by your compliance team, not an automated script.
Related guides
Frequently asked questions
Can I embed my Instagram feed without a plugin?
Yes, you can use a standalone HTML snippet from a third-party widget tool instead of a CMS plugin. You’ll copy the provided JavaScript code and paste it directly into your website’s HTML file or custom code block. This works on any platform that allows raw HTML.
Why is my Instagram feed not showing up?
A blank space usually means your access token has expired or the script is blocked. Reconnect your account in the widget dashboard to generate a fresh token. If that fails, check your browser’s developer console for script errors caused by ad blockers or conflicting plugins.
How long does the access token last?
Some long-lived Instagram user tokens expire after 60 days, but the lifetime and renewal process depend on the token type and provider. Most premium widget tools handle this renewal automatically in the background. If you’re using a basic or free tool, check the provider’s documentation to learn whether token renewal or manual reauthorization is required.
Is it safe to connect my account to a widget tool?
It’s safe when you use established providers that authenticate through Meta’s official OAuth window. You never type your Instagram password directly into the widget’s website. Stick to recognized tools and avoid obscure scripts that ask for your raw login credentials.
What happens if I change my Instagram password?
Changing your password immediately invalidates the access token held by your widget provider. Your website feed will break and show an error or blank space. You must log back into the widget dashboard and reconnect your account to restore the display.
Does the feed slow down my website?
Yes, embedding external scripts adds load time because the browser fetches data from Instagram’s servers. Using lazy loading or placing the script at the bottom of your HTML minimizes the impact. Expect a slight increase in total page load time depending on the number of images displayed.
How many posts should I display on my site?
Displaying between 6 and 12 posts is the standard range for most website layouts. Showing more than 20 images forces the browser to download unnecessary data, slowing down the page. Adjust the number based on your container’s width and your site’s overall length.
Do I need a business account for this?
Yes, Meta’s Graph API requires a business or creator account to authorize third-party widget tools. Personal accounts can’t generate the necessary access tokens. You can switch your account type for free inside the Instagram app settings under “Account type and tools.”
Start building your Instagram feed
Open your chosen widget provider’s dashboard and connect your business account right now to generate your first code snippet. Once you paste it into your site, you’ll see your latest images appear within a few seconds on the live page. If the preview area stays completely blank after clearing your browser cache, stop troubleshooting and contact the widget provider’s support team directly.
WRITTEN BY
Ryan Thomas
Ryan Thomas writes about online review management, covering review monitoring, customer feedback, ratings, negative reviews, and reputation building. His practical insights help businesses manage reviews effectively, strengthen customer trust, improve their online reputation, and turn feedback into opportunities for long-term growth.
View all posts →
