embed Instagram feed

How To Embed Instagram Feed On Website?

17 minute read

Instagram has a user base of over 500+ million daily active users (DAUs). The massive user base reflects the ability of the platform to generate a variety of content. Integrating such content on the website has proven to be a game-changing strategy for budding brands and businesses.

When you embed Instagram feeds on website, you are making it visible to your website visitors, which would create higher reach opportunities for your Instagram content and grow your followers.

While these were just a few advantages of adopting this strategy, continue reading as we will be highlighting the benefits in detail.

Steps To Embed Instagram Feed On Website

We have created a tutorial for you to collect, curate, and embed Instagram feeds on any website simply and easily without any technical expertise or complexity.

The Taggbox Widget guide contains step-by-step solutions for all popular website CMS platforms, so you need not worry about missing out.

Step 1. Create a FREE Taggbox Widget Account

Step 2. Select the Instagram Feed Type

Step 3. Design and Customize your Instagram Feeds

Step 4. Generate the Instagram Feed Embed Code

Step 5. Embed Instagram Feed On Any Website

Step 1. Create a FREE Taggbox Widget Account

1. Login or Sign up to your Taggbox Widget account.

Instagram feed

2. Click on “Add Social Feeds”.

add Instagram feed to website

Step 2. Select the Instagram Feed Type

1. Select ‘Instagram’ as your source to fetch the posts.

instagram feed embed

2. Pick the source type from the following options to collect posts from Instagram.

  • Hashtag (#) – Collects live Instagram hashtag feed.
  • Handles (@) – Collects Instagram posts from the business profile.
  • Stories – To embed Instagram Stories on the website.
  • Mentions (@) – Aggregate Instagram posts where your brand has been mentioned.
  • Tagged – Curate feeds where you have been tagged on Instagram.
  • Videos – Aggregate all-format Instagram videos.
  • Reels – Check 🗹 “Only Reels” option in the checkbox section below to embed Instagram reels on website.
  • Personal Account – Collect Instagram uploaded posts from your personal account.
instagram feed on website

3. Once you select the feed, click on the “Create Feed” button.

Important: By clicking on ‘Create Feed’, you will be redirected to Instagram for a secure connection, and complete the required information to connect to Instagram successfully. If you manage multiple pages from your connected business account, then Taggbox will display all of those pages so that you can choose the page from which you want to add Instagram feeds.

Embed Instagram Feed On Website Now!

  • Hashtag
  • Handle
  • Stories
  • Mentions
  • Tagged
  • Reels
  • Videos
  • Personal Account

Give Taggbox a Try – it’s free for 14 days

Start my free trial

Step 3. Design and Customize your Instagram Feed like a Pro

– Different Themes to Embed Instagram on Website

embed instagram gallery

A collection of free themes that are meant to engage users and boost conversions. Easily compatible, responsive, and fast-loading themes with a wide range of options.

– Customization your Instagram Feed

instagram feed html css
  • Background: Make the widget background transparent to align with the website theme or make it custom.
  • Banner: Customize your own template by adding colors, text, and icons to your banner image, or you can upload your own image.
  • Card Style: Edit the card style of your Instagram feeds by customizing colors, text, icons, and other social sharing options with CTA Buttons.
  • CTA: Add the ‘Call-to-Action’ button to your Instagram posts to simplify users’ journey and get them ahead of your sales funnel.
  • Theme Settings: Try different post settings with the Custom CSS feature to meet brand requirements.
  • On-Site UGC Uploads: Allow users to upload their images, feedback, and ratings to your on-site Instagram widget.
  • Custom CSS: Customize Instagram feeds layout and implement your favorite design with the Custom CSS option.

Ready to try it out by yourself? Take 14-days free trial and show an Instagram on your websites and other digital services.

Step 4. Generate the Instagram Feed Embed Code

Once you get all your posts and are done with all the moderation and customization, follow the below-given steps to get the Instagram profile or page feeds embed code that you can use in your website code to embed Instagram feed on website.

1. Click on the Publish button on the widget editor screen.

embed instagram feed on website

2. Select the “Embed On Webpage” option to embed feed on your website.

embed instagram

3. Now, choose your Website Building Platform like (HTML, WordPress, Wix, Shopify, Weebly, Squarespace, etc.)

embed instagram feed on website html code

4. Customize the height and width of your widget and copy the generated embed code. Now you have successfully generated & copied the “Instagram Embed Code” for your website. Follow the below-given steps to show your Instagram feed on your chosen website building platform.

Step 5. Embed Instagram Feed On Website

1. Log in to your website and go to the backend or editor section of the page where you want to embed the Instagram widget.

2. Paste the copied Instagram embed code from Taggbox Widget to the body of your page and publish/update the changes.

3. You will have successfully embedded Instagram feeds on the website.

show instagram feed on website

How To Embed Instagram Feed On HTML?

HTML is a well-organized website platform trusted widely by businesses and brands. It seems like you’re one of them. Want to give more to your website visitors so that they stay longer and increase your website’s dwell time?

Well, here are some easy steps you can follow to embed Instagram feed on website using HTML code.

Step-1: Log in to your HTML website and choose the landing page where you want to add an Instagram feed widget.

Step-2: Paste your copied “Instagram widget HTML code” into the page/blog/sidebar section.

Step-3: Apply the changes and Tada!! You will have successfully embedded the Instagram feed on the HTML website.

Instagram widget html

How To Display Instagram Feed On WordPress?

WordPress is the perfect platform for designing futuristic web pages that have their uniqueness. If you are someone who likes giving unique content to your website visitor, then embedding an Instagram post can be the perfect solution for you.

instagram embed wordpress

Here are some steps you can follow to embed Instagram feed on WordPress website:

Step-1: Log in to your WordPress website.

Step-2: Select and edit the web page where you want to embed Instagram feeds gallery. 

Step-3: Select the Pages>Add New Page Section from the Dashboard in the WordPress 5.0 editor.

Step-4: Choose the + button, select the custom HTML option, paste your Instagram embed code, and apply changes to display the Instagram gallery on the website.

Check the full tutorial for all versions of WordPress to embed Instagram Feed On WordPress.

Embed Instagram Feeds on Webflow

Webflow is another great CMS platform that allows users to create websites without writing a single line of code. You can easily embed Instagram feeds on Webflow in less than 5 minutes. 

Here is a step-by-step guide on How to embed Instagram feed on the Webflow website.

  1. Login to the Webflow editing tool.
  2. Go to the section where you want to embed your Instagram feed
  3. Now click on the “+” icon and select the “Embed” button.
  4. Paste the copied Instagram feed embed code on the editor
  5. Click on the “Publish” button and the live Instagram feed embed on Webflow website.

How To Add Instagram Feed To Shopify?

Shopify is the perfect website for businesses looking for a seamless platform to create a free e-commerce website to reach a larger audience. 

add instagram feed to shopify

Embed Instagram feed on Shopify store to engage your website visitors and increase conversion rates. 

Step-1: Click on Online Store under the Sales Channels section 

You will see a drop-down list in the sidebar; select the Themes option

Step-2: On the right-hand side of the screen, you will find an Action button on your current theme

Step-3: Click that Action Button and choose Edit code from the drop-down list.

Step-4: Select Layout/Templates/Section

(Eg: For Homepage – Index. liquid) where you want to embed Instagram profiles or page feeds 

Step 5: Paste the copied code of the Instagram post and click on Save. 

Check the complete guide to add Instagram feed on Shopify website.

How To Integrate Instagram Feed On Squarespace?

Squarespace is a unique website builder and a preferred choice for businesses who aren’t afraid to experiment with all the templates Squarespace provides. 

embed instagram feed on squarespace

Adding Instagram feeds to your Squarespace website will be the perfect visual aid for your website visitors and keep them hooked for longer. Here are the steps you can follow:

Step-1: Open a page or post editor and click “Add Block.” 

Step-2: Select embed from the menu and click the </> icon in the URL field. 

Step-3: Now paste your Instagram photo gallery embed code on that box and click set.

Step-4: Once done, click Apply to publish your changes.

Complete guide to add Instagram feed on Squarespace website.

How To Embed Instagram Feed On Weebly?

When you put the visually appealing Instagram content on your Weebly website, you receive some astonishing visual marketing benefits for your eCommerce website.

weebly instagram feed

Don’t look anywhere else, as we have put together a few simple steps to embed an Instagram post on your Weebly website effortlessly.

Step-1: Find the Embed Code element (in the menu on the left-hand side of your screen) 

Step-2: Drag and drop the Embed Code element on the page where you want to attach feeds from Instagram to the Weebly website.

Step-3: Click on the HTML box and choose the Edit Custom HTML option.

Step-4: Paste the Instagram widget embed code to display the Instagram feeds Weebly Website

How To Showcase Instagram Feed On Wix?

Wix is the foremost choice for businesses who prefer websites created entirely by them, as Wix gives users the freedom to design and develop their web pages the way they want.

wix instagram feed

Well, embedding an Instagram feed is a similar experience as you can create and customize a branded and personalized one for your website. 

Here, follow these simple steps to embed Instagram feeds on Wix Website

Embed Instagram feed on Wix with the Classic editor

  • For classic editor follow the below steps to embed Instagram feed on Wix website.
  • Click on “+”.
  • Choose the “Embed a widget” option from the available list.
  • On the page, you have the option to adjust the height and width of your widget depending on the page layout.
  • Click “Enter code”
  • Paste the embed code in the Wix Editor.
  • Tap “Update” and your Instagram feed will appear on your Editor page.
  • Click on the “Publish” button to finalize your changes.
  • Well, that’s it. Your Instagram feed is live on your Wix website.

Want to embed Instagram Feed on your Wix Website – Take Taggbox Widget Free Trial

Embedding an Instagram feed on Wix with the ADI editor

  • While working with the Wix ADI editor there are a few steps changed. Let’s look at them.
  • Click on the “+” icon.
  • Select the section where you wish to embed the Instagram feed.
  • Select “HTML Embed” on the left.
  • Choose from the in-built templates, and edit the default content there.
  • Click on the “select” button appearing next to HTML
  • Select the “website” option here instead of the Instagram feed embed code.
  • Add the preview URL of your feed, and adjust the width and height of your feed display.
  • Now, tap on the “Publish” button to make your feed functional on your Wix website.

Embed Instagram Feed on Drupal

Drupal is another trusted CMS platform used by big brands like Tesla, NBC, etc. It is an open-source platform with numerous customization options. Here is the step by step guide to embed Instagram feed on Drupal.

  1. Once you log in to your Drupal backend, find “Structure”. 
  2. Choose “Block layouts” and tap on the “Custom block library” option. 
  3. Select the “+ Add custom block” option there. 
  4. Change the text format to “Full HTML” and give your block a name. 
  5. Choose “Source” from the toolbar and paste the embed code in the field. 
  6. After you save the changes, navigate to “Block layout” and choose where your Instagram feed will appear. 
  7. Click on “Place block” and choose the block you want to add. 
  8. You can customize your feed and show it only on a specific page. 
  9. Scroll down and select the “Save blocks” button. 

High Five! Your stunning Instagram feed is now embedded on your Drupal homepage. 

Embed an Instagram Feed on TYPO3

TYPO3 is more famous in Central Europe and is one of the most popular content management platforms. Embedding Instagram feeds on TYPO3 is very simple. Follow these easy steps to embed instagram on TYPO3 site. 

  1. Log in to your TYPO3 account, you will be redirected to the editor page. 
  2. Click the “+ Content” option.
  3. Click on “Special elements” and then choose the “Plain HTML” option. 
  4. Paste the Instagram embed code and click “save”.

Well, can’t believe it’s that easy right ? Try it for yourself and experience the simple process of embedding Instagram feeds on your TYPO3 website. 

integrate instagram feed into website

Other Methods Of Adding Instagram Feed To Website

Method 1 – Using Instagram WordPress Plugin

This is an option for WordPress users who rely heavily on plugins to integrate engaging and amazing functionalities and features into their website without much hassle or expertise.

Instagram WordPress Plugin

Taggbox has created a WordPress plugin to create and show Instagram feeds on the website directly through the plugin. Here’s how you can embed Instagram feed on website using the Taggbox WordPress Plugin.

  • Log in to your WordPress account and navigate to the Dashboard. Click on Plugins and then on Add New Plugin. 
  • Type Taggbox Widget in the search box.
  • You will be able to see the Taggbox Widget plugin on your screen. Click on the Install option to download and activate it.
  • Log into the account with your credentials. At this point, you can create a widget if you haven’t already. If you have already created a widget, click on the Copy option.
  • Redirect to the webpage or section where you want to embed Instagram feed. Click on “+” to add a block.
  • Next, select Taggbox and paste the copied embed code into the provided box.
  • Click on the Update or Publish button to finish the process.
  • Kudos! You will have successfully embed Instagram feed on website. 

Method 2 – Embed Instagram Post Using Self-Embed Option

It may come across as a surprise to you, but Instagram offers a post embedding option to its users. The platform understands the significance of displaying Instagram feeds on the website, allowing users to embed their preferred Instagram posts, and it’s seamless & free of cost. The only limitation is that you can only embed one post at a time, unlike other embedding tools that allow you to embed an entire visual gallery to your website. 

But, if you want to embed a single Instagram post on your website, then these simple to follow steps can be perfect for you:

Step-1: Open Instagram on the browser.

Step-2: Go to the Instagram post you want to embed on your website.

Step-3: Click on the three dots at the post’s top right corner.

instagram feed

Step-4: Click on the embed to generate the code.

embed feed instagram

Step-5: Copy & Paste the code into the backend of the webpage where you want to display Instagram feeds on website.

instagram iframe embed code

The options with Instagram’s embedding are limited. You can only attach one post at a time. It does not have any unique functionalities like customizations, content moderation, performance analytics, real-time content updates, interactive design, etc., to align with the website’s layout.

Want to embed Instagram Feed on Any Website – Take Taggbox Widget Free Trial

Video Tutorial To Embed Instagram Feed On Website

Still Confuse? watch the video to know how to add Instagram on website –

Top 6 Benefits Of Adding Instagram Feed To Website

Instagram is the key platform for brands when it comes to leveraging social media feeds for their growth campaigns. Instagram has some visually appealing content to offer, and when you embed a responsive feed, well-equipped with Instagram’s content, on your website, the benefits are astonishing.

Here we have listed some most valuable benefits of adding Instagram feeds to your website.

1. Increase Brand Awareness

When you embed Instagram feed on website, you give your website visitors an insight into your social presence and increase your brand awareness.

Visitor can explore your Instagram content while staying on your website and engaging with it. If they find your content interesting, they will naturally follow you on Instagram. All this will increase your Instagram followers, create brand awareness and boost your reach.

2. Build Brand Trust With UGC

User-generated content is the perfect word-of-mouth marketing strategy. Displaying UGC on your website embedded as an Instagram feed brings authenticity to your content and increases brand trust among your website visitors.

An Instagram post that updates in real-time also encourages your customers to create more UGC for you, as every time they make a post, it gets displayed on your website. It indicates that you give importance to their opinions, adding more to your social presence.

3. Improve Website Dwell Time

Every brand looks for opportunities and premium content to improve its website’s dwell time. The attention-grabbing and highly engaging Instagram feed can do the trick. 

You can bring visually appealing Instagram content to your website, and the visitors can engage with it and explore the content without leaving your website. It increases your website dwell time, and the live Instagram feed also encourages them to visit again to check if you have something new to offer.

4. Increase Conversion Rates

When you embed Instagram feed on website, it brings authenticity to your products. Especially when you embed a vibrant UGC gallery, it works as a trust-building factor for your brand. All this results in an increased conversion rate.

Taggbox widget allows users to embed user-generated content on your website. People seek a reliable source before making purchases online. The real-life customer experiences from Instagram become a deciding factor for potential customers to buy your products and boost your sales.

5. Enhance The Look Of Your Website

Instagram feed embedding tools like the Taggbox widget provides social media aggregators that collect content from Instagram and moderate it to filter out irrelevant or repeated content.

Not just that, they also allow users to customize their Instagram feeds by providing various templates, colors, fonts, and themes to make the Instagram post more visually satisfying for the visitors and work as an eye-catcher.

6. Repurpose Content to Transform your Social Ads

Leverage your amazing, colorful, and lively Instagram feed in your targeted ads. Segment your audience, study their behavior, and develop ads to promote the product they have been viewing or offer a solution to their pain points. This helps you understand your audience better to get one step ahead of them and offer them solutions to build trust. 

Final Thoughts

We have given you some effective yet simple ways to show the Instagram post on this website. Now it is time for you to evaluate how you can leverage Instagram for your website visitors.

It will activate users to spend more time on your website by engaging with the responsive content. Instagram feed is the perfect opportunity for your brand to generate leads, increase conversions and boost brand awareness.

Embed Instagram feed on website using Taggbox Widget, keep your website up-to-date and increase your brand’s trust significantly!

Boost Your Website Performance With Instagram Widget

Try the performance-driven Instagram feed on website!

FAQs

To embed an entire Instagram feed widget, you can use the Taggbox Widget tool that will help you collect, curate, and present content on the website using a unique hashtag(#), handle(@), videos, reels, stories, mentions, tagged, etc. You can simply embed the generated feed widget into your web pages.

Embed Instagram refers to the idea that users can generate an embed code for any Instagram feeds and copy and paste it on the backend section of their website where they want to show Instagram feeds.

Taggbox Widget offers a seamless solution to integrate an Instagram widget on website using the HTML code. Once you have curated a Widget using Taggbox, you need to select your CMS platform from available options on the dashboard. Then, It will generate a unique HTML code that you can copy and paste on the backend of your website where you want the Instagram feeds to appear.

Yes, Taggbox Widget has an exclusive plugin for WordPress sites that you can find on the WordPress dashboard by searching "Taggbox Widget" from the plugin section. Once you add a plugin to your WordPress dashboard, it will help you easily add Instagram feed widget to your WordPress website.

You can show Instagram feeds on multiple pages of your website. Be it on the footer, the sidebar, the header, homepage, blogs, or any desired web page. You just need to copy and paste the embed code on the backend of your website where you want your Instagram feeds to appear.

Yes, Taggbox offers you a custom post feature to add specific posts with just a few clicks. Log in to Taggbox account > Go to Apps & More > Select “Custom Post” > Add the Post URL > Click “Create Post” button. Your particular post from your feed will display automatically.

icon Don't Miss Out!

Subscribe to the Taggbox blog

Boost Engagements With User Generated Content

Start Free Trial
Free Trial