How to embed an instagram feed


How to Embed Instagram Feed on Any Website

Many brands and especially their customers, are glued to the Instagram app. According to the latest statistics, there are more than 200 million businesses on Instagram. A whopping 1 billion Instagram users open the app to watch Stories from friends, influencers, and brands.

With numbers like that, it’s easy to see why brands and organisations are keen to embed an Instagram feed on any website or digital service they have in place.

Embedding an Instagram feed on your website drives traffic to your account and buids engagement. The algorithms of Instagram favour the most engaging content (and ads), and it might be difficult for any business to stand out from the crowd. That’s one of the key reasons why your marketing team should take full advantage of all assets you’ve already created for social – your websites and other applications are a great source of Instagram traffic to your profile and follower growth. Your current customers might not follow you on Instagram just yet, and a live-updating Instagram feed increases your credibility in the eyes of new visitors.

With the Instagram embed, you can immediately add social proof and increase conversions on your website, too. Many companies are mentioned on Instagram, or they’ve got a branded hashtag for feedback and reviews. Adding user-generated content and customer reviews from social media builds trust and makes it easier to purchase your products and services.

With Flockler’s Instagram widget, embedding an Instagram feed on any website takes a few minutes and you don’t need to be a developer to do it.

A bit further down in this article, you’ll find instructions for some of the most popular website and webshop building tools like Shopify, WordPress, Squarespace, and more. Still, Instagram feeds are easy to embed on any website and digital service.

Embedding an Instagram feed on any website

If you want to embed just a handful of posts and not change them too often, Instagram’s HTML embed code will be the right choice. Here’s how to embed an Instagram post on any website:

  1. Log in to Instagram on your desktop.
  2. Open the URL of the Instagram image you’d like to embed on your website.
  3. Click the three dots on the top right corner of the image and then select 'Embed'.
  4. Copy the Instagram HTML and embed it on any website like WordPress.
  5. An Instagram image will show up on your website.

However, if you want to display an Instagram feed and keep it updated with fresh content without manual work, then a social media aggregator like Flockler is something you should look into. With Flockler, you can gather and display Instagram feeds with multiple ready-made display layouts – you can even add content from other social media channels and mix them with images and videos from Instagram.

But here, we’ll focus on Instagram and how brands display Instagram on websites.

Accor Hotels embeds Instagram feeds on their websites.

Here’s a six-step guide on how to embed an Instagram feed on any website:

  1. Create a free Flockler account
  2. Connect an Instagram account
  3. Select any Instagram Business account or a hashtag feed
  4. Design your Instagram feed
  5. Moderate your Instagram feed
  6. Embed an Instagram feed on any website

1.

Create a free Flockler account

Start by creating a free Flockler account for your Instagram feed. Flockler has a 14-day free trial with the entire product without ads or visible Flockler branding. You don’t need a credit card when signing up, and you can use the free version just like the full product. Check the list of Flockler’s features available in the free trial version.

2. Connect an Instagram account

After signing up for your account, Flockler’s bot will welcome you and ask you to choose your first channel. Select Instagram and then connect your personal Facebook account.

You can connect any Facebook account with access to one Instagram Business account. After that, you can choose to show images and videos from your organisation, another company, or by a hashtag.

Why is a personal Facebook account connected? Facebook and Instagram have recently decided that accessing the Instagram feed of any business, or creating a hashtag feed gathering posts by any Instagram account, requires a log in to a personal Facebook account. That account needs to be an admin of at least one Facebook Page and Instagram Business account.

Flockler doesn’t store or show any of your personal data from Facebook or Instagram. After you’ve logged in with your Facebook account, you can choose what content Flockler is supposed to display. See the next step for more details.

3. Select any Instagram Business account or a hashtag feed

You might have been using Instagram feed plugins for WordPress like Smash Balloon in the past and noticed that you could only embed an Instagram feed from the company that you administrate. That can be very troublesome if only selected team members have access to company social media accounts, your company has multiple IG accounts (e.g., from different countries), or you are working for an agency and only assisting the brand in setup. What a nightmare.

But with Flockler, you can connect one Business account and then display posts by any other Business account!

As long as you have access to at least one Instagram Business account, you can create an Instagram feed showing posts from another company. You can even add multiple companies and show them all in one place.

After connecting your account, choose to gather an Instagram feed from any business, a hashtag feed, or mentions of your business.

In the video below, I logged in with my personal Facebook account and gathered The European Central Bank’s Instagram posts. It goes without saying that I’m not an admin of their account. After connecting my Facebook account (I’m an admin of Flockler), I can pick any Instagram Business account to display. No hassle with passwords or admin rights!

Ready to try it out yourself? Sign up for a 14-day free trial with Flockler and show an Instagram feed of any company on websites and other digital services.

But it's about more than just Instagram feeds, you can use Flockler to gather and embed:

  • Instagram hashtag feeds
  • Mentions of your Instagram business account
  • Instagram Stories of your business

With Flockler’s Instagram feed aggregation tools, you can gather content from multiple accounts and add hashtag feeds. How they show up on your website is described in the next two steps.

4. Design your Instagram feed

Previously, you might have created an Instagram feed with tools like Taggbox just to notice a bit later that they limit the number of Instagram widgets you can create under the subscription. That can be very frustrating – you might have multiple websites, page layouts, and other digital services where the Instagram feed fits perfectly.

But with Flockler, the number of widgets showing your Instagram feed is unlimited!

You can create Walls, Grids, Carousels, and Slideshows displaying the feed – you can create as many as you like and you can even customize the look & feel for every page if needed.

Select the layout for your Instagram feed. You can create as many as you like and customize them for each page.

After selecting your layout, you can customize the Instagram feed design from each embed code’s settings. You can, for example, change the number of posts shown, hide elements, change the colour theme, and much more. If you’d like to customize the look & feel even further, Flockler’s support team is happy to help (free of charge!).

France.fr has embedded a colourful Instagram feed on the website.

One of the hidden gems of Flockler’s Instagram feed aggregator is tag filtering. Once you’ve gathered all of the content from one or multiple accounts, you can further filter the content based on a hashtag mentioned in the post. For example, you might want to display only Instagram posts tagged with a specific product or service that you provide. Or perhaps, you are running an event or hashtag campaign, and a specific landing page could have a custom Instagram feed.

You can create as many Instagram feed embeds as you like without any restrictions on the number of page views, domains, or services.

Learn more about the tagging and filtering of social media feeds.

5. Moderate your Instagram feed

Using a simple Instagram feed widget can be helpful if you are not looking to moderate the feed or show multiple Instagram accounts and hashtag feeds. However, most brands need advanced tools to hide unwanted posts and categorize their feeds for different campaigns, geographical locations, and use cases.

With Flockler, you can categorize Instagram feeds in sections. Sections are like folders where you can store one or multiple Instagram account feeds and content by hashtags. Each section can be displayed separately, or you can combine multiple sections in one layout.

In this video, I’ll walk you through the categorization of Instagram feeds:

A typical Flockler customer has a section for the homepage feed, often categorized in multiple languages and for various business areas. And to add to that, many customers organise hashtag campaigns on Instagram or run events throughout the year – each of them will have a dedicated section on Flockler, and customers use the unlimited layouts to show feeds across all digital services.

Depending on the section, you might have a different preference for moderation. For example, your own Instagram feeds might not need too much moderation and simply hiding the unwanted images and videos, pinning the relevant content to stay on the top, and the ability to change the order of posts are sufficient features.

If you are gathering Instagram hashtag feeds, you might want to review everything before displaying it on your website. That’s when the 'Inbox' feature of Flockler comes in handy.

You can set the automatically updating Instagram hashtag feed to be stored in the 'Inbox' – simply click the 'Publish' link or drag n drop the image/video to the right to approve any content. Anything you move to the right will instantly display on your website's Instagram feed. You can click the 'hide' icon to remove anything that was added by mistake.

A hybrid moderation strategy is to let all content be shown automatically but use the blacklisting tools of Flockler to block specific usernames and keywords. With blacklisting, you can automatically remove bots and other users mentioning your hashtag in an undesirable manner.

You’re in full control of the Instagram feed content for your website.

6. Embed an Instagram feed on any website

GoPro has embedded #GoProAwards Instagram feed on their website.

The final step is to copy the Instagram feed embed code from Flockler’s 'Display' tab and embed it on your website. The most popular website and webshop builders typically have content editing tools allowing you to place the embed code without the help of developers. You can find all embed codes and create more of them via Flockler’s 'Display' tab. If you are unsure how to embed an Instagram feed on a website, don’t hesitate to contact the Flockler team via live chat. We are happy to help!

Some platforms, for example, the latest version of the Sharepoint, only allow you to add an iframe version of any third-party embed code. On Flockler, you can easily create an iframe Instagram feed on the 'Display' tab. Then, click the 'IFRAME' link of the layout and select the appropriate size for the embed. If you need help defining the size, send us a message, and we’ll help you out.

For some of the most popular website builders, we’ve created detailed instructions:

  • Embed Instagram feed on Shopify
  • Embed Instagram feed on WordPress
  • Embed Instagram feed on Squarespace
  • Embed Instagram feed on Webflow
  • Embed Instagram feed on Wix
  • Embed Instagram feed on Drupal
  • Embed Instagram feed on TYPO3

How to embed an Instagram feed on Shopify

Adding an Instagram feed to Shopify is straightforward and doesn’t require any real technical skills. With Flockler, you can choose to display an Instagram feed on any Shopify page, for example, on the homepage, within collections, and on product pages. Next, we’ll take a closer look at all of those options.

Embed an Instagram feed on the Shopify homepage

To embed a Flockler feed on Shopify’s homepage, you need to edit the theme layout. Go to Themes, click ‘Actions’ and select ‘Edit code’.

Go to 'Sections' and click 'Add a new section'.

Give it a name (e.g., flockler), and an editor opens up.

In the editor, replace the Section name with "flockler". Also, replace all after 'endschema' with Flockler’s embed code that you can find from Flockler’s Display tab.

Save changes.

Next, scroll up the list to 'Templates', click 'index.json'.

An editor opens and you need add the following section at the top:

"flockler": { "type": "flockler" },

Scroll down the code editor, and you’ll find the order of homepage elements. Choose the right spot for Flockler and add it to the list – you’re in full control. It’s easy to change the position of the Instagram feed later.

Finally, save changes, and the preview of your template shows your Flockler on the Shopify homepage.

Embed an Instagram feed on all Shopify products and collection pages

If you’d like the Flockler embed code to show on all collections and product pages, you can follow the steps above. Only now, edit either 'collection.json' or 'product.json' to define the layouts of your Shopify product pages or collections.

Embed an Instagram feed on any individual Shopify Page

You can embed an Instagram feed on any individual Shopify page, too. From the text editor, click the ‘HTML button’.

Then embed Flockler’s Instagram feed embed code anywhere in the text.

How to embed an Instagram feed on WordPress

You can embed an Instagram feed on WordPress using the standard Flockler embed code, which is suitable for any HTML page. However, we recommend using Flockler’s WordPress plugin for social media feeds to make your job faster and easier.

WordPress can be customized quite a bit, and there are multiple content editors available to content managers. In this blog post, we will cover the Block, Classic, and Elementor editors for WordPress.

If you are using another content editor and need help embedding an Instagram feed on WordPress, please don’t hesitate to contact our support team via live chat.

Embed an Instagram feed on WordPress with the Block editor

  1. Log in to the WordPress admin and open the Post or Page where you’d like to embed an Instagram feed.
  2. Select "(+) Add Block" in the top left corner of the Block editor.
  3. Next, search for the Custom HTML element and add that to your page. 
  4. Flockler’s embed code comes with a unique shortcode. Copy and paste it from Flockler’s Display tab to the new Custom HTML element you added in the previous step. 
  5. Update/Publish changes to the WordPress Post/Page.

You’re all done. The Instagram feed is now embedded on your WordPress site!

Embed an Instagram feed on WordPress with the Classic editor

  1. Log in to your WordPress admin and open the Post or Page where you’d like to embed an Instagram feed.
  2. In the WordPress content editor, you’ll find options to use a Visual or Text mode. Choose Text mode.
  3. Then go to Flockler’s Display tab and click the 'Add to WordPress' button for the Instagram feed layout that you’d like to add. Copy and paste your unique shortcode from Flockler’s Display tab to WordPress.
  4. Update/Publish changes to the WordPress Post/Page.

All done! When you refresh the page, your embedded Instagram feed should show up.

Embed an Instagram feed on WordPress with the Elementor editor

  1. Log in to your WordPress admin and add a new page or edit an existing one.
  2. Click on Edit with the Elementor button.
  3. From the left, search for the HTML widget.
  4. With the Elementor editor, you can drag and drop the HTML element into your page.
  5. This will automatically open a new set of editing tools.
  6. Then go to Flockler’s Display tab and click the 'Add to WordPress' button for the Instagram feed layout that you’d like to add. Simply copy and paste your unique shortcode from Flockler’s Display tab and embed it on the HTML Code field.
  7. Update or Publish the Page.

That’s it! An elegant Instagram feed embed is now visible on your WordPress.

How to embed an Instagram feed on Squarespace

Squarespace has become one of the most popular website building tools in the past few years. Easy-to-use and intuitive website editing tools make embedding an Instagram feed on Squarespace very straightforward.

One thing to mention is that Squarespace requires a business plan if you want to add any third-party widgets and embed codes.

Here’s a step-by-step guide on how to embed an Instagram feed on Squarespace:

  1. Log in to Squarespace and 'Edit' the page where the Instagram feed is supposed to display.
  2. Click to add an element.
  3. Click + icon and you’ll find a set of options. Search and select the ‘Code’ block.
  4. In the ‘Code’ block, ensure you’ve got ‘HTML’ selected from the dropdown and that you have NOT selected ‘Display source’.
  5. Go to Flockler’s 'Display' tab. Then copy the Instagram feed embed code to the field and click 'Apply'. 
  6. You should see a text saying ‘Script Disabled’ inside the new element. Don’t worry, that’s the expected behaviour on Squarespace. 
  7. Finally, save changes and publish the Instagram feed on Squarespace.

How to embed an Instagram feed on Webflow

Webflow is another rising star in the website builder tools market. Embedding an Instagram feed on Webflow takes only a few clicks.

Before you read any further, it’s good to mention that you’ll need a paid Webflow plan to embed any third-party code on Webflow.

Here’s a step-by-step guide on how to embed an Instagram feed on Webflow:

  1. Log in to Webflow editing tools and then choose a particular area where you’d like the Instagram feed to display.
  2. After that, click the + icon, scroll down to the Components section, and choose the ‘Embed’ button.  
  3. Now, an editor should open up automatically. Go to Flockler’s 'Display' tab and copy the Instagram feed embed code. Then, paste the code to the Webflow editor. 
  4. Finally, publish your update, and a live-updating Instagram feed is embedded on your Webflow site.

How to embed an Instagram feed on Wix

Wix has become the most popular self-service website builder – partly because of the easy-to-use editing tools and a comprehensive amount of add-ons and plugins that enrich the experience.

An Instagram feed embedded on Wix increases time spent on site and drives conversions.

With Flockler, the installation takes just a couple of minutes, and Wix has two versions of the user interface: Classic and ADI. Here are instructions for both versions.

Embedding an Instagram feed on Wix with the Classic editor

If you are using the Classic editor, click the + button on the left, select ‘Embed’, and then ‘Embed a widget’ from the available options.

On the page, you can resize the element depending on the page layout. Then click the ‘Enter Code’ button.

Go to Flockler’s 'Display' tab. Then copy the Instagram feed embed code and paste it to the Wix editor.

Click the 'Update' button and the Instagram feeds shows up in the editor.

Finally, 'Publish' your changes. That’s all – the Instagram feed is embedded on your Wix site!

Embedding an Instagram feed on Wix with the ADI editor

If you are using the WIX ADI editor, click + icon on the page. Then select the spot where you’d like to embed the Instagram feed.

Choose ‘HTML Embed’ from the left and pick one of the ready templates.

Edit the default texts and click ‘Settings’ next to HTML.

Here you must choose ‘Website’, and instead of the Instagram feed embed code, add the ‘Preview’ URL of Flockler. You can find the ‘Preview’ URL from Flockler’s Display tab. Here you can also change the width and height available for the Instagram feed.

Finally, click the 'Publish' button, and you have embedded an Instagram feed on Wix!

How to embed an Instagram feed on Drupal

Drupal is a CMS trusted by well-known brands like Tesla, Pfizer, NBC, and many more.

Because Drupal is an open-source publishing platform with extensive customization options, embedding an Instagram feed on Drupal can be done in quite a few ways.

In this blog post, I’ll go through two of the most typical use cases:

  1. Embed an Instagram feed on any Drupal article or page
  2. Embed an Instagram feed on the Drupal homepage

If you are unsure how to embed an Instagram feed on Drupal, don’t hesitate to contact Flockler’s support team.

1. Embed Instagram feed on any article or page on Drupal

You can embed a live-updating Instagram feed to the content area of any Drupal article or page.

Click to create a new article or edit an existing one. Then, choose the 'Full HTML' option from the dropdown. Then click 'Source' in the toolbar and navigate to Flockler’s 'Display' tab. Finally, copy the Instagram feed embed code and paste it to the body field in Drupal’s editor.

The last step: click the 'Save' button. With a few clicks, your elegant and responsive Instagram feed is embedded on Drupal!

2. Embed an Instagram feed on the Drupal homepage

Drupal’s block elements allow you to easily add embed codes and display them, for example, on the homepage.

Log in to Drupal, navigate to Structure > Block layouts and click the 'Custom block library' tab. Next, click the '+ Add custom block' button.

The system will ask you to give the block a name (e.g. 'Instagram feed'). Important: change the text format to 'Full HTML'. Then click 'Source' in the toolbar and paste the Instagram feed embed code from Flockler to the field. Save changes after that.

Next, navigate to the 'Block layout' view and choose where you’d like to show an Instagram feed. For example, you could add it to the Content area. Then, click 'Place block'.

Now, choose the block ('Instagram feed') you created above.

In the editor, you have quite a few customization options. For example, you can choose if the block's title is visible on your page and if there are any restrictions. Also, you could decide to limit the Instagram feed’s visibility and show it only on a specific page.

Finally, scroll down the page and click 'Save blocks' to save the work you’ve done.

High five! The stunning Instagram feed is now embedded on the Drupal homepage!

How to embed an Instagram feed on TYPO3

TYPO3 is one of the most popular content management systems in Central Europe, with companies like Phillips, Lufthansa, and Villeroy & Boch among the users.

Embedding an Instagram feed on TYPO3 takes a few clicks. TYPO3 is fully customizable and you shouldn’t really run into any problems.

Log in to TYPO3 management, open the editor of a page (e. g., About page) or blog post and click the '+Content' button.

Next, select the 'Special elements' tab and a 'Plain HTML' element.

Go to Flockler’s 'Display' tab, copy the Instagram feed embed code, paste it to the TYPO3 editor and click ‘Save’.

Hooray! In a few minutes, an inspirational Instagram feed is now embedded on TYPO3!

Benefits of embedding Instagram feeds on websites

Why do brands and organisations embed Instagram feeds on websites? Organisations typically see the benefits to both their social media channel statistics and on their website data – the growth on both fronts leads to an increased number of conversions!

Here are the key benefits of embedding an Instagram feed on a website:

  1. Grow the number of followers and build engagement
  2. Improve website dwell time
  3. Increase conversions with UGC and social proof

1. Grow the number of followers and build engagement

Instagram feeds on websites drive traffic to your Instagram profile.

In our live support chat for Flockler, a customer might say that they don’t want people to leave their website and get lost in social media. But, on the other hand, another customer is thrilled to drive more Instagram profile visits leading to follower growth.

Which one of the customers is right?

They both are.

Sometimes websites have a very straight path to conversion, and you might want to avoid the visitor leaving the site quickly. That’s when Flockler’s popup feature comes in handy. When the visitor clicks one of the Instagram images on the website, a layer with the image opens up. The visitor can then flick through the images to the left and right without being forced to leave the site. Customers use the popup feature to embed Instagram feeds on websites that add credibility and fresh, topical content.

With Flockler, you can choose to open Instagram feed images and videos in a popup view.

On the other hand, some products and services might have a longer sales cycle, and driving the visitor to the Instagram profile adds another data point for social ads and re-marketing. When a user visits a brand’s Instagram profile (and is logged in), the data is available for re-marketing on Instagram and Facebook advertising tools. Of course, the brand won’t get the exact user data but they can target future ads to users who visited the Instagram profile, and perhaps more importantly, to lookalike audiences.

Increased traffic to the Instagram profile will naturally grow your audience size and followers and build engagement in individual posts.

The more followers and engagement, the more people will see the brand’s Instagram feeds in the future - that’s how the Instagram algorithm works. So it’s the virtuous cycle that you’d love to have for your brand on Instagram.

2. Improve website dwell time

Showing your products in action and fresh Instagram feeds embedded on your website increase the time spent on site.

It's not only about driving positive results for your Instagram profile, the website manager will be pleased with the results as well.

An Instagram feed embedded on a website increases the time spent on site.

Firstly, website visitors are naturally interested in visual content as it delivers information more intuitively than text or sound.

Secondly, a significant portion of social media content are videos, and according to research, videos are the most efficient and engaging way of acquiring information. Instagram's algorithms favour videos because they capture visitors’ attention for longer.

Lastly, brands often update new content on their Instagram profiles daily or at least multiple times a week, and the content is often very topical and seasonal. Instagram and other social media channels enable brands to quickly react to unexpected events and trending topics like #blacklivesmatter. The rest of the website (let alone print materials) rarely have similar flexibility. Instagram feeds on a website can display your brand’s take on the trending topic in real-time.

3. Increase conversions with UGC and social proof

Vivadogs embeds Instagram feeds and social proof on their webshop.

Perhaps the most exciting benefit of an embedded Instagram feed on a website is the additional credibility and social proof you can gather and display from your customers.

Many websites and services have been gathering reviews in text format for a long time. However, hashtag-powered Instagram reviews with images and videos go a longer way than texts on the website. They get likes and comments from your customers' friends – something that would not be realistic for a text review on a website. Social reviews efficiently increase the reach and size of your audience.

I recently purchased a desk for my home, and even though I loved the branded images and design on the brand website, I couldn’t figure out if the desk would fit into my relatively small apartment. However, after seeing the user-generated content on the website with other customers placing the desk in the corner of their living room, I knew I’d found the right one. In hindsight, it was easy to make the decision, but I might have started searching for alternatives without the authentic Instagram feed on the product page.

Social proof and an Instagram feed embedded on a website increase conversions and sales. People trust other consumers more than pixel-perfect branded marketing materials.

Are you ready to embed Instagram feed on your brand website?

Sign up for a 14-day free trial with Flockler and show Instagram feeds on any digital service in less than five minutes. Full support, no Flockler branding, and no credit card needed.

Sign up now

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 add your Instagram feed in a sidebar, your home page, your footer, or a blog post (like this), then keep on reading!

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 sign up today.

What types of Instagram feeds can you embed?

Instagram offers a lot of different types of posts. It's important to take a step back and think about what you want to aggregate. Do you just want to embed your Instagram feed? Or do you want to embed photos and videos that other users post about your business?

You can embed all of these types of content:

  • Hashtag Posts - Embed feed posts from a specific hashtag, such as your wedding's hashtag or the hashtag you use for user-generated content.
  • Hashtag Reels - Embed Reels that are tagged with a specific hashtag. This is great for brand challenges, especially dance ones.
  • Personal Account Posts - Embed all of your Instagram feed posts from a personal account.
  • Business Account Posts - Embed all of your Instagram feed posts from a business account.
  • Business Account Reels - Embed all of your Instagram Reels from a business account.
  • Business Account Stories - Embed all of your Instagram Stories from a business account.
  • Mentioned Business - Embed feed posts from whenever your business account is mentioned in a caption.
  • Tagged Business / Collab Posts - Embed feed posts from whenever your business account is tagged. This is a popular option for featuring content from your paid influencer campaigns on your website.

Embedded feed examples

Here's an example of an embedded feed using Curator's free plan. You'll see the "Powered by Curator" link at the bottom. Compared to our competitors, we have the least noticeable branding on the free plan, and that link can be removed on any paid plan.

And here's another example—this time using a paid plan to remove the "Powered By" link. This is a great example of embedding an Instagram feed in order to display user generated content and encourage more customers to post their photos.

How to embed your Instagram feed for free

Embedding your Instagram feed is different than embedding an individual post. You need to connect your Instagram account to an aggregator, choose your feed layout, and then copy and paste the HTML code where you want the feed to appear in your website.

A social media aggregator is an easy-to-use app that pulls in your social media content and gives you the tools you need to organize and stylize that content. Then, you simply paste the HTML code in the footer of your website, your home page, or wherever you want your Instagram feed to appear.

Here's how to embed your Instagram feed for free:

  1. Sign up for a social media aggregator with a free plan
  2. Create a new feed and choose whether or not posts should be automatically approved
  3. Connect your Instagram account and choose the type of posts
  4. Curate your feed (approve and remove posts)
  5. Design your feed
  6. Copy the HTML code into your site
  7. Check out how the feed looks in your website and make any adjustments
  8. Continue to moderate the Instagram content on your website

Let's review these steps in more detail.

Step 1: Sign up for a social media aggregator with a free plan

The first step is to sign up for a social media aggregator that offers a free plan.

This is important because...

  • If your website budget is low, you can stay on the free plan and keep the "Powered By" link beneath your Instagram feed.
  • If you can afford $25 or more, you can remove the "Powered By" link beneath your Instagram feed, but still have a chance to try the platform's features before you sign up for a paid plan.

Step 2. Create a new feed and choose whether or not posts should be automatically approved

Now it's time to create a feed and give it a name.

You can give it a simple name like "Instagram Feed" or "My Instagram Posts" or "Instagram Posts from Branded Hashtag."

You also need to choose the default post status.

Do you want everything to be automatically approved to show up on your site? Or do you want to have to greenlight each image?

In the settings of your feed, you have two options:

  1. Approved - All Instagram posts from the source you chose in Step 2 will be added to your site unless you delete them.
  2. Needs approval - No Instagram posts from the source you chose in Step 2 will show up unless you approve them.

Step 3: Connect your Instagram account and choose the type of posts

When you add an Instagram feed to your website, you have a lot of options for the type of content you want to aggregate.

This is because Instagram has the highest amount of post types of any social media platform.

With Curator, you can aggregate all of these different types of content:

  • Hashtag Posts
  • Hashtag Reels
  • Personal Account Posts
  • Business Account Posts
  • Business Account Reels
  • Business Account Stories
  • Mentioned Business
  • Tagged Business / Collab Posts

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

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 sign up today.

Step 4: Curate your feed (approve and remove posts)

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 can also update the settings for automatic curation if you want to change them.

If you choose automatic approval, then you need to delete the posts that you don't want to show up. If you choose that approval is required, then you need to approve the posts you do want to show up. If you're set to "Needs approval" and you don't give some posts a green checkmark, then no posts will be able to be added to your website.

Step 5: 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 6: 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 7. Check out how the feed looks in your website and make any adjustments

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:

Step 8. Continue to moderate the Instagram content on your website

You'll want to continue checking your website to make sure that only the best content is showing up.

Moderate your website based on the approval setting you choose

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 sign up today.

The 3 main options for embedding Instagram content in your site

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.

Method 1: Adding individual posts

Pros:

Cons:

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.

Method 2: Social media aggregators

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.

Example:
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, 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 to increase your engagement rate 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 sign up today.

Example:
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 the bucket list trips 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.

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

Example: Tagembed

With Tagembed, you can add content from Instagram, Twitter, Facebook, Slack, and other channels. You can also embed not only content from profiles but also from hashtags. This is great if you have a branded hashtag for user generated content or if you have a wedding hashtag. With Curator, you can also embed content from hashtags, not just profiles.

Method 3: 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). You can always add your embed code to your website even if it was built with a website builder. For non-tech savvy users, it should still be easy to know how to build your own website using the platform.

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. If you choose custom software development, it will help meet your concerns and key needs.

How to embed your Instagram feed on a WordPress website

Curator is an excellent WordPress Instagram widget.

When embedding your Instagram content in your WordPress site, the steps are mostly the same as outlined above. The only main difference is that when it comes to actually installing the feed you have two options: 1) copy the HTML code or 2) use Curator's WordPress plugin so that you can copy and paste short code instead.

Below, we'll review these steps in more detail.


Step 1. Choose a social media aggregator tool

The first step is to choose a social media aggregator. Depending on your needs, the platform should be free or affordable. You need a social media aggregator so that you can embed your entire feed instead of copying and pasting code for every post.

Step 2. Create a new feed and set the approval style

Next, create your first feed, give it a name and choose your approval style. We recommend choosing "Approved" if it's your content and "Needs approval" if you're aggregating content from event attendees, customers, or influencers. This way, you can approve everything and there won't be any surprises showing up on your website.

Step 3. Select the type of Instagram content you want to aggregate

Next, choose Instagram as your feed source and choose the type of Instagram posts. For most WordPress websites, people choose their Instagram Business Account and aggregate all of the content from their profile.

Step 4. Approve or remove posts

The next step will be to approve or deny posts, based on your approval setting. If you're manually approving, make sure to approve what you want showing up. If you're allowing your content to be automatically approved, then simply delete anything you want to remove from your WordPress website.

Step 5. Customize the look of your Instagram feed

Now it's time to stylize your Instagram WordPress feed.

Choose the theme you'd like.

There are several different themes that work great with WordPress websites:

  • Waterfall
  • Grid
  • Grid Carousel
  • Carousel
  • Panel
  • List
  • Mosaic
  • Tetric
  • Select
  • Stack
  • Cover Flow
  • Stagger
  • Layers

Most people like to keep their Instagram feeds clean and simple and let the posts shine all on their own. However, you can add borders and backgrounds, and change the font color of the text and icons.

For professional WordPress developers, a custom CSS section is available so you can add your own code.

Step 6. Embed the feed in your WordPress website

Now, you need to add the feed to your WordPress website.

No plugin option:

Just click "Publish Feed" and copy the HTML code into the clipboard. Paste it where you want the feed to go, such as in your footer or sidebar. With WordPress, all you have to do is add a custom HTML widget to your website and then copy the code into the box.

With plugin option:

Download the Curator plugin and upload it to your website. Or go to the plugins section of your WordPress website, search Curator, and hit Install. Make sure to activate the plugin.

Then, you can copy short code and paste it where you want it to go instead of having to copy the long HTML code.

Step 7. Review how the feed looks in your WordPress website

After you embed the feed in your WordPress website, go ahead and check how it looks. If needed, go back to the Style section of Curator and make changes to your feed. If you're not using the WordPress plugin, you'll need to copy and paste the HTML code again. If you are using the plugin, you won't need to do that step again.

Step 8. Occassionally approve or remove new Instagram posts

Make sure to login to Curator occasionally to either delete or approve new posts. Depending on how often you post on Instagram, you might want to do this weekly or monthly

How to embed your Instagram feed on a SquareSpace website

To embed an Instagram feed on a SquareSpace website, the only step that is different than what described above is Step 6.

You'll need to add a block to your SquareSpace website for custom HTML code. Then simply paste the feed embed code into that block.

Here's a tutorial on how to add the custom HTML block:

How to embed your Instagram feed on a Wix website

Follow the WordPress instructions above.

Then, for Step 6, follow these instructions:

  • Go to the Settings area of your Wix website.
  • Go to the Advanced section.
  • Click +Custom Code in the top right.
  • Paste your Instagram feed code from Curator into the text box.
  • Give this code a name, for example, "My Instagram Feed."
  • Now select, Add Code to Pages. Click All Pages or choose specific pages.
  • Choose where you want the feed to appear: Head; Body - start; Body - end.
  • Click Apply.

How to embed your Instagram feed on a Shopify website

Follow all of the instructions for the WordPress website feed above. The only step that is different is Step 6.

For Step 6, follow these instructions:

Shopify is an ecommerce platform, and ecommerce companies typically like to add their Instagram feeds to the footer of their websites.

To add your feed to the footer, use these steps:

  • Navigate to Online store > Themes > Actions > Edit Code > Sections > Footer.liquid.
  • Add the HTML code into the footer

If you want to create a different feed for each of your products, then simply add each feed's HTML code to the correct product page. This way, customers can see UGC images of that exact product when deciding to purchase it.

 

How to Add Instagram Posts from a Hashtag to Your Website

Most website owners and developers want to add their own Instagram feed to their website. But what if you want to add posts from other Instagram users?

Maybe you want to add posts from your customers to your website.

To do this, simply choose Instagram Hashtags when selecting the type of content. This will pull in all posts tagged with that hashtag.

Make sure to use manual approval and approve everything individually so you don't get the wrong types of images showing up on your website!

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 and can strengthen your brand identity. 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. Display social proof is a proven way to increase sales and leads driven by your website. This can come in the form of reviews, user-generated content such as Instagram Feeds or product/ service awards.

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 sign up today.

How to connect your Instagram feed to your Instagram account | Help Center

Connecting a personal account to the Instagram Feed allows you to share personal photos and videos directly on your site, giving visitors access to your personal stories.

Contents:

Adding and connecting a personal Instagram account

Add the Instagram Feed app from the Wix App Market to your site and connect it to your personal account.

To add and connect an account:

  1. Add the Instagram Feed app to your site.

How to do it?

  1. Open App Market :
    • Wix Editor : Click on the Add Applications icon in the left pane of the editor.
    • Editor X : Click the App Market icon on the top bar.
  2. Type Instagram Feed into the search bar.
  3. Select Instagram Feed from the dropdown list.
  4. Click Add to site .
  5. Press OK .

2. Click on the application in the editor.

3. Press Set .

4. Press Connect personal account .

5. Click Allow in the pop-up window.
Note: If the Instagram login window does not open, try disabling your pop-up blocker or updating your browser version.

How do I disable my personal Instagram account?

Disconnect your personal Instagram account to connect another account.

To disable an account:

  1. Click on the application in the editor.
  2. Press Set .
  3. Click Disable at the bottom of the panel.

Troubleshooting your personal Instagram account

If you're having trouble connecting the Instagram Feed app to your personal Instagram account, try the following:

Step 1 | Make sure you're signed in to the right Instagram account

If you don't see content from the right account in your Instagram feed on the site, go to your Instagram account and make sure you're signed in to the right account.

If you find that you are logged in to the wrong Instagram account, follow the instructions below.

  1. Sign out of the wrong account.
  2. Log in to the correct account.
  3. Return to the editor.
  4. Select the Instagram Feed application.
  5. Press Set .
  6. Click Disable at the bottom of the panel.
  7. Press Connect personal account .
  8. Press Allow .

Step 2 | Connect your Instagram account if it has been disabled

Your account may be disabled if you have problems connecting to Instagram or if you recently changed your Instagram password. Follow the instructions below to reconnect your account.

  1. Select the Instagram Feed application in the editor.
  2. Press Set .
  3. Press Connect personal account .

Step 3 | Make sure your Facebook account allows off-Facebook activities

Follow the instructions below if you receive an error that off-Facebook activities are disabled on your account.

  1. Go to your Facebook account.
  2. Click on your profile picture in the upper right corner.
  3. Select Settings and privacy .
  4. Press Set .
  5. Click Your Facebook information on the left.
  6. Click View next to section Off-Facebook Activities .
  7. Press Disable future actions.
  8. Activate the Future off-Facebook toggle if it is not enabled so that Facebook can receive information from Instagram.

How to make a beautiful Instagram feed

June 25, 2022

Instagram is a great platform for promotion. And here a lot depends on what impression the profile makes: what is the general mood, color palette and combination of photos. We have put together a few tips to help you make a beautiful ribbon and develop a special brand aesthetic.

A single style is those details that unite the entire visual. For example, it can be a photo style - dark deep, airy light photos. Or the paraphernalia of the frame - rustic, vintage, kinfolk and others. Even some common character or object. However, in search of your own style, it is not at all necessary to drive yourself into rigid frames and lock yourself in one direction. You can combine completely different photos if you follow a few rules.

We recommend our new article: "Instagram Visual Trends 2023" >>

Decide on the mood of the profile

The account itself does not affect sales. For visitors to turn into potential customers, they need to be impressed. Think about what emotions you want to evoke in subscribers? The style of your feed and the choice of photos will depend on this.

For example, if you are selling home decor, a hygge aesthetic would be appropriate: photographs of candles and cozy blankets, warm colors and soft shadows in processing. And for premium leather goods, you can try shooting with gloomy light and deep hues - if you place all the accents correctly, such shots will be filled with a special atmosphere.

Accounts of photographers can also be different: on the left - conciseness and rigor, on the right - brightness and audacity. For example, photos of @neekmason and @kavalerchikyana are used

Choose primary colors and shades

When one color is used in the profile - everything is light and airy or vice versa dark - it looks very stylish and beautiful. But after a while, when you see the fifth, tenth or hundredth such photo, you stop seeing the difference. Therefore, we recommend leaving the stereotype that it is enough to choose one filter for all photos in the past.

It's much better not to lock up your creativity in some kind of filter, but simply choose your favorite shades of base colors and make sure that they are regularly in photographs. If you are shooting portraits, ensure that the skin is the same color throughout. If you publish landscapes, the shades of the sky and greenery should also be the same. Then the shots taken in different conditions will remain natural and look harmonious.

On the left is an example of a tape in which each photo is very beautiful individually, but together they look very similar. And on the right is a tape in which the frames are very different, but thanks to the primary colors that are repeated from frame to frame, the tape looks harmonious. For example, photos of @meghan_faulk and @prostokrasivo.wear are used

Make smooth transitions from dark to light shots

You can combine dark and light, warm and cold shots in one profile - just make smooth transitions. For example, if you had three light shots and now you want to post a dark photo, post a light photo with dark accents first. Then it turns out that some shades seem to flow into others. Such a “gradient” looks beautiful in the feed and will help to fit photos of your customers into it.

Instagram Kinfolk is a great example of a harmonious feed without a single filter. This is achieved by smooth transitions and playing with color. Photographs @kinfolk

Don't be afraid to add color accents

Color brings zest to photos and encourages you to come in and see the details. This is due to the fact that our eye easily picks up bright spots, especially when looking at photos from the phone.

Therefore, for profiles in neutral tones, such as gray or beige, we recommend adding bright details so that the tape does not look boring. And if your frames are bright and colorful, on the contrary, it is better to add calm objects - this way there will be no extra variegation when looking at the tape.

Color attracts the eye, the main thing is to use it in doses. For example, on a neutral background - white, black, beige. For example, photos @la_maison.n and @gkstories

Alternate wide and close-ups

The feed looks more harmonious when photos with different scales are published side by side. For example, if you have an online clothing store, you can first post a photo of a girl in a full-length dress, then a waist-length portrait, and then a large photo with a dress back or a beautiful clasp. So there will be no feeling that you are repeating yourself.

The alternation of plans helps to make the tape varied and lively. The characters in the photographs change, the surrounding world changes - then the tape looks eventful.

Cozymoss Instagram photos at different scales. This is another reason why the goats in the profile are so lively and active. @cozymoss photos used as an example

Bonus: feed scheduling apps

Use apps to plan your Instagram content in advance. They are convenient to upload photos, combine them and choose the perfect sequence.

We recommend trying Unum, Inpreview or Garny. To plan one account, a free version of any of them is enough, but if you maintain several profiles, Unum will suit you - there you can create several projects at once for free.

Download Unum for iOS →
Download Unum for Android →
Download Inpreview for iOS →
Download Garny for Android →

These simple tips will help you compose a beautiful and harmonious feed from various photos.


Learn more