Creating an Interactive Instagram Photo Gallery

July 23, 2024
Debbie Moran

Introduction

Adding an interactive Instagram photo gallery to your website can increase engagement and provide visitors with fresh content. This tutorial will guide you through creating a dynamic Instagram gallery using HTML, CSS, and JavaScript.

Requirements

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 Photo Gallery</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="instagram-gallery" id="instagram-gallery">
        <!-- 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 gallery:

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

.instagram-gallery {
    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 gallery = document.getElementById('instagram-gallery');
        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>
            `;
            gallery.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

Creating an interactive Instagram photo gallery on your website can keep your visitors engaged with your latest social media 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.