Digital Marketing & SEOSocial Media

Step by Step Process to Embed Instagram Feeds on HTML Site

Today, with more than one billion users, Instagram has become one of the most popular social media platforms. Embedding Instagram posts on websites will grab the attention of your visitors and enhance the dwell time. Also, it will add vibrancy to your website that provides it a better look.

You can embed Instagram feeds on HTML websites in two quick and easy ways. Let’s understand them in detail.

Method 1: By using the Social Media Aggregator Tool 

Before understanding the process, let’s know about a social media aggregator. It is a tool that assists users in collecting social media feeds or content and helps in adding them to the website.

Using Social Media Aggregator is one of the easiest ways to embed Instagram Feeds on your HTML website. Once you are ready to use a social media aggregator, select the tool that suits your website. Then, you can follow the below stages to embed them on your HTML website. 

Stage 1: Create your Instagram Feed 

  1. Create your account on the selected Social Media Aggregator tool.
  2. Log in to your account. 
  3. Once you open your account, create Social Feed using the tool. You will see social media platforms as the source of collecting content. 
  4. Select Instagram as we are creating Instagram feeds. 
  5. Now, you will be provided with different options to collect feeds from Instagram. For example, if you want to collect content for Instagram feeds from a specific Instagram account, then enter the required username. And, if you like to develop Instagram Feeds from posts with a particular hashtag, choose the hashtag option and enter your choice. Also, you can choose other options like IGTV videos, personal accounts, stories, etc.
  6. Then, log in to your Instagram account to fetch the required content. 
  7. After that, click the ‘Create Feed’ button. It will create an Instagram feed that will appear on the editor screen. 

Stage 2: Personalize your Instagram Feed

The editor window of the social media aggregator comes with various options and features. It offers the flexibility to design and moderate your Instagram feeds. Here is how you can use these features.

  1. Choose the required theme from the given options and apply the selected changes.
  2. After that, you can change your Instagram widget background and apply the changes. 
  3. You can modify your Instagram feed by adding a banner. You can style the cards as well.
  4. The moderation panel provides a feature that enables users to choose if they manually want to approve every Instagram post that appears on the widget or not. 
  5. If you select the manual option, all your Instagram posts will go into moderation. It means the posts that you approve here will go live in the widget. Also, if you choose not to go for the manual option, you can still reject the unnecessary posts anytime later. 
  6. Another important feature is adding the CTA button, and you can customize it as well to make it more appealing. 
  7. Also, the moderation panel helps you to highlight and pin the best Instagram posts at the top of the website.

Once you personalize your Instagram feed, you can embed this new Instagram widget on your HTML website. It will give your website a better look and increase the chances of attracting viewers.

Stage 3: Embed the Instagram Feeds on your HTML Website

  1. To add the Instagram Feeds, click on the Publish button. 
  2. Then, you will see a dialog box that gives you various options with numerous website platforms. Select the HTML option. 
  3. Now, you need to set widgets size as per your website. 
  4. Click on the ‘Get Code’ button to generate an Instagram feed embed code for your HTML website.
  5. Copy the generated Embed Code.  
  6. Lastly, open your HTML website editor and paste this embed code. 

Method 2: By Using the Official Instagram Embed Feature

If you do not want to go for Social Media Aggregator Tool, you can use the official embed feature provided by Instagram. To use it:

  1. Open browser and Login to Instagram. 
  2. Choose posts that you want to embed on your HTML website. 
  3. You can notice three dots at the top right side corner of all Instagram posts. When you click on it, you will see an embed option. 
  4. Copy that embed code. 
  5. In another tab, open your HTML website editor. 
  6. Now, paste the Embed Code, and the selected Instagram post will appear on your website. 
  7. If you want to embed more Instagram feeds on your website, repeat the above steps for every feed.

Final Thoughts 

After reading the two quick and easy methods to embed Instagram Feeds on HTML, now the real decision lies on you. If you go for social media aggregator, you get more features to design widgets and only need to aggregate your Instagram posts one time, while with manual methods, you have to repeat the process again and again. So choose the method which you find easiest and embed Instagram feeds on HTML.

Related Articles

Back to top button