How to Embed Instagram Images on a Website: Full Guide

Embedding Instagram images on a website is a good way to highlight your recent posts, product photos, user content, and other information. This may help website visitors get familiar with your Instagram page and understand how you promote yourself there.

There are a number of methods that let you embed Instagram images on a website. These include embedding single Instagram posts, adding an Instagram feed widget, or connecting to the Instagram API.

The choice of the method depends on your intentions to either highlight a couple of specific posts or display new content from an Instagram account. This guide will teach you all the details about each method as well as the requirements before starting the process.

What Are Some Reasons to Show Your Instagram Photos on Your Website?

By adding Instagram pictures on your site, you will be able to:

• Display products or services: You can post product photos, demos, and updates.
• Refresh the website: The automatically generated feed can feature your Instagram photos without having to manually update your site.
• Boost customer trust: Customer-generated content or images can make visitors better understand how your products work.
• Link your website to social networks: Allow users to easily access Instagram pictures and profiles.

Select pictures that are related to your website and make sure you have the right to post content.

3 Ways to Show Instagram Photos on Your Site

First of all, evaluate your skills, money, and the necessity for updating content automatically.

1. Embedding a single Instagram post

This is an easy way to show a certain Instagram post on your web page or blog. Here is how to do that:

• Go to Instagram and find a post you want to show on your web page.
• Open this post and open its options.
• Select the option "Embed" (if it exists).
• Copy the embed code generated by Instagram.
• Open the HTML editor of the page you want to add this post to.
• Add the code to your page and check out the result.

Instagram posts will be shown on your page if it is available to embed.

Best suited for: Blog posts, landing pages, particular product posts, customer stories.

Shortcoming: To show each photo separately you will have to embed it manually.

2. Install an Instagram feed widget

An Instagram feed widget is a software used to showcase several Instagram photos in a feed or gallery on your website. Most of these widgets have a visual interface through which you can connect your account, choose a layout and install the feed on your site without coding the whole integration. How to do it:

• Pick an Instagram feed service that fits your website platform.
• Login to your Instagram account through their supported authentication system.
• Choose which photos and layout to show.
• Adjust the gallery design and spacing and choose the number of columns.
• Grab the widget installation code from them.
• Install it on your webpage and test it both on desktop and mobile platforms.

Before installing a feed provider, make sure you understand its pricing, account requirements, policies and offered features.

Best for: Businesses and store websites.

3. Implement the Instagram API

The Instagram API is ideal for programmers seeking greater flexibility in the retrieval and display of Instagram content. For instance, a company may wish to retrieve their Instagram posts and showcase some images in an artistically designed gallery.

However, this process will need specific skills, setup of the API, account authentication, and permissions.

Important: Instagram Basic Display API has been deprecated since December 4, 2024. Tutorials using this API or the old token generation method should be revised accordingly. For new integrations, see the Meta Instagram API documentation and choose the authorized access type that suits you.

Prerequisites for Using the Instagram API

Before integrating the API into your application, you should consider the following prerequisites.

• Instagram account: Most of the Instagram API integrations for receiving data from your account media work only if you have the eligible account type (for example, a Business or Creator account).
• Meta developer app: In order to implement the selected Instagram API integration, you will need to create a Meta app.
• Permissions and authentication: The required permissions and access to the account and its content should be provided.
• Access token: All API requests should be properly authenticated. It depends on the method, how you authenticate your app and which permissions you get.
• Server side application: It will be used to safely request media data and send it to the website.

How to Display Instagram Images Through the API

The steps provided below outline the broad approach that should be taken to create an Instagram gallery through a proper API integration.

Step 1: Set up your Meta developer application

Setup or configure a Meta for Developers application and set up the desired Instagram product/API configuration. Proceed according to the instructions provided by Meta for Developers regarding your choice of authorization method.

Step 2: Authorize the Instagram account

Authorize the Instagram account that meets eligibility requirements via the authorized authentication flow.

Do not request more permissions than necessary for your integration. Get an access token needed by your chosen API method and store it safely on your server. Do not display access tokens in HTML or public JavaScript files of your web site.

Step 3: Request Instagram media

Request Instagram media via the endpoint that supports it. Depending on the set of permissions and fields allowed by your integration, the response will provide data including the following:

• Media ID
• Caption
• Type of media
• URL of an image
• Link to the original Instagram post
• Date of publication

For example, an image item in your API response could include the URL of an image and a link to the original Instagram post. Your website could use those values to create the gallery.

Be sure to adhere to the latest documentation for endpoint URLs, field names, API versions, and permissions. Do not use the outdated Basic Display API endpoint from legacy tutorials.

Step 4: Display the images using HTML and CSS

Once your server has retrieved the authorized media, you can display the returned images using HTML and CSS. For example, the following HTML illustrates the basic structure of an image gallery. Replace the example image and post URLs with values supplied by your server.

<div class="instagram-gallery">
  <a href="https://www.instagram.com/"
     target="_blank"
     rel="noopener noreferrer">
    <img
      src="/images/instagram-image.jpg"
      alt="Latest Instagram post"
      loading="lazy">
  </a>
</div>

This example shows the structure of a single gallery item. It does not connect to Instagram or retrieve media automatically; your application must provide the correct image and post URLs. You can extend the structure to display multiple images and use CSS Grid to create a responsive gallery.

Step 5: Make the gallery responsive

Your Instagram gallery should look good on desktop, tablet, and mobile devices. Consider the following improvements:

• Use a responsive grid layout.
• Maintain consistent image dimensions.
• Use object-fit: cover when you want images to fill uniform gallery tiles.
• Add descriptive alternative text where appropriate.
• Use lazy loading for images below the initial visible area.
• Provide a link to the original Instagram post when appropriate.

Also test what happens when an image is unavailable or the API request fails.

Step 6: Error handling and API changes

API integration in Instagram requires continuous maintenance. Add error handling for failed requests, missing media, expired/invalid access token, and changed permissions. Make use of proper caching so that there are no unnecessary requests made to the API and the page loading becomes faster.

In case the gallery on your page displays posts automatically, make sure that you configure the refreshing process properly and test that it still works after making changes to the authorization.

Problems With Displaying Instagram Images

Instagram images are not displaying

Make sure that the post is public and embeddable or that your API integration has required permissions. Check the API responses and server logs for any missing URLs or requests.

The access token is invalid

It could be the case that the token expired, was revoked, or does not have the necessary permissions. Assess the authorization and go through the necessary steps to get a new token.

New Instagram posts do not appear

Look into the feed refreshing, caching, and response from the API. The gallery will not be able to refresh unless the application or the widget has the ability to fetch new items.

The gallery looks bad on mobile

Test the gallery across different screen sizes and look into the grid configuration, images sizes, spacing, and overflow. Make sure that visitors will be able to see the images without scrolling horizontally.

The old Instagram integration no longer works

In case you are using the discontinued Basic Display API in your website integration, you should upgrade to another suitable alternative. Check the API requirements before changing the code.

Conclusion

Posting Instagram photos on your website is useful for promoting products, social media posts, and establishing the connection between your website and Instagram account.

Embedding works best in case of selective posts, while the feed widget is recommended for continuously updated galleries. In case of the need for extra options for design and data management, then the Instagram API integration may be preferred.

Pick one option depending on your needs, check compatibility and functionality across different devices, and stay up to date with updates to preserve the integrity of integration.

Need assistance in social media integration for your website? Find out about Ucodice website development services, or get in touch.