> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Embed Instagram Post in Gutenberg

Step-by-step guide to embed Instagram Post in Gutenberg using the Custom iFrame WordPress plugin. No coding required.


## Overview

Custom iFrame lets you embed Instagram Post in Gutenberg by pasting any post link into the block. Display live social content, product photos, or announcements directly on your WordPress site.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

Using Elementor instead? Follow the [Embed Instagram Post in Elementor](/elementor/social/embed-instagram) guide.

## Requirements

- [Custom iFrame plugin installed and active](/getting-started/installation)
- WordPress with the Gutenberg block editor
- A public Instagram post URL to embed

## Step 1: Get the Instagram Post Link

<Steps>
  <Step title="Open Instagram and find your post" icon="instagram" title-type="p">
    Go to [instagram.com](https://www.instagram.com) and open the post you want to embed.
  </Step>
  <Step title="Copy the post link" icon="link" title-type="p">
    Click the **Share** icon on the post. Click **Copy Link**.
  </Step>
</Steps>

## Step 2: Install the Plugin and Add the Block

<Steps>
  <Step title="Install and activate the plugin" icon="download" title-type="p">
    Go to your WordPress dashboard. Go to **Plugins > Add New**. Search for **Custom iFrame by Coderz Studio**, click **Install Now**, then click **Activate**.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1777223431/getting-started/installation/Custom-iFrame-Installation.webp"
      alt="Custom iFrame for Elementor WordPress plugin by Coderz Studio showing 3000+ active installations on the plugin repository page"
      width="818"
      height="363" priority={true} fetchPriority="high" />
  </Step>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page or post where you want the Instagram embed. Click **Edit** to open the Gutenberg block editor.
  </Step>
  <Step title="Add the Custom iFrame block" icon="plus" title-type="p">
    Click the **Add Block** button and search for **Custom iFrame**. Click the block to add it to the page.
  </Step>
</Steps>

## Step 3: Embed Instagram Post in Gutenberg

<Steps>
  <Step title="Paste the Instagram post URL" icon="clipboard" title-type="p">
    Select the Custom iFrame block. In the **Source** field in the right panel, paste the Instagram post URL you copied. Your Instagram post appears inside the Gutenberg editor immediately.
  </Step>
</Steps>

## Step 4: Adjust Settings and Publish

**Height:** Set the iframe height to match the size of your post and page layout.

**Scroll Bar:** Enable or disable the scrollbar inside the embedded content.

**Refresh Interval:** Set how often the iframe refreshes. Useful if the post content updates.

**Smart Load:** Turn on lazy loading so the iframe loads only when it enters the viewport.

<Image
  src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776999091/gutenberg/social/instagram/basic-settings.webp"
  alt="Custom iFrame block settings panel in Gutenberg showing height, auto height toggle, scroll bar, and refresh interval options for Instagram embed"
  width="329"
  height="639" priority={true} fetchPriority="high" />

<Callout kind="success">
  Click **Update** or **Publish**. Your Instagram post is now live on your WordPress site.
</Callout>

Want to add a custom watermark (Pro), device frame (Pro), or full screen button? See the [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup) guide for all block options.

This guide showed you how to embed Instagram Post in Gutenberg using the Custom iFrame plugin. From copying the post link to pasting the URL and publishing, the setup takes only a few minutes.

## FAQ

<ExpandableGroup>
  <Expandable title="Do I need an Instagram account to embed a post?" default-open="false">
    No. You can copy the post link from any public profile without logging in. Posts from private accounts cannot be embedded.
  </Expandable>
  <Expandable title="What height should I use for an Instagram post?" default-open="false">
    Standard Instagram posts display well at 500px to 700px. Enable Auto Height to let the iframe resize automatically to the post content.
  </Expandable>
  <Expandable title="Why does the post show blank?" default-open="false">
    The post must be from a public account. Private profiles require a login and cannot be embedded. See [iFrame Not Showing](/troubleshooting/iframe-not-showing) for more help.
  </Expandable>
  <Expandable title="Can I embed Instagram Reels instead?" default-open="false">
    Yes. Copy the Reel link and paste it into the Source field. See the [Embed Instagram Reels in Gutenberg](/gutenberg/social/embed-instagram-reels) guide for details.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Embed Instagram Post in Elementor" href="/elementor/social/embed-instagram" icon="layers" horizontal={false}>
    Guide for the Elementor widget.
  </Card>
  <Card title="Embed Instagram Reels in Gutenberg" href="/gutenberg/social/embed-instagram-reels" icon="instagram" horizontal={false}>
    Embed Instagram Reels in the block editor.
  </Card>
</Columns>

## Related Guides

- [Embed Social Media in Gutenberg WordPress - Overview](/gutenberg/embed-social-media)
- [Embed Instagram Reels in Gutenberg](/gutenberg/social/embed-instagram-reels)
- [Embed X Post in Gutenberg](/gutenberg/social/embed-twitter-x)
- [Auto Height Adjustment](/features/auto-height)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)