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.
Here are just two examples of what Instagram embeds can look like:
Besides the fact that Instagram embedding is rather simple, it also has a myriad of other benefits:
Now that you know why it’s a great idea to embed Instagram posts, keep reading to learn how.
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!
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.
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.
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.
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:
Also, feel free to peruse our list of the best Instagram WordPress plugins.
Learning how to embed Instagram posts only takes the use of a simple embed code, a plugin, or a drag-and-drop website builder.
After that, you’ve successfully activated an Instagram feed or post on your website that’s interactive and useful for generating content well into the future.
Have any questions about Instagram embeds? Ask away in the comments section!
Grow your social media following and keep your followers engaged by sharing evergreen content from your WordPress website.
Despite its advancing age, Facebook is still a giant in the social media world. For online marketers, it’s particularly notable thanks to its robust advertising system. However, Facebook now offers so many options through the Facebook Ads Manager ...
Platforms like Facebook, Instagram, and Twitter have become ubiquitous in western culture, but there are always new platforms trying to rise to the surface. In this article, we’re going to examine some of the social media platforms that hope to ...
A "regram" is seen on a daily basis for many Instagram users - and many companies, or influencers, use regramming for high-quality, user-generated content. What's regramming? It's the act of using someone else's Instagram photo and resharing it on ...
Search Engine Optimization (SEO) isn’t just important on websites. It’s also crucial when it comes to your social media content. Social media profiles often rank above actual websites on search engines, so you want to make sure your profiles are ...
Here at Revive.Social, we believe in the power of data. We know automation works, and we know our Revive Old Post plugin is an effective way to automate your social media presence and boost high-quality content on your WordPress site. However, ...