Building an Instagram Feed on Your Website Using API

July 22, 2024
Debbie Moran

Introduction

Integrating an Instagram feed into your website can significantly enhance its visual appeal and engage visitors with dynamic, up-to-date content. By displaying your latest Instagram posts, you can showcase your social media activity and increase your followers. This tutorial will guide you through the process of embedding an Instagram feed on your website using the Instagram API and JavaScript.

Requirements for Integrating an Instagram Feed into your website

Basic knowledge of HTML, CSS, and JavaScript
An Instagram account
Access to the Instagram Basic Display API
A text editor (e.g., VSCode, Sublime Text)

Step 1: Setting Up Instagram API Access

Create a Facebook Developer Account: Go to the Facebook for Developers site and create an account.
Create an App: In your developer dashboard, create a new app and select the “Instagram Basic Display” product.
Configure the App: Set up your app by providing the necessary information and redirect URIs. Generate an access token to use the Instagram API.

Step 2: HTML Structure

Create an index.html file with the following content to set up the basic structure of your webpage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instagram Feed</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="instagram-feed" id="instagram-feed">
        <!-- Instagram posts will be inserted here -->
    </div>
    <script src="scripts.js"></script>
</body>
</html>

Step 3: Styling with CSS

Create a styles.css file to style your Instagram feed:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.instagram-feed {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.instagram-post {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.instagram-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Step 4: Fetching Instagram Posts with JavaScript

Create a scripts.js file to fetch and display Instagram posts:

const accessToken = 'YOUR_ACCESS_TOKEN';
const userId = 'YOUR_USER_ID';

fetch(`https://graph.instagram.com/${userId}/media?fields=id,caption,media_url,permalink&access_token=${accessToken}`)
    .then(response => response.json())
    .then(data => {
        const feed = document.getElementById('instagram-feed');
        data.data.forEach(post => {
            const postElement = document.createElement('div');
            postElement.classList.add('instagram-post');
            postElement.innerHTML = `
                <a href="${post.permalink}" target="_blank">
                    <img src="${post.media_url}" alt="${post.caption}">
                </a>
            `;
            feed.appendChild(postElement);
        });
    })
    .catch(error => {
        console.error('Error fetching Instagram posts:', error);
    });

Replace 'YOUR_ACCESS_TOKEN' and 'YOUR_USER_ID' with your actual Instagram access token and user ID.

Conclusion

Embedding an Instagram feed on your website using the Instagram API allows you to showcase your latest social media activity and engage visitors with dynamic content. This tutorial provided a simple way to integrate Instagram posts into your website using HTML, CSS, and JavaScript.

Try
RecurPost

Schedule and Publish your posts on multiple social accounts, read and reply to incoming messages with social inbox, and collaborate with your team and clients with ease.