How to Embed an Instagram Post in HTML

Embedding an Instagram post directly into your website is a powerful way to add dynamic, visual content that keeps your audience engaged. Instead of just linking out, you can bring your social proof, user-generated content, and beautiful brand visuals right onto your blog or homepage. This guide will walk you through the simple process of embedding an Instagram post in HTML, show you some handy customization tricks, and cover a few best practices to make a real impact.

Why Bother Embedding Instagram Posts?

You might be wondering, "Why not just take a screenshot or link to my profile?" While those options work, embedding offers several unique advantages that can boost both your website and your social media presence. It’s about working smarter, not harder, to get more value from the content you’re already creating.

Bring Your Website to Life with Dynamic Content

Static websites can feel a little dated. Embedded Instagram posts inject life and timeliness into your pages. A feed of your latest posts on your homepage shows that your brand is active and current. It’s an effortless way to keep your content fresh without having to constantly update your website’s code or CMS.

Build Powerful Social Proof

When customers post about your products or services, their words carry incredible weight. Embedding these user-generated content (UGC) posts directly onto your product pages or testimonials section is one of the most effective forms of social proof. It shows potential customers that real people love what you do, building trust and credibility in a way no marketing copy ever could.

Increase Engagement and Grow Your Following

An embedded post isn’t just a static image, it’s an interactive window into your Instagram profile. Visitors can like the post, read the comments, and most importantly, click through directly to your Instagram profile to follow you. You're essentially creating a direct bridge from your website traffic to your social media community, making it easier for site visitors to become loyal followers.

Reuse Your Best Content Effortlessly

You work hard to create amazing content for Instagram - stunning photos, engaging Reels, and thoughtful carousels. Embedding allows you to get more mileage out of that work. You can feature a popular post in a blog article, showcase a video reel on a relevant service page, or build a portfolio of your best work, all without recreating the content.

How to Embed an Instagram Post: The Step-by-Step Guide

Instagram makes embedding incredibly straightforward. You don't need to be a coding genius to get this done. Just follow these simple steps, and you'll have a live post on your site in minutes.

Step 1: Find the Post You Want to Embed

First, open Instagram in your web browser (not the mobile app) and navigate to the specific post you wish to embed. This can be a photo, a carousel, or a Reel from your profile or any other public profile.

Step 2: Access the Embed Menu

Once you're on the individual post's page, look for the three dots (...) icon. It’s typically located in the top-right corner of the post, next to the username. Click on the three dots to open a menu of options.

Step 3: Select "Embed" and Copy the Code

From the dropdown menu, click on the "Embed" option. A pop-up window will appear containing a block of HTML code. You'll see an option to "Include caption." For now, leave it checked.

Click the "Copy Embed Code" button. This action copies the entire HTML snippet to your clipboard.

Step 4: Paste the Code into Your Website’s HTML

Now, go to the page or post on your website where you want the Instagram post to appear. Whether you're using WordPress, Squarespace, Webflow, or a custom-built site, you'll need to access a block or editor that accepts raw HTML.

• In WordPress, add a "Custom HTML" block and paste the code inside.
• In Squarespace, use a "Code Block."
• In a plain HTML file, simply paste it where you want it in the <,body>, of your page.

Save or publish your page, and that's it! Your Instagram post will now be visible and fully interactive on your website. The post will automatically adjust its size to fit the container it's in, making it responsive by default.

Understanding and Customizing the Embed Code

Now that you know how to embed a post, let's look closer at the code itself. Understanding its parts gives you the power to customize how it looks and behaves.

The code you copied is made of two main parts:

1. The <,blockquote>, element: This is the container for the post itself. It includes all the information about the post, like its permalink and caption data.
2. The <,script>, tag: This little piece of JavaScript is what actually renders the interactive post. It finds the <,blockquote>, on your page and transforms it into the visually rich embed. Good news: you only need to include this script once on any given page, even if you’re embedding ten different posts. Most systems are smart enough to manage this, but if you're manually coding, it's good to know.

How to Hide the Caption

Sometimes, all you want is the visual. A grid of Instagram photos on your homepage, for example, might look cleaner without the lengthy captions underneath. Hiding the caption is incredibly simple.

Look inside the <,blockquote>, tag for this piece of code: data-instgrm-captioned.

Simply delete that attribute and save your page. The post will now appear without its caption, giving you a much more streamlined look.

Before (with caption):

<,blockquote class="instagram-media" data-instgrm-captioned ...>,

After (without caption):

<,blockquote class="instagram-media" ...>,

This one tweak is perfect for creating photo galleries or lookbooks on your site.

Controlling the Size and Alignment

The standard embed is responsive, which is great, but what if you want more control? The best way to manage its placement and size is by wrapping it in a <,div>, container. This lets you apply your own CSS without messing with Instagram's code.

For example, to center the post and give it a maximum width of 400px, you could do this:

HTML:

<,div class="custom-instagram-embed">,
<,!-- Paste the Instagram blockquote code here (without the script tag) -->,
<,blockquote>, ... <,/blockquote>,
<,/div>,
<,!-- Put the script tag at the end, just once is fine -->,

CSS:

.custom-instagram-embed {
max-width: 400px,
margin: 0 auto, /* This centers the container */
padding: 1rem 0,
}

By using your own <,div>,, you can easily integrate the post into any layout, whether it's part of a two-column design or a free-form layout.

Best Practices for Embedding Like a Pro

Embedding content is technically simple, but doing it strategically can make all the difference.

Always Get Permission for UGC

Although Instagram's terms allow for embedding public posts, it's a matter of ethics and good business to get permission before featuring someone else's content on your commercial website. If a customer posted a great photo of your product, send them a quick DM asking if you can feature it on your site. They’re usually thrilled to be featured, and it protects your brand while building goodwill with your community. User-generated content is a goldmine, so treat its creators with respect.

Mind Your Page Speed

Each embedded post adds an external request to your page, which can slow down loading times. While one or two embeds are usually fine, a page with 20 of them might feel sluggish. Be mindful of performance. Consider placing embeds further down your page ("below the fold") so they load after the most important content has already appeared.

Provide Context

Don’t just drop an embed onto a page without explanation. Tell your audience why it's there. Frame it with an introduction and a conclusion. For example, if you embed a customer review post, add a heading like, "Here’s what our customers are saying." If it's a tutorial Reel, explain what your viewers will learn. Context turns a simple embed into a valuable piece of content that supports your message.

Final Thoughts

You now know how to embed an Instagram post in HTML, customize its appearance, and use it smartly to enrich your website. This simple technique bridges the gap between your social media presence and your primary brand platform, helping you build social proof, keep your content fresh, and grow your audience seamlessly.

Once you’ve mastered pulling your top posts onto your site, keeping that content calendar full and consistent across platforms is the next challenge. We built Postbase to make social media management feel less chaotic. With our visual planner, you can schedule everything - from Instagram Reels and TikTok videos to YouTube Shorts - all in one place. That way, you can focus on creating great content while we handle the heavy lifting of getting it published reliably.