How to Embed Instagram Posts on a Website (Including WordPress)

Instagram posts need not remain on Instagram. After all, the point of an Instagram story, or photo, or video is to have it shared with as many people as possible, especially if you’re running a business. That’s why it’s important to learn how to embed Instagram posts on WordPress, or whatever website platform you use.

The opportunities are seemingly endless when it comes to republishing an Instagram feed, or just a few posts, to your blog or business website. Photographers can turn their feed into a beautiful portfolio. Online stores are able to feature and even sell products directly through an Instagram photo or feed. It’s also an option to embed individual Instagram posts on your blog, which is done on a regular basis for listicles and newspaper articles online.

So, what are you waiting for? Keep reading to learn more about the reasons to embed Instagram posts on your website, or skip ahead to your preferred method.

📚 Table of contents:

• Reasons to embed Instagram posts on WordPress
• Method 1: embed with custom HTML
• Method 2: embed an individual post with the direct Instagram link
• Method 3: embed your entire Instagram feed
• Method 4: embed Instagram posts with with a separate plugin
• Other Instagram embed plugins to consider

Here are just two examples of what Instagram embeds can look like:

Reasons to embed Instagram posts on WordPress

Besides the fact that Instagram embedding is rather simple, it also has a myriad of other benefits:

• It immediately adds new content to your website, whether that’s an ever-expanding feed of posts or a gallery with relevant pictures.
• You don’t have to work from multiple dashboards to publish that content, seeing as how everything from Instagram goes directly to your website.
• You can turn your Instagram feed into a beautiful gallery of photos, adding an artistic element to your site.
• Online stores and retail shops can link to products inside those Instagram images, essentially creating a visual online store.
• Instagram embeds indicate to customers that you have a social presence. More people may follow you and think about whether or not they can find you on other social networks like Facebook or Twitter.
• It gives people another area to find your best content and potentially share that content elsewhere.
• Users may spend more time on your website looking at Instagram photos. This could be the difference in convincing them to purchase something.
• If selling products, the Instagram photo puts your items in a different light, in the real world, and getting used by people.
• Visual artists are able to use Instagram posts as their portfolios.
• This opens up another customer support connection, as followers might reach out to you through Instagram.
• It’s a great way to show customers that your brand has a personality and there’s some fun to it!

Now that you know why it’s a great idea to embed Instagram posts, keep reading to learn how.

Method 1: embed with custom HTML

There are many reasons for embedding an individual Instagram post on your website. Online publications do it all the time when making listicles and roundups; think “The Best Christmas Presents for X” articles that pull suggestions from other company’s Instagram pages. (It’s also common to do this with Twitter and Facebook posts).

You also might want to share some news about your brand or a recent post from your own page to your blog or on a webpage.

If that’s the case, the process only takes a few steps.

To begin, locate an Instagram post you’d like to embed on your website. This could be one of your own posts or from another brand or person’s account; Instagram has no restrictions in this regard.

👉 Note: We highly recommend following copyright rules and only sharing images the legal and moral way.

Once you find the perfect Instagram post, click on the “…” settings icon for that particular post. Keep in mind that although this process is possible on a mobile device, it’s much easier to manage the links and embed codes on a computer.

This reveals a new popup area with several options.

Select the Embed button.

This module shows the embed code you’ll need to place the Instagram post on your website. You have the option to either include or remove the Instagram post’s caption.

Click on the Copy Embed Code button.

The button should change its text to read “Embed Code Copied!”

Now you have the embed code saved to your computer’s clipboard.

Go to the backend of your website. In this case, we’re using WordPress.

Open the post or page you’d like to edit.

Every website builder has its own way to embed HTML code; essentially you’re looking for an HTML editor or a drag-and-drop block to insert into your post or page.

In the WordPress Gutenberg editor, there’s a “+” button to add a new block to your content area. Click that.

There are a few options here: The Custom HTML block or the Instagram block. We’ll show you both methods.

To paste the entirety of your embed code into WordPress, select the Custom HTML block.

You’ll see a field asking you to “Write HTML…” This is where you’ll paste the code you copied from Instagram before.

Instagram embed codes are rather long. You don’t need to know what the coding means, but the following screenshot gives you an idea of what the editor looks like after you’ve pasted embed coding from Instagram into the WordPress Custom HTML block.

To proceed, either click on the Update or Publish button for that page or post.

To check if the embed code worked, go to the frontend of that page or post to see how it looks.

As you can see, our test site includes the original Instagram post from the business we wanted to highlight!

Method 2: embed an individual post with the direct Instagram link

WordPress, and many other website builders, offer drag-and-drop blocks for social media sites like Instagram.

Therefore, you don’t always have to copy and paste the more complicated HTML code to make this process work well.

For this method, all you need is the Instagram post’s direct URL/link.

Go to the Instagram post of your choice and click that “…” settings button.

This time, choose the Copy Link button (instead of the Embed button from the previous method).

Back in WordPress, navigate to a page or post.

Opt to insert a drag-and-drop design block. Search for the Instagram block.

Choose the one called “Instagram.”

This block is a bit simpler than the Custom Embed code option.

All you have to do is paste in the link you previously copied.

It looks something like the next screenshot, just like a standard webpage URL – nice and short.

To activate the embedded Instagram post, click on the Embed button.

What’s great about the Instagram block from WordPress is that it provides a preview of your embedded content in the backend editor.

You can also preview the page or post or click the Publish button and look for the results on the frontend.

Method 3: embed your entire Instagram feed

Another way to link Instagram to a website is by pulling your entire Instagram feed, essentially creating a dynamic content distribution area where everything that’s new from Instagram gets published to your site.

The Gutenberg editor from WordPress provides a simple block for showing your latest Instagram posts. There are also many other plugins to choose from if you’re looking for unique functionality or a different design.

In this method, you’ll learn how to insert your latest post using the WordPress Gutenberg editor. After that, we’ll cover plugin alternatives.

The idea is to pull all, or at least the recent, posts from the Instagram account you own, replicating the gallery layout you see on your Instagram page. This can be done for personal and business pages.

To start, go to the WordPress dashboard and create a page or post. It’s more common to include an Instagram feed on a page – especially a homepage – seeing as how that would keep the feed up there for as long as the page is published.

On the page or post, select the Add Block “+” button.

Search for the Latest Instagram Posts block. You can also scroll through the list of blocks to locate the right one.

Select the Latest Instagram Posts option.

The block gets dropped into the WordPress editor for you to modify.

The only option for this block is to click on the Connect to Instagram button.

Note: You must have full ownership of an Instagram account in order for this to work. You’re not allowed to share an entire Instagram feed if you’re not logged into that account, whether it’s for a personal or business account.

WordPress then tries to connect to your Instagram account in a new popup window.

Click on the Authorize button to indicate that you’d like to give WordPress access to your account. You may have to log into your separate business account if you only see the option to access your personal Instagram.

To finish the process, publish or preview the page.

Go to the frontend of that page to see the results.

There aren’t many settings to configure with the default Instagram Feed block from WordPress, but it provides a sleek gallery with your most recent posts.

Method 4: embed Instagram posts with a separate plugin

If all you need is to embed an individual Instagram post, there’s really no need to use a plugin; simply copy the embed code into a page or use the WordPress blocks included with the Gutenberg editor.

However, there are several plugins that improve upon the design and functionality of the Instagram Recent Posts block from WordPress.

We encourage you to explore the many plugins available, but for this tutorial, we’ll use the Smash Balloon Social Photo Feed plugin, a reputable solution with support for more than just Instagram feeds.

Install and activate the plugin on your WordPress site. If you have questions, read this guide on how to install a WordPress plugin.

Once Smash Balloon is activated in WordPress, go to Instagram Feed > Settings.

This walks you through the steps to configure your Instagram feed, customize it, and display it on your website.

👉 Note: You’ll notice some features are blurred out. You can unlock those features by upgrading to the premium Smash Balloon plugin.

Click the Connect an Instagram Account button.

Specify that you’re linking a Business account.

After that, push the Connect button.

This reroutes you to Facebook. Since Facebook owns Instagram many of the integrations go through Facebook first.

Select that you’d like to continue with your personal Facebook account.

Choose an Instagram Business account that’s linked to your Facebook profile.

Read our guide on Instagram Business accounts if you have any questions.

Next up, decide which Facebook Business page is linked to that Instagram Business account. Again, these connections must be set up prior to completing this process.

Moving forward, tell Facebook that Smash Social is allowed to access profile information like the insights and photos on your Instagram page.

The next module should explain that the Smash Balloon plugin is now linked to Facebook and Instagram.

Click the OK button to go back to WordPress.

Back in WordPress, check the Instagram Business account your decided on before.

Click on the Connect Accounts button.

Now your Instagram account is saved into the plugin.

Make sure to click on the Add To Primary Feed button. This tells the plugin that the account specified will be shown.

Select the Customize tab to change and activate settings.

We won’t go through all of these, but you have options to change things like the width of the feed, the background color, and more.

You can also modify the number of photos, columns, and how much padding shows between images.

As mentioned before, some features, like the unique layouts, require a premium subscription.

Click the Save Changes button whenever you adjust the settings.

Finally, click on the Display Feed tab to reveal the right shortcode.

Copy (Ctrl + C) that code to your computer’s clipboard.

Open a page or post in WordPress.

Click on the Add Block “+” button.

Locate the Shortcode block; select the block to insert it into your page.

Now, paste the shortcode from before into the Shortcode field provided.

Be sure to save the page.

You can then preview the page or click on the Publish button to see the results.

I only added three photos to this account, but as you can see the gallery shows up as planned!

What’s more, is that the design is a little more involved than the standard Instagram Recent Posts block from the WordPress Gutenberg editor.

In this one, you get a view of your profile photo, the name of the account, and a button for customers to visit your Instagram page.

Other Instagram embed plugins to consider

Remember, Smash Balloon isn’t the only plugin that does a good job of embedding Instagram posts and feeds.

Here are some other great plugins to think about:

• Social Feed Gallery By QuadLayers – Make galleries from multiple Instagram accounts and include all sorts of design settings like carousel displays and lightboxes.
• Photo Gallery by 10Web – This is a beautiful gallery plugin that offers integration with Instagram and support for video, images, and your entire feed.
• 10Web Social Photo Feed – Make an Instagram gallery and mix your feeds in one gallery. Add filters, scrolling, and social sharing buttons.
• WPZOOM Social Feed Widget – Add this widget in a sidebar or footer to incorporate a simple feed on all website pages.

Also, feel free to peruse our list of the best Instagram WordPress plugins.

Final thoughts on embedding Instagram posts

Have any questions about Instagram embeds? Ask away in the comments section!