Internet Explorer 9 and less are not supported. Please use a more recent browser.

How to Embed Your Instagram Feed On Your Website

If you use social media platforms such as Instagram, Facebook, Twitter, and Pinterest, you may already know they go a long way in helping you connect with your customers in a direct and personal way. But clients and customers might not be well acquainted with your social presence. Therefore, the smart way to build a massive online following is to embed Instagram feeds and other social media profiles to your website. In this article, we will explore how you can embed your Instagram feeds directly into your website. If you want to get your Instagram feed in a side bar, your home page, your footer, or a blog post (like this), then keep on reading!

Embed Instagram feed on website using HTML for free

Before we get into the step by step process of how to embed your Instagram feed in your website, it's important for you to know that this is totally free! We're using our own app, Curator.io, to walk you through this. On the free plan, you get 3 sources and feeds. Even better, there's no obvious branding so you don't have to be embarrassed by some software app's logo smeared all over your Insta feed.

Curator.io is an easy-to-customize aggregator that lets you pull from over a dozen sources. If you'd like to give Curator.io's free forever plan a spin

Step 1: Choose an Instagram business account or hashtag

When you add an Instagram feed to your website, you have a couple of different options. (You can even add social media content from other platforms, but we'll save that for another post!) You can choose to curate an Instagram feed made up of your Instagram business account, or a few different hashtags. For this tutorial, we'll go with an Instagram business account. You just sync in via Facebook and select the associated Instagram business account you want to use.

Step 2: Curate your feed

Next up, it's time to curate your feed. You can remove the images that you don't want showing up in the feed you'll embed on your website. You should also update the settings for automatic curation. Do you want everything to be automatically approved to show up on your site? Or do you want to have to greenlight each image?

Step 3: Design your feed

The next step is to update the design of your feed. You can choose from our pre-set designs that include different ways of portraying the captions. Some designs let you hover over the image to see the captions, while others put the caption below or next to the image. If you want, you can even upload your own custom posts to your feed. Yup, these are images that you didn't upload on Instagram. You might want to do this if you're promoting a product or a freebie offer.

Step 4: Copy the HTML code into your site

Finally, it's time to embed the HTML code into your website. Just hit "Get code" and then "Copy to clipboard." Then you can paste it wherever you want: a section of your home page, a blog post, a landing page, or even the sidebar of your blog post. Let's go ahead and add it to the sidebar. To do embed the Instagram feed HTML code into Wordpress (for free!), we just need to drag and drop a Custom HTML widget over. Next we paste the HTML code from Curator.io over to the Custom HTML content box. There's no need to add a title, unless you want to. You could write something like, "The latest Instagram posts" or anything creative you can think of.

Step 5. Admire your Instagram feed in your website

And it's done! Here's what the feed looks like in the sidebar of a blog. This style puts the caption right below the image and it moves through the posts in an automated slider. It's a very engaging and eye-catching addition to your blog! But of course, if you prefer a simpler look, you can create a grid style where the captions don't show unless you hover over them, like this example feed:

Curator.io is an easy-to-customize aggregator that lets you pull from over a dozen sources. If you'd like to give Curator.io's free forever plan a spin

Other Instagram embedding methods

While the above is the simplest and easiest way to embed Instagram feeds on your website, there are other ways to do this too. Maybe you want to embed individual posts, or try other methods for feed embeds, or write your own custom code to create a feed.

Individual posts

You may want to embed individual posts to your website. While this is easy to do, it can be cumbersome in the long run, because you have to keep on embedding to particular posts. In other words, if you would like this embed to display the most recent post, then you’d need to move back and edit your embed whenever you create a new Instagram post. For most people, who post on a daily basis, this would be a lot of trouble for not much value. Embedding an individual post is easy. Simply navigate underneath the post, and you will notice a […] button. Proceed to click this button, and you will see several options, including embed. Tap embed. Copy the code that will appear. Next, paste it in your WordPress blog post, and it will automatically convert into an embed. You are done! The process is that simple. You may also add extra parameters such as specifying the width of the post, hiding the captions of the post and display just the image with Instagram’s frame trappings.

Feed plug in options

Instagram does not offer a single box plugin to help you display content from your account. Therefore, to embed your Instagram feeds or entire Instagram profile, you will need to use third-party plugins. Instagram feed plugins work by allowing you to enter your Instagram account ID and then displaying a gallery of your recent posts. This includes your latest photos, a page, and the sidebar area of your website.

Curator.io

Curator.io is one of the most popular Instagram feed embed tools. Most people like it because it covers several social networks all at once. Curator.io works with Twitter, Facebook, Instagram, YouTube, LinkedIn, Hashtag feeds, and more. You don't have to do numerous feeds either. Curator.io will let you aggregate all of the different sources into a single embedded feed. In other words, you do not need to have your RSS feeds, Twitter, Facebook, Instagram feeds, and others in different locations and format. You use a single central feed instead. Using a single feed is more convenient for you and your site visitors. Otherwise, you're looking at a cluttered site that's not pleasant for anyone. Curator.io offers free versions as well as paid versions. Using the free version, you can still access content from various social media platforms all at once and even filter by hashtag. However, the advantage of the paid version is that get more customization options, refined filtering and many other features you will find useful. You can start with the free version and once you see the benefits, you'll likely want to upgrade for even more engagement with your Instagram feed and other social feeds.

Curator.io is an easy-to-customize aggregator that lets you pull from over a dozen sources. If you'd like to give Curator.io's free forever plan a spin

SnapWidget

SnipWidget isn't just a single widget, but a variety of widgets you may consider to embed posts in several ways. Some of its unique features include:
  1. A simple grid widget that helps display image thumbnails, which as users hover over them, you will see likes as well as replies to the particular post in question. This is fun and interactive.
  2. The second feature that may interest you is the scrolling widget. This feature helps showcase a few selected posts in a line. The posts scroll at your specified rate and only stop if a user hovers over a post, so that they can tap to visit the source. Think of it as a slider on your site's homepage, but with social media posts.
  3. The map widget displays geotagged posts on a Google map. And this can come in handy if you travel a lot, and you would want to showcase several posts from various places you have been to all at once. Just like Curator.io, it offers a free version, but you can go for a premium version to access custom CSS, more marketing options and built-in analytics.
As you can see, there are several options and features to choose from. EmbedSocial EmbedSocial is also a series of plugins. Perhaps you may have come across some of them, such as EmbedStories, EmbedFeed, EmbedAlbum and EmbedReviews. With the free version, you can access, aggregate and create up to ten Instagram albums or Facebook albums. However, if you are looking to increase the number of data sources or turn your gallery into a shop, then you may consider a premium version.

Custom Code

If you are tech savvy and you can code, you may also consider writing a plugin code yourself. You will need to apply for a token for authentication allowing you to access the Insta API (and this where things get tricky for most programmers). To begin with, following several privacy breaches, Instagram is in the process of changing their API. There is an accelerated plan to drop their API in favor of Facebook Graph API. The potential outcome you should expect from this move is getting rid of ID which enabled you to aggregate photos from other users. One issue with creating your own plugin is you'll also be required to update it yourself as Instagram makes changes. With every change, your Instagram feed will become unavailable until you're able to update the code. Doing this and applying again could take days or weeks, which leaves site visitors thinking your site is incomplete. If you don't want to do it yourself, you can hire someone to create an Instagram embed plugin for you. This works well for custom websites or when you need a highly customized look and feel for your embedded Instagram feed.

Benefits of Adding Instagram Feeds

The options for embedding Instagram feeds above do vary in difficulty. However, choosing the right one or even the right combination is beneficial for your brand. Becoming an authority in your niche is crucial for gaining more organic traffic. Embedded Instagram feeds showcase your expertise on your website. For people who may not be on Instagram, this offers additional exposure to your expertise. Think of it as additional site content. Giving your visitors more is always a great idea. Plus, you're increasing the visibility of your Instagram posts. While Instagram's daily active user base is substantial, it's still not as huge as its parent company, Facebook, which has over a billion daily active users. Some of the biggest benefits of embedded Instagram feeds include:
  • Creating a seamless experience between Instagram and your website.
  • Bring user-generated content from Instagram straight to your site.
  • Providing social-proof.
  • Displaying your social media presence.
  • Encourage more conversation.
  • Get involved in trends.
  • Give your website a beautiful update.
Embedded Instagram feeds are only effective, though, if you stay active on the platform. Don't forget, you can also embed more than just your own personal feed. Use hashtags to also embed feeds mentioning your brand. Just make sure you monitor posts to avoid irrelevant posts. Ready to start bringing your Instagram and website followers together?

Curator.io is an easy-to-customize aggregator that lets you pull from over a dozen sources. If you'd like to give Curator.io's free forever plan a spin