How To Embed Instagram Feed Widget On Website

Since its inception, Instagram has been claimed to be a very powerful and effective marketing platform for businesses looking to gain organic reach and visibility for their products and services. Now just imagine how great the impact would be if you embed an Instagram Widget on website!

With 500 million active daily users, Instagram presents a humungous opportunity of growth to businesses, big or small. A dedicated Instagram strategy helps businesses to go a long way thereby expanding the overall client base for your business.

Embedding an Instagram content on your business website is one such strategy that might help you to present constant social proof to the visitors of your website. Now there might be many ways you may embed Instagram feed on website.

This article will guide you on how to embed Instagram website Widget. So, let’s get started!

Taggbox Instagram Widget For Website

With terms like “Embed”, “Widget”, etc., the whole process might seem a little bit too technical, but actually, it is not!

Embedding Instagram Feed on your website using a social media feed widget is relatively simpler than you might be hyping it all about. It can be divided into four simple steps-

Step-1: Create Instagram Feed with Taggbox Widget.

Step-2: Apply Widget Theme

Step-3: Generate The Widget Embed Code From Taggbox Widget

Step-4: Embed the feed widget on your website

So, let’s learn how to embed a widget of Instagram post on your website step by step.

Create Instagram Post Widget With Taggbox

In order to create your own widget, follow these really simple steps and you will find yourself with a beautiful Instagram feed widget. 

Step-1: Create an account with Taggbox Free Website Widget. Login to your account. You will land on the dashboard.

Step-2: Click on “Add Social Feeds” to add social feeds on widget. 

Step-3: A “Pick A Source” dialogue box appears. Choose Instagram as your Feed Source. 

Note: Taggbox gives you the option to aggregate feeds from both Standard Instagram Account and Instagram Business Account. According to the updated Instagram API Policy, now you cannot fetch posts on the basis of hashtag and location through a Standard Instagram Account. To do so, you need to have an Instagram Business Account. Here, we are choosing the Instagram Business Account.

Step-4: A Create Instagram Feed box will appear. Select a source from Hashtag(#), Handle(@), Mention, Reels, Stories etc and create an Instagram connection by clicking on Create Feed.

Step-5: A Continue With Facebook box will appear. Click on it and provide your login credentials to connect your Instagram Account.

Great! You have successfully aggregated Instagram posts and they will soon appear in the Widget Editor. 

You can customize the look and feel of the Instagram feed widget using the Personalize panel in the Widget Editor. You can also curate your aggregated Instagram posts to only allow the best quality content to be displayed on your social wall using the Moderation panel in the Widget Editor.

Apply Widget Theme

Now, this is the easiest and the most fun step of the whole process. Once you have aggregated your own Instagram feeds in the Widget Editor, follow these easy steps to apply Widget theme.

Step-1: Click on the Design > Themes in the left column of the Widget Editor.

Step-2: From the Themes, choose the Widget Theme.

Step-3: Click on Apply Theme.

Step-4: You will see the Widget of Instagram aggregated content in your Widget Editor very soon.

And that’s it! You have successfully created an widget. Now all you need to do is embed it on your website. So, let’s jump on to the next step of embedding Instagram feed widget on the website.

Also Read – Embed Instagram Slider Widget On Website

Generate The Embed Code From Taggbox Widget

Now, in order to embed an Instagram post widget on your website, first of all, you need to generate embed code from our powerful Instagram aggregator – Taggbox. Follow these simple steps to know how to generate embed Code from Taggbox.

Step-1: Having created the Widget for Instagram feed in your Widget Editor, click on the Publish button.

Step-2: Select Your Website Building Platform from the dialogue box that appears. ( e.g.- Let’s Choose HTML.)

Step-3: Set the Width, Height, and Height Type as per your requirement and click on get code

Step-3: Copy the generated code to clipboard.

This is the desired Embed Code we were aspiring to generate from Taggbox. Once generated, this embed code can be copied and pasted at the backend of any webpage thereby allowing you to embed the Widget on your website.

Embed Instagram Post On Your Website

There are many website building platforms which users employ to create their websites. Let’s learn how to embed Instagram Feed Widget on some major website building platforms.

Embed On HTML Website

HTML is one of the most basic and preferred platforms for creating websites. It is a developer’s forte. In order to embed the Instagram HTML Widget on the website, follow these basic simple steps-

Step-1: Select HTML as your website building platform.

Step-2: Generate the embed code from Taggbox (Already explained). Copy the embed code to clipboard.

Step-3: Now, go to the backend of the webpage where you want to embed the widget. 

Step-4: Paste the copied code in the body section where you want to embed the Widget and save the changes. (If you are not a technical expert, you may ask your developer to do the same.)

Great! You have successfully embedded the Widget on your website.

Embed On WordPress Website

WordPress is one of the most popular website building platforms around the world serving most of the major websites of big and small brands all around the world. It comes with amazing customization features and plugins, both free and paid.

Follow these humble steps to embed the Instagram Widget On WordPress website

Step-1: Select WordPress as your website building platform.

Step-2: Generate the Website Embed Code from Taggbox. (Already Explained).

Step-3: Open the page in your WordPress backend where you want to embed the Instagram hashtag feeds.

Step-4: Select “(+)Add Block” in the top left corner of the WordPress Editor.

Step-5: Here, click on Formatting and then choose Custom HTML.

Step-6: Paste the copied code in the editor.

Step-7: Click on Publish/Update post and You’re done.

Embed On WIX Website

WIX is a cloud-based website creating a platform which is really easy to use. Any non-technical person with basic computer knowledge can create a website on WIX.

In order to embed Instagram Widget on WIX Website, follow these straightforward steps-

Step-1: Select WIX as your website building platform.

Step-2: Generate the Embed Code from Taggbox. (Already Explained)

Step-3: On your WIX website, navigate to the page where you wish to embed it.

Step-4: In the WIX Editor backend of that webpage, click on “+Add” Button.

Step-5: Click on More and Select HTML iframes from the embed. Here, paste the embed code in the Code Field.

Step-6: Click on Apply to save the changes.

Embed On Squarespace Website

Squarespace is the website building platform for the creatives. It comes with amazing customization options that help you create beautiful websites within a matter of a few hours.

In order to embed Instagram feed Widget on Squarespace website, follow these easy steps- 

Step-1: Select Squarespace as your website building platform.

Step-2: Generate the Embed Code from Taggbox. (Already Explained)

Step-3: On your Squarespace website, navigate to the page where you wish to embed the Widget.

Step-4: In the backend of the webpage, click on  “+ Add/Edit Block“.

Step-5: Select Embed Code from the menu.

Step-6: Click on the </> icon in the URL field.

Step-7: Paste the copied code and click on Apply and save the changes.

Embed On Weebly Website

Weebly is a free website building platform. It comes with the simple drag and drop interface which makes it fun to use.

In order to add Instagram Feed Widget on Weebly website, follow the below-given steps-

Step-1: Select Weebly as your website building platform.

Step-2: Generate the Embed Code from Taggbox. (Already Explained)

Step-3: On your Weebly website, navigate to the page where you wish to embed the Widget.

Step-4: Select “Embed Code” from the Navigation bar in the left and drop it on the position on the webpage where you want to embed the Widget.

Step-5: Now, click on HTML box and Edit Custom HTML option.

Step-6: Here, paste the copied code in the box and publish your changes.

Embed On Shopify Website

Shopify is the website building platform you go to when you wish to create an online e-commerce website. It lets you sell products online across multiple platforms and social media.

In order to Add Instagram feed widget on the Shopify website, just proceed as directed-

Step-1: Select Shopify as your website building platform.

Step-2: Generate the Embed Code from Taggbox. (Already Explained)

Step-3: On your Shopify website, navigate to the online store where you want to embed the Widget.

Step-4: Go to Edit HTML/CSS option on the top right of the page.

Step-5: Select Layout/ Templates/Section (E.g. For Homepage – Index.liquid) where you want to display your Instagram Social Hub.

Step-6: Paste the copied code and click on Save.

Conclusion

So, this was a complete guide on how easily you can embed Instagram feed on your website. Wasn’t that easy?

So, what are you still waiting for? Hop on to the amazing ride of embedding widget of Instagram feed on your website and enhancing your website visitors’ overall user experience.

Also Read – Embed Instagram Stories On Website