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 guide.

Requirements

Custom iFrame plugin installed and active
WordPress with the Gutenberg block editor
A public Instagram post URL to embed

Step 1: Get the Instagram Post Link

Open Instagram and find your post

Go to instagram.com and open the post you want to embed.

Copy the post link

Click the Share icon on the post. Click Copy Link.

Step 2: Install the Plugin and Add the Block

Install and activate the plugin

Go to your WordPress dashboard. Go to Plugins > Add New. Search for Custom iFrame by Coderz Studio, click Install Now, then click Activate.

Custom iFrame for Elementor WordPress plugin by Coderz Studio showing 3000+ active installations on the plugin repository page

Open your page in the block editor

Go to the page or post where you want the Instagram embed. Click Edit to open the Gutenberg block editor.

Add the Custom iFrame block

Click the Add Block button and search for Custom iFrame. Click the block to add it to the page.

Step 3: Embed Instagram Post in Gutenberg

Paste the Instagram post URL

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 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.

Custom iFrame block settings panel in Gutenberg showing height, auto height toggle, scroll bar, and refresh interval options for Instagram embed

Click Update or Publish. Your Instagram post is now live on your WordPress site.

Want to add a custom watermark (Pro), device frame (Pro), or full screen button? See the Set Up Custom iFrame in Gutenberg 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

No. You can copy the post link from any public profile without logging in. Posts from private accounts cannot be embedded.

Standard Instagram posts display well at 500px to 700px. Enable Auto Height to let the iframe resize automatically to the post content.

The post must be from a public account. Private profiles require a login and cannot be embedded. See iFrame Not Showing for more help.

Yes. Copy the Reel link and paste it into the Source field. See the Embed Instagram Reels in Gutenberg guide for details.

Also Available For

Embed Instagram Post in Elementor

Guide for the Elementor widget.

Embed Instagram Reels in Gutenberg

Embed Instagram Reels in the block editor.

Was this page helpful?

Last updated today

Built with Documentation.AI