Site icon EmbedSocial

How to Embed Instagram Feed On Your Website For Free In 2024?

Social media feeds have become a core component of any website layout, especially embedding Instagram feeds (Instagram walls) that extend your Instagram content reach beyond the native Instagram app.

The ability to embed Instagram feeds on your website pages instantly boost your brand’s social proof.

This blog post contains all the solutions to display an Instagram feed on your website.

TLTR: How to embed Instagram feed?

Here is how to embed an Instagram feed on your website with a social media aggregator.

  1. Sign up for the Instagram widget.
  2. In Sources, choose Instagram as a source.
  3. Connect your Facebook account or manually enter your Instagram account.
  4. Choose an Instagram widget layout from the templates, like an Instagram slider.
  5. Create a widget and copy the embeddable code.
  6. Go to your website builder and paste the code into the HTML.

FYI: You can embed Instagram widget automatically with a social media aggregator and alive your website with fresh content.

Embed Instagram widget on your website automatically!

Generate and display Instagram content from your feed, mentions, or hashtags directly to your website.

Start 7-day free trial

To get started, browse the Instagram widgets library and see all the possibilities for embedding your Instagram feed on your website:

How to embed Instagram feed with a social media aggregator?

Here is how to display Instagram feed on a website:

Step 1: Create an EmbedSocial account

Before you start, create your account and follow the steps below.

Step 2: Choose Instagram as a ‘source’

Once you are logged in, you will be navigated to the Sources page with the list of all social platforms, and choose Instagram as ‘Source’.

Step 3: Connect your Facebook account or manually enter your Instagram account

In this step, you can choose to ‘Connect Facebook Account‘ to get all your Instagram posts in case you have a professional Instagram account that is connected to your Facebook page.

If not, you can manually enter your Instagram @username.

Note: If you manage several Instagram profiles, the system will display them once you connect your Facebook account.

Step 4: Choose Instagram source type – Instagram hashtags or Instagram account

Choose what kind of Instagram feed you would like to create, from Instagram hashtags, Instagram mentions, or an Instagram account. Choose the Instagram account from the dropdown (if you manage more) and click Next.

After that, you can come back and add more types of posts. So, if you choose #Hashtags, you will need to enter the desired hashtag, or if you choose Personal Account, you will need to enter the account’s name. You will be redirected to the next step to choose the widget layout.

Step 5: Choose your Instagram widget layout

The next step is a template library with different layouts for your Instagram feed. Choose one by clicking the Use this template button.

Step 6: Copy the Instagram widget code

So once you are on this page, you can see the code displayed in the top-right section of the Settings panel. Just click copy code and use this code to show the responsive widget on your website.

Note: You will also notice CMS platforms’ Instructions just below the JavaScript code. Click on this Help to embed code link for more instructions and a shortcode for your WordPress website. But before that, please install our official WordPress plugin, enabling you to use the widgets’ shortcodes.

Step 7: Paste the provided code into your website

If you are using a platform that allows editing of the page’s code, you can paste the code into the body section of its HTML structure at the position where you want the Instagram feed widget to appear. To embed the code in WordPress, click the ‘add block’ icon and paste the code into the HTML block as shown below:

And if you use other web platforms such as WordPress, Squarespace, Wix, or similar, navigate below in the text to find the actual tutorials for these platforms.

Live demo of an embedded Instagram widget

Following these steps, here is how the Instagram widget looks like when embedded in this post:

Video tutorial on how to add Instagram feed to website

Here is a video walkthrough on how to embed an Instagram feed like a PRO:

FYI: You can embed Instagram widget automatically with a social media aggregator and alive your website with fresh content.

Embed Instagram widget on your website automatically!

Generate and display Instagram content from your feed, mentions, or hashtags directly to your website.

Start 7-day free trial

Integrate Instagram feed into website for free

As a bonus, EmbedSocial provides a free Instagram feed widget that can generate, utilize, and sync your Instagram’s marketing potential on your website in minutes.

The free Instagram feed widget works with any website builder that allows embedding JavaScript or iframe code. So, if you use any popular web platforms, you are ready to go.

Follow the steps below, and you can sync your entire Instagram feed with your website in seconds.

Here is how to embed an Instagram feed on a website for free:

  1. Create your free account for the Instagram widget.
  2. Pick Instagram as a ‘Source‘ and connect your Instagram account.
  3. Generate your Instagram feed in an Instagram widget.
  4. And copy/paste the provided code on your website.

Easy right?

Live demo of an embedded free Instagram widget

Here’s what the embedded Instagram feed looks like in action:

Following these steps, here is how the free Instagram widget looks like when embedded in this post:

Like what you see? Create and embed your first Instagram feed for free!

So far, in the text, we explained how to show your Instagram feed by copy/pasting a javascript code in your website’s body section.

You probably wonder how to do this if you use a specific e-commerce platform, a CMS (content management system), or a web builder. The platform provides an Instagram feed code that works for your WordPress website, Squarespace website, Weebly website, or Shopify online store.

Here are the tutorials on how to embed your Instagram feed for free on the most used CMS and website builders and how to use the embeddable code for Instagram feeds.

How to embed Instagram feed in WordPress

Before you start, please note that you can use the EmbedSocial platform with or without a WordPress plugin to embed the Instagram feed. 

It is directly integrated with the Instagram API, so you won’t need to configure your user ID or update access tokens. You will only need to click a button and give your permission to our platform to sync your posts on your WordPress website.  

EmbedSocial provides two options: a javascript code for direct embed in the WordPress post and a plugin for embedding Instagram feeds with a shortcode. The choice is yours on how you want to do this. And below are the instructions for both available options on how to start.

Option 1: Instagram Feed Plugin 

EmbedSocial provides a free Instagram feed WordPress plugin as part of the social media aggregator, and it works for any WordPress theme.

With the Instagram Feed for WordPress, you can create a full posts feed or a simple photo feed with your Instagram images.  

Before you start, you will need first to connect your Instagram user account.

Once you do that, follow these steps, and you will need to activate the Instagram plugin on your WordPress website.

Here are the steps on how to activate the EmbedSocial plugin and embed Instagram feed in WordPress:

That’s it. Once you open the front end of your WordPress site, you will see the latest Instagram posts on your website. 

Using EmbedSocial will help you to choose the layouts, and a number of columns, add a follow button, and even include a Facebook feed or TikTok feed in one social media widget.

Option 2: Instagram Feed Javascript  

This option is usually recommended use for one-time embeds like showing an Instagram widget in the website’s sidebar. 

To do this, you will need to get the code from your EmbedSocial account and paste the code in the Widgets area where you have your sidebar.

For more details, check the detailed Instagram Feed WordPress tutorial.

How to show Instagram feed in SquareSpace

The code provided by the free Instagram widget also works with the Squarespace CMS platform.

First, go to your Squarespace account, and from the home page, navigate to the website where you want to show the widget:

Now follow the steps below to learn how to paste the embeddable code of your Instagram widget: 

  1. Point to the section of the page where you want to add the widget and add a new content block by clicking on the plus button 

Step 2: Select the ‘Embed’ block and click on the “Embed Data” code icon.

Step 3: Paste the code into the insert point and click ‘Set’ 

Read more:

Instagram Feed for Squarespace full tutorial. 

How to show Instagram feed on Shopify website

There are a few options on how to embed the Instagram widget by EmbedSocial code in Shopify.

The tutorial below will show you how to embed the JavaScript code in a chosen page.

Log in to your Shopify account, go to Store > Options > Pages, and open the page where you want to show the widget. Then follow these steps:

  1. In the Shopify page editor, click the top-right code icon.

  2. Click on the HTML/code icon in the top right corner of the text editor and paste the provided code. 
  3. Finally, click ‘Save,’ and the Instagram feed will appear on the selected page.

 Add an Instagram feed to Shopify full tutorial.

How to show an Instagram feed on a Wix website

Follow the steps below to embed an Instagram feed in Wix:

First, log in to your Wix account and open your website editor.

  1. Click the top-left + button to add a new block, and in the popover, choose the iFrame block.
  2. Once the iframe block appears, click the top-left Edit code button.

  3. Paste the widget code you copied from the widget editor and click Update.
  4. Resize the iframe block to fit the widget and click Publish.

That’s it.

See the full tutorial on how to embed Instagram feed in Wix >

How to embed Instagram feed in Hubspot

Hubspot’s website builder is a very popular platform for building landing pages amongst people who don’t have technical skills.

To embed your Instagram feed into Hubspot’s CMS Hub, follow these steps:

  1. Log in to your Hubspot account.
  2. Click on Marketing in the top menu and click Landing Pages.
  3. Click edit on the page you want to have the Instagram feed.
  4. In the landing page editor, click the top menu File and select Page Settings.
  5. Here, choose Advanced and navigate to the Footer text area.
  6. Paste the widget code.
  7. Click Save or Publish.

That’s it. You just set our Instagram feed and can forget it, as it will automatically update your Instagram feed every time you post on Instagram.

Here is a demo of the Instagram feed in Hubspot >

How to embed Instagram feed in Notion

Do you use Notion to build landing pages? If yes, these few steps can help you sync your Instagram activity with your Internal notion pages or even a public website built on top of the Notion platform.

To start, you will need to get the URL of your widget. To get this URL, open the widget in the editor and click on the iFrame code in the Embed tab. In the popup, click URL and click Copy URL, as shown below:

To embed the Instagram feed in your Notion page, follow these steps:

  1. Log in to your Notion account and open the page where you want to embed the feed
  2. Select the area where you will place the widget and type /embed, and choose the Embed option
  3. Click the Embed link tab, and in. the URL tab, paste the widget URL

Full guide on how to embed reviews widget in Notion.

Embed Instagram Feed on other web platforms

Here are additional tutorials to help you display Instagram photos on other web platforms:

5 ways to customize the embedded Instagram Feed on a website like a Pro

We explained how to use the free version for embedding Instagram feeds on any website. But If you need professional settings and many other features to customize or change your feed’s layouts, make your Instagram feeds shoppable with custom ‘Buy’ buttons, and much more.

Here are some of the main customizations you can do when embedding Instagram feed on your website:

1. Change the layout of the Instagram widget

You can switch the layout by navigating to the Settings panel > Layout tab > and choose some of the following layouts

Here is how the switch from Feed to Slider layout looks like:

And here is how the layout looks when switched to collage:

2. Change the card style of the Instagram posts

The card style is the look of the Instagram posts in the feed. This means that you can showcase the posts as photos or as a full post that will include all the details of the post, including the photo or video, the Instagram account that posted that post, and the time when it was published.

In case you want to create a post only showcasing the photos, then you can create a photo grid card that will only show the posts. The caption is still available on hover and when clicked on the lightbox.

3. Customize the way Instagram posts show in the lightbox/popup mode

For showcasing Instagram posts in a more detailed view, the platform offers separate settings for the lightbox mode.

This lightbox appears when users click on the posts, and the post opens in a popup view containing a larger format. Furthuremore, users can sipe left or right to see more details and view all posts in a more zoomed format.

To personalize the look, you can choose from the settings such asL

4. Change the color theme from light to dark or rainbow

This is a very simple setting but many users love it as with one click, you can completely change the Instagram feed theme and choose how you want to display the Instagram feed and fit to your website’s theme.

Here is an example of how the widget looks like when switched to the rainbow theme:

5. Completly curate an Instagram feed with AI CSS generator and Custom CSS

In case you need more sophisticated customizations, the platform offers an AI tool that will generate CSS based on your needs. You can write a prompt like ‘Change the button colors to light blue’, and it will apply this to all buttons. Or if you are familiar with CSS you can use the Custom CSS and write your one design specifications.

Further customize your Instagram feed

This social media aggregator allows you to apply your brand voice by customizing your feed with different colors and fonts, layout options, backgrounds, CTAs, auto-adding new media, and many more. To stay creative and make your Instagram feed truly impressive, navigate to the Settings, Layout, and Design tabs, and feel free to play around with the following options:

You can also use the moderation option and choose the content you want to see displayed on your website. This is especially important when organizing hashtag giveaways or contests that you display on your website. Usually, these posts are from numerous Instagram users and need additional curation before posting on your website.

Live demos of Instagram widget templates

Visit the Instagram Widgets Templates Library to check all possible layouts and what you can do more with EmbedSocial. Note that customization is limited for the free version.

If you want to check all its features in action, follow the links below for the live demos:

With these exclusive Instagram widget options, you will definitely stand out from the crowd, provide fresh content, and create a very interactive website!

What types of Instagram feeds you can embed?

EmbedSocial provides direct integration with Instagram, allowing users to embed different types of Feeds, such as:

FYI: You can embed Instagram widget automatically with a social media aggregator and alive your website with fresh content.

Embed Instagram widget on your website automatically!

Generate and display Instagram content from your feed, mentions, or hashtags directly to your website.

Start 7-day free trial

Benefits of adding Instagram Feed to your website

So, why should you display the Instagram feed on your website?

From showing and keeping your Instagram users up to date with your new products to directly selling your inventory, Instagram and your content become a central point of your business success.

Displaying an excellent Instagram feed of all super authentic photos created from your account will increase user engagement and time on site, turning visitors into followers.

So, here are some of the main benefits of embedding Instagram feeds:

  1. Expand social presence
  2. Provide real-time, fresh, and beautiful content for your website
  3. A perfect way to display social proof of the quality of your business
  4. Opportunity to store and analyze user-generated content
  5. Extend the reach of your brand content beyond the Instagram app
  6. Save time and resources to produce content for your website
  7. Increase engagement and the possibility of gaining more Instagram followers
  8. Build brand trust on your website and boost conversions.

From the list above, probably the most valuable benefit for e-commerce brands is the ability to showcase user-generated content in social proof forms. This means that having the opportunity to auto-sync content produced by real people about their actual usage of a particular product is priceless proof that helps build trust in e-commerce websites and drive prospective customers’ purchasing decisions.

Examples of Instagram Feed on a website

Almost no website doesn’t display Instagram feeds, either creating an Instagram gallery of their Instagram posts or a user-generated content widget with posts from an Instagram hashtag that displays their customers’ photos.

1. Babies R Us displays Instagram posts from customers and their own events

See how Babies R US uses the Instagram slider widget to display some of the posts that customers share on Instagram when visiting their Mama Club events. By doing this, they enhance the engagement and interest of potential moms who can see the behind-the-scenes and get a desire to book a ticket for the next event.

2. StrangerThings shows fans Instagram posts

Here is an Instagram feed on a website example of the Stranger Things, which creates social media feeds with other peoples’ posts mentioning their brand:

See more Instagram feed examples to inspire and learn how others embed their Instagram photos and videos on the website.

Top free tools for embedding Instagram feed

There are few tools on the market that you can use to embed Instagram feed. Below we will outline the best.

1. EmbedSocial

As mentioned above, EmbedSocial is one of the most professional Instagram tools or plugins for websites that offer more advanced solutions to display your Instagram photos on WordPress, Wix, Squarespace, HTML websites, or other web platforms.

Its PRO version provides more advanced features, including using other social networks, embedding Instagram feeds from hashtags, and moderating these Instagram feeds,

It provides the option to curate the Instagram hashtag walls generated by hashtags and also has the option to generate posts that other users publish and mention your Instagram account. 

Also, note that real-time auto-updates, analytics, and a fantastic customer support team are available. All active users get constant updates like Custom CSS functionalities and great templates that fit any webpage.

The best option is the ability to integrate with all major social media platforms and create social feeds with all your user-generated content.

We built a social media content aggregator in the EmbedSocial platform in order to help people sync their own and their customers’ content with their website quickly and without any coding skills required. 

We achieved this by having a direct and approved API integration with the Instagram platform. Here are the main features you will get with EmbedSocial. 

  1. Complete social media aggregator Not just for content published on Instagram but also on Facebook, Twitter, YouTube, TikTok, Vimeo, and other social media networks. 
  2. Easy Setup: The widget can be installed quickly and effortlessly, making it accessible to users with varying levels of technical expertise.
  3. Customizable Design: The widget offers a range of customization options, allowing users to match the design of the Instagram feed to their website’s look and feel. Users can modify the layout, colors, and fonts to suit their preferences.
  4. Responsive Display: The Instagram Feed widget automatically adapts to different screen sizes and resolutions, ensuring a seamless user experience across various devices such as desktops, tablets, and mobile phones.
  5. Content Moderation and Filtering: Users can choose to display specific posts by applying hashtag, username, or location filters. This allows for greater control over the content being showcased on the website.
  6. Automatic Updates: The widget updates in real-time, ensuring that the latest Instagram posts are always displayed on the website without any manual intervention.
  7. Media Lightbox: The widget offers a built-in lightbox feature, enabling users to view high-resolution images and videos directly on the website without leaving the page.
  8. Dedicated customer success team: We can guide you through all the steps and fill in some of the requests quickly. So feel free to talk with us on the live chat.
  9. Built-in Analytics: The platform supports integration with Google Analytics but also provides built-in analytics that will show data such as views and clicks on the widgets
  10. Shoppable feeds and Product tagging: you can add interactive links on your feeds by adding links about the products and product info such as price and actual product image. 

Feedlink is one of the best influencer marketing tools and is your go-to tool for showcasing Instagram feeds right on your link in bio page. Think of it as a bridge that connects your Instagram content directly to your link in bio website, helping you keep your audience engaged with fresh, social content. Whether you’re using Instagram’s main app or exploring Threads, the new kid on the block, Feedlink has got you covered.

Here’s the cool part: Feedlink isn’t just about displaying your Instagram posts. It’s about doing it your way. Feedlink lets you customize the appearance of your Instagram feed to match your brand’s vibe. And for those of you who are selling products, tagging them in your posts is a breeze with Feedlink. This means your visitors can shop your products directly through your Instagram photos, making their shopping experience seamless and fun.

Additionally, Feedlink allows embedding a post from Threads. With just a few clicks, you can integrate Threads posts into your link in bio page, ensuring that your content stays fresh and engaging.

Here are additional 2 free options on how to add your Instagram feed in WordPress or any other web platform:

3. Instagram’s official embedding option

Instagram offers an easy embed feature that lets you add an Instagram post on WordPress.

  1. To start, open your Instagram business app in the browser .
  2. Open the image you want to embed and choose the 3 dots menu in the upper right corner.
  3. Choose the option ‘Embed‘ and copy the code.
  4. Open your WordPress editor and go to the page where you want that post to appear.
  5. Select the area of the editor where you want to add the code and click on the + icon.
  6. Select the ‘Embed’ block and paste the image URL in the input field.
  7. Click ‘Update ‘(or ‘Preview‘) to see your embedded Instagram feed.

Check the full Instagram’s official embedding guide.

Although these are simple ways to embed your Instagram feed, they come with many limitations:

4. 3rd-party Instagram feed plugins for WordPress or any website

EmbedSocial is not the only WordPress Instagram plugins that provides a free version for embedding Instagram feeds.

There are plenty of other tools that can help you do a similar task.

Before using the final tool, we suggest checking the WordPress plugin directory or the Shopify apps store for relevant apps like Smash Balloon that might provide similar functionality.

Note: Instagram is continuously changing the API, and you will need a professional tool built by developers that have API access to the Instagram platform. In June 2020, Instagram stopped using the old API (“Basic Permission”) to display photos from personal Instagram accounts to widgets. This means that 3rd party apps that use the current API can no longer display pictures from your account if they don’t switch to the new API. You will need to convert your Instagram Personal account to Instagram Business Account or an Instagram Creator Account. EmbedSocial can provide this, and it is already compliant with the latest API changes.

Learn more about the new significant Instagram API changes

Key takeaways

Congratulations on learning how to extend your Instagram activity’s reach beyond Instagram’s mobile app! 

Using a user-generated content platform can be a valuable tool to attract potential customers with your Instagram content on your website.

EmbedSocial is a full social media aggregator that generates social media content from all major social media networks, has moderation options to have full control over which Instagram posts are published, and gives options to embed multiple Instagram feed widgets on numerous websites, 

We hope that these Instagram widgets will help you offer a unique experience for your website visitors.

Feel free to contact us for any additional help. We are always here for you!

Happy embedding!

FYI: You can embed Instagram widget automatically with a social media aggregator and alive your website with fresh content.

Embed Instagram widget on your website automatically!

Generate and display Instagram content from your feed, mentions, or hashtags directly to your website.

Start 7-day free trial

EmbedSocial currently integrates with all the major social media platforms, and all the integrations are through an official API. These integrations allow you to do more than just the option to embed Facebook feeds. You can:

For any additional inquiries, you can always contact our support team with a click on the bottom right chat icon.

FAQ about embedding Instagram feeds

As you’ve read, we showed you step-by-step tutorials on using free tools to add your Instagram feed on your website and websites built with other platforms, such as WordPress.

You can manually display Instagram feed on website or use a free version of our WordPress Instagram plugin to embed Instagram content automatically.

As a summary, here are some key takeaways:

What does embed Instagram mean? 

To embed means to display something on a website. In a more technical definition, embed Instagram refers to ‘PASTE a code’ that will show an interface of Instagram posts, usually in an iframe as a widget, on a web page’s position where the code was placed. To that, embedding Instagram means displaying an Instagram feed on a website. 

How do I get the embed code from my Instagram post?

To embed a single Instagram post, open the post on a PC, click the top-right 3 dots icon, and click Embed. A pop-up will display the embed code.

How do I embed Instagram feed code? 

​To embed a code, usually, you will need to send the code to the website developer, or if you use WordPress, you can copy and paste the code into an HTML block in your WordPress page and embed an Instagram gallery just like that.

Can I add an Instagram feed plugin for the website?

Yes, you can add an Instagram feed plugin to your website. Various plugins, both free and premium, can help you showcase your Instagram feed on your site. Check the social media feeds WordPress plugin to embed paid or free widgets from the EmbedSocial platform.

Where can I show my Instagram feed on websites?

Common places to showcase the feed include the homepage, sidebar, footer, or on a dedicated “Instagram Gallery” page. The choice depends on your website layout, your goals for featuring the Instagram content, and the level of prominence you want to give your feed.

How do I make my Instagram feed interactive with links?

The Instagram feeds created with EmbedSocial’s editor can be transformed into interactive widgets by adding custom CTA links or even tagging product information on the feed photos. To do this, open the feed in the editor, click on the Links tab, and choose to add one link to all photos or add a particular link or product tag to each image separately.

How do I embed an Instagram feed in an iFrame?

The widgets have their own iframe code. To get the iframe code, open the Instagram feed widget in the editor, and in the left-hand Settings panel below the JavaScript code, click the option iFrame code. In the popup, you can choose different code versions with fixed height or fixed width. 

What is a social media aggregator?

Social media aggregator is a tool that generates posts published on social media networks and help analyze, moderate, and display on your website.

Do you need permission to embed Instagram posts on your website?

When considering embedding an Instagram feed on your website, you typically do not require explicit permission from the individual post creators. This is because the functionality to embed is provided directly by Instagram, implying a level of consent for sharing.

Can you make your Instagram feed shoppable?

Yes, you can make your Instagram feed shoppable and seamlessly integrate this functionality when you display the Instagram feed on your website.

Exit mobile version