IG Embed Code: How to Add Posts to Your Website

Image URL

AI summary

Learn how to embed Instagram posts on your website using manual or API methods. Manual embedding is quick for one-off posts, while the API is better for automated workflows. Ensure responsive design to avoid layout issues on mobile, and be aware of common pitfalls such as private accounts and URL tracking parameters. Always prepare for potential unavailability of embeds and consider using tools like Testimonial for managing social proof effectively.

Title

IG Embed Code: How to Add Posts to Your Website

Date

Apr 14, 2026

Description

Learn how to get and use the IG embed code for any public Instagram post. This guide covers manual and API methods, responsive design, and common errors.

Status

Current Column

Person

Writer

You’ve got a great Instagram post. Maybe it’s a customer showing your product in the wild, a short Reel that explains your value better than a paragraph ever could, or a testimonial you want on a landing page today.

The annoying part isn’t finding the content. It’s getting an ig embed code that works on your site, looks right on mobile, and doesn’t turn into a maintenance problem later.

There are two practical paths. One is fast and manual. The other is scalable and better for teams that want to automate galleries, testimonial walls, or campaign pages. Both work. The right choice depends on how often you need new embeds and how much control you want.

Why You Should Embed Instagram Content on Your Site

A static screenshot of an Instagram post loses the thing that made the post useful in the first place. An embed keeps the original context, links back to the source, and feels more credible because visitors can tell it came from a real account.

That matters when you’re using Instagram content as social proof. A buyer who sees a real customer post, product demo, or review on your site gets a cleaner signal than they do from a polished brand claim.

Instagram is big enough that this isn’t a niche tactic. It has 2 billion monthly active users, and 124,016 websites currently use Instagram Embed code according to BuiltWith Trends. The same source notes Instagram’s 4X higher engagement rate than Facebook, which helps explain why embedded content can keep visitors engaged longer on-site.

What embeds are good at

Showing real customer voice instead of rewriting every review into branded copy

Keeping pages fresh when the source post updates

Sending visitors to your Instagram presence without forcing your whole site to feel social-first

Reducing content bottlenecks for marketing teams that need visual proof fast

If you want to see how brands present multiple social posts in one place, a live Instagram wall example is a useful reference point.

The two methods that matter

Here’s the practical split:

Method	Best for	Trade-off
Manual embed	One-off posts, quick campaigns, non-technical teams	Repetitive if you need lots of posts
API oEmbed	Dynamic pages, automated workflows, custom tools	Requires setup and token management

The Simple Way to Get Your IG Embed Code Manually

If you just need a post live on a page, manual embedding is still the fastest path.

The process is desktop-first. According to Flockler’s guide to embedding an Instagram feed, the manual method is a 5-step desktop-only process. You open the public post, click the three-dot menu, choose Embed, then copy the code. The snippet includes a <blockquote> plus a <script> tag that loads Instagram’s embed.js, and this approach works reliably across platforms like WordPress and Shopify.

The exact flow

Open Instagram in a desktop browser.

Go to the public post or Reel you want.

Click the three dots in the top-right area of the post.

Choose Embed.

Click Copy embed code.

The code you copy usually looks something like this:

<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/POST_ID/">
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>

If you don’t see the Embed option, the usual reason is simple. The account is private, or embedding has been disabled for that post.

Where to paste it

Different CMS tools hide custom HTML in different places. These are the spots that usually work:

WordPress: Use a Custom HTML block in the block editor.

Shopify: Paste it into a custom liquid section or a theme section that accepts HTML.

Wix: Use an Embed Code element.

If you’re collecting customer videos and want a dedicated embed workflow, this video embed option shows the kind of placement marketers often use on landing pages.

A quick walkthrough helps if you’re doing this for the first time:

What manual embeds do well and where they fall short

Manual embeds are good when speed matters more than scale.

They’re not good when a team wants to rotate many posts, track what’s been added, or build a page that updates itself. You also get very little control over the appearance of the embedded post itself. You can control the container around it, but not redesign Instagram’s UI.

Programmatic Embedding with the Instagram oEmbed API

Manual copy-paste breaks down once you need a repeatable workflow. That’s when the API becomes worth the setup.

The useful part of Instagram’s oEmbed flow is that you don’t have to fetch and paste every embed by hand. Your app can request the embed HTML, store what it needs, and render the result on demand.

What you need before you start

For the native API route, the basic prerequisites are:

an Instagram Business or Creator account

a Facebook App in Meta for Developers

the right access token and permissions

a public post that allows embedding

If your team is already evaluating ways to connect social tools, a broader list of integration options helps frame where Instagram fits in your stack.

The request format

Instagram’s Graph API oEmbed endpoint uses a request in this shape:

https://graph.facebook.com/v{version}/{media-id}/oembed?access_token={token}

Per Instagram Help Center documentation, the JSON response includes an html property containing the iframe code, and the endpoint is subject to a rate limit of 200 calls per hour per user.

That tells you two important things right away:

You should cache responses instead of calling the endpoint on every page view.

You shouldn’t build a front-end that depends on live API calls for every visitor.

A working example

Here’s the shape of a server-side request:

const mediaId = "POST_MEDIA_ID";
const token = process.env.INSTAGRAM_ACCESS_TOKEN;
const version = "v19.0";

const url = `https://graph.facebook.com/${version}/${mediaId}/oembed?access_token=${token}`;

const response = await fetch(url);
const data = await response.json();

console.log(data.html);

And a typical response structure looks like this:

{
  "author_name": "account_name",
  "provider_name": "Instagram",
  "thumbnail_url": "https://...",
  "html": "

" }


The field you care about most is `html`. That’s the embed markup you render into your template or CMS output.

### The setup choice most teams miss

There are two sane ways to use this:

| Approach | Good fit | Risk |
|---|---|---|
| **Fetch on publish** | Marketing adds approved posts into a CMS | Simple and stable |
| **Fetch on page load** | Fast prototypes only | Fragile, rate-limited, slower |

I strongly prefer fetch-on-publish. A marketer selects a post URL, your backend requests the embed once, stores the HTML, and the frontend serves cached output. That keeps the page predictable.

> Don’t make your landing page wait on Instagram every time someone opens it.

### A simple rendering pattern

Render the returned HTML inside a wrapper you control:

```html
<div class="ig-embed-shell">
  <!-- data.html from the API goes here -->
</div>

That shell is where you handle spacing, max width, alignment, loading behavior, and fallback states. It’s also where you can show a graceful message if an embed becomes unavailable later.

This is the right method when you’re building a feed, a rotating gallery of customer posts, or any page where new Instagram content should appear without someone copying snippets by hand.

Making Your Instagram Embeds Responsive and Fast

The default embed code is rarely the final version you should publish.

Out of the box, Instagram embeds can misbehave on smaller screens. The practical fix is to wrap them in a container that controls width and height instead of letting the raw embed dictate layout.

Default Instagram embeds are not responsive, and that can lead to breakage on 70% of mobile traffic. The practical fix is a wrapper with CSS such as position: relative, padding-bottom: 110-130%, and width: 100%, as described in the earlier manual embed source.

A wrapper that works

Use this around your embed:

<div class="ig-embed-wrap">
  <div class="ig-embed-inner">
    <!-- Instagram embed code here -->
  </div>
</div>

.ig-embed-wrap {
  width: 100%;
  max-width: 540px;
}

.ig-embed-inner {
  position: relative;
  width: 100%;
  padding-bottom: 120%;
  overflow: hidden;
}

.ig-embed-inner iframe,
.ig-embed-inner blockquote.instagram-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

That gets you most of the way there. You may still need to tweak the padding value depending on whether you’re embedding a portrait post, a Reel, or a gallery.

If you want to compare this against other embeddable layouts, a set of website widgets is useful for visual benchmarking.

The speed fixes worth doing

Lazy load when possible: Don’t force every embed below the fold to load immediately.

Limit how many appear at once: A page full of social embeds can get heavy fast.

Cache API responses: If you use oEmbed programmatically, store the returned HTML.

Reserve space up front: Prevent layout shifts by giving the container a fixed ratio.

Common Pitfalls and How to Avoid Them

Most IG embed problems aren’t code bugs. They’re input problems, platform restrictions, or layout mismatches.

The first mistake teams make is assuming every Instagram URL is embeddable. It isn’t.

Problem patterns I see most often

Here’s a quick troubleshooting table:

Problem	Likely cause	Fix
Embed option missing	Private account or embeds disabled	Use only public content that allows embeds
Blank area or odd spacing	Iframe height mismatch	Wrap the embed and control the container height
Embed fails in a no-code builder	URL contains tracking parameters	Clean the URL before embedding
API request fails	Token or permission issue	Verify app setup and token validity
Page feels slow	Too many embeds loading at once	Lazy load and reduce simultaneous embeds

A commonly missed issue is that UTM parameters in an Instagram URL can break embed functionality in no-code tools like Foleon, and iframe height mismatches regularly cause visual bugs in forum reports, according to this write-up on Instagram embed issues.

Clean the URL before you do anything else

If someone pasted a shared link from a campaign tool or messaging app, strip it back to the canonical Instagram post URL before embedding it.

Good:

https://www.instagram.com/p/POST_ID/

Risky:

https://www.instagram.com/p/POST_ID/?utm_source=newsletter&utm_medium=social

That cleanup step solves many no-code failures.

Treat unavailable embeds as a normal case

Public posts can later become unavailable to your page. Accounts change settings. Posts get deleted. Content owners remove access.

Don’t hard-code your layout as if every embed will always load. Build a fallback container that can show:

A plain link to the original post

A thumbnail or placeholder

A short message for unavailable content

If you’re troubleshooting broader publishing issues, a set of practical tutorials can help teams standardize the workflow around content collection and display.

Frequently Asked Questions About IG Embeds

Can I customize the look of the embedded post

Not much. You can style the container around the embed, but you can’t redesign the post UI itself without abandoning the native embed.

Can I embed any Instagram post

No. Public availability matters. Private accounts and some restricted posts won’t give you a usable embed.

Do likes and views still belong to the original post

Yes. The embed points back to the original Instagram content rather than creating a separate copy on your website.

Should I use manual embed or API

Use manual when a marketer needs a post on a page quickly. Use the API when you need repeatable workflows, caching, moderation, or a larger gallery.

Why does the embed look broken on mobile

Usually because the default code was pasted in with no responsive wrapper. The fix is to control width and aspect ratio in your own container.

Is it okay to embed someone else’s post

If Instagram provides an embed for a public post, the platform supports that use. But context still matters. Don’t place someone’s content in a way that implies endorsement they didn’t give.

If your team wants customer stories on your site without chasing screenshots, broken iframes, or manual copy-paste every week, Testimonial is a clean way to collect, manage, and publish video and text testimonials in one place. It’s especially useful when marketing needs social proof that looks polished but still feels real.