How to Embed an Instagram Feed on Your Website (No Coding)

Your Instagram profile is likely one of the most active and visually compelling parts of your brand's online presence. You spend time crafting photos, writing captions, and building an engaged audience—but the moment someone visits your website, that content is completely invisible to them.

Embedding your Instagram feed on your website bridges that gap. It keeps your site fresh with new content automatically, strengthens your brand's visual identity, and gives visitors a reason to follow you. The question is how to do it without breaking your site, violating Instagram's API terms, or spending an afternoon wrestling with embed code.

Why You Should Embed Your Instagram Feed on Your Site

Beyond aesthetics, there are three concrete business reasons to display your Instagram feed on your website:

1. Social proof without extra effort. User-generated content and brand lifestyle images on your site tell a story that stock photography never can. Visitors who see an active, curated Instagram feed develop more confidence in your brand.
2. Automatic content freshness. Every time you post on Instagram, your website updates itself. This reduces the burden of manual content management and gives Google's crawlers something new to index.
3. Cross-channel audience growth. Visitors who land on your website may not follow you on Instagram yet. An embedded feed with a "Follow" button is the most frictionless possible conversion point.

Method 1: The Manual Way (Using Instagram's Native Embed Code)

Instagram provides a basic native embed feature that lets you embed individual posts as iframes. Here's how it works:

1. Open the Instagram post you want to embed in a browser.
2. Click the three-dot menu (⋯) in the top-right corner of the post.
3. Select "Embed".
4. Copy the provided <blockquote> and <script> HTML snippet.
5. Paste it into the HTML of your webpage.

Pros

• Free and requires no third-party tool.
• Post stays in sync with the live Instagram post (likes, comments).

Cons

• One post at a time only. There is no native way to embed a full, auto-updating grid.
• Design is fixed. You cannot customize colors, layout, or card style.
• Performance cost. Each embed loads Instagram's script, which adds third-party requests and can slow your page.
• Mobile responsiveness is inconsistent. Native embeds often break on smaller screens.

For a single promotional post, the native embed is fine. For a live, branded Instagram feed, it falls short.

Method 2: The Smart Way (Using a Customizable Instagram Widget)

A dedicated Instagram Feed Widget handles the heavy lifting: it connects to Instagram's official API, pulls your latest posts, and renders them in a fully customizable layout that matches your brand.

With WidgetJar, the process takes under two minutes:

1. Sign up at widgetjar.com and create a new widget.
2. Connect your Instagram account via the official Meta OAuth flow — no passwords shared, no third-party access to your credentials.
3. Choose your layout: Grid, Masonry, or Slider.
4. Customize the design: set card border radius, number of columns, caption visibility, and color theme.
5. Copy the embed snippet and paste it into your website.

Your feed updates automatically every time you post to Instagram. No maintenance required.

Platform-Specific Guides

Adding Your Instagram Feed to WordPress

If you are using WordPress with the Gutenberg block editor:

1. Open the page or post where you want to add the feed.
2. Click the + block inserter and search for "Custom HTML".
3. Paste your WidgetJar embed snippet into the Custom HTML block.
4. Click Preview to confirm the feed renders correctly, then Publish.

For classic (TinyMCE) editor users, switch to the "Text" tab and paste the snippet in your desired position within the page content.

Adding Your Instagram Feed to Wix

Wix does not natively support arbitrary HTML embeds on free plans, but the Wix Editor's HTML iframe element works on paid plans:

1. Open the Wix Editor for your site.
2. Click "+" → "More" → "HTML iFrame".
3. Click "Enter Code" and paste your WidgetJar embed snippet.
4. Resize the iframe container to fit your layout.

Adding Your Instagram Feed to Shopify

1. In your Shopify Admin, go to Online Store → Themes → Edit Code.
2. Open the template file for the page where you want the feed (e.g., index.liquid for your homepage).
3. Paste your WidgetJar embed snippet in the desired location.
4. Click Save and preview your store.

Alternatively, if your theme supports app blocks, you can add the embed via the Customize editor under Theme → Add Section.

Adding Your Instagram Feed to Any HTML Site

Paste the embed snippet into the <body> section of your HTML file at the position where you want the feed to appear. That's it.

<!-- WidgetJar Instagram Feed -->
<div data-widgetjar-id="your-widget-id"></div>
<script src="https://cdn.widgetjar.com/wj-assets/embed.js" defer></script>

Customization Tips: Sliders, Grids, and Hiding Captions

Once embedded, WidgetJar gives you real-time control over your feed's appearance without touching code:

• Grid Layout: Ideal for portfolios, photography brands, and ecommerce. Displays posts in a uniform 2, 3, or 4-column grid.
• Masonry Layout: Posts display in varying heights based on the original image dimensions—great for editorial and lifestyle brands.
• Slider / Carousel Layout: Perfect for hero sections where you want posts to scroll horizontally. Works well on mobile.
• Caption Visibility: Toggle captions on or off. Hiding captions creates a cleaner, more visual-first experience.
• Profile Header: Optionally display your profile picture, handle, and follower count at the top of the widget.

---

Ready to Show Off Your Feed?

Your Instagram content is too good to be locked inside Instagram. Bring it to your website in minutes with a fully customizable, auto-updating Instagram Feed Widget.

Create your free Instagram Feed Widget with WidgetJar →