View Categories

How to Embed Instagram Post in WordPress (Gutenberg)?

Table of Contents

With Custom iFrame, you can embed an Instagram post in WordPress and display live social content, product photos, or announcements directly on your site.

If you are using Elementor, follow this guide: How to Embed Instagram Post in Elementor

Quick Summary

Step-by-step guide to embed an Instagram post in WordPress.

1. Copy the Instagram post link.
2. Install and activate the Custom iFrame plugin.
3. Open your page in the Gutenberg block editor and add the Custom iFrame block.
4. Paste the Instagram post URL into the Source field.
5. Adjust settings and customize the display.
6. Save and publish your page.

Step 1: Get the Instagram Post Link

  1. Open Instagram at https://www.instagram.com/.
  2. Navigate to the post you want to embed.
  3. Click the Share icon on the post, then click Copy Link.

Step 2: Install the Custom iFrame Plugin and Add the Block

  1. Go to your WordPress dashboard.
  2. Navigate to Plugins, then Add New.
  3. Search for “Custom iFrame by Coderz Studio” and press enter.
  4. Click Install Now, then click Activate.
This image shows the WordPress plugin “Custom iFrame for Elementor – Embed Pdf, Maps, Videos, & Websites Easily” by Coderz Studio. It allows secure, SEO-friendly, and responsive iFrame embedding in Elementor with features like lazy loading, auto-height adjustment, and dynamic URL support. The plugin has a 5-star rating from 4 reviews, over 3,000 active installations, and is marked compatible with the current WordPress version.
  1. Open your page in the Gutenberg block editor.
  2. Click the Add Block button and search for Custom iFrame.
  3. Click the Custom iFrame block to add it to the page.

Step 3: Embed Instagram Post in WordPress

  1. Select the Custom iFrame block on your page.
  2. In the Source field, paste the Instagram post URL you copied earlier.

Your Instagram post will appear inside the Gutenberg editor immediately.

Step 4: Adjust Settings & Publish

Once the Instagram post is embedded, you can configure the display settings in the Gutenberg block panel.

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: Enable lazy loading so the iframe loads only when it enters the viewport.

Custom iFrame display settings panel showing options for height, auto height toggle, scrollbar visibility, and refresh interval—illustrating how to optimize embedded content with lazy load and dynamic sizing in WordPress Gutenberg.

Want to add a custom watermark, device frame, or full screen button? Check out the advanced options in our Complete Custom iFrame for Gutenberg Guide.

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

This guide showed you how to embed an Instagram post in WordPress using the Custom iFrame plugin. From copying the post link to configuring the iframe and publishing, the setup takes only a few minutes.