Instagram API to fetch User Profile, Followers, Following

0
59

In today’s digital world, social media platforms like Instagram play a crucial role in online interaction. Whether you’re a developer looking to understand API integration or a business seeking to showcase an Instagram-like profile, building a dynamic profile page can be an excellent project. In this article, we explore the creation of an Instagram-style profile page that dynamically fetches user details and posts using JavaScript and PHP.

Follow this video for complete guidance:

Full Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instagram Profile</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        nav {
            background: white;
            border-bottom: 1px solid #dbdbdb;
            padding: 10px 20px;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .profile-container {
            max-width: 935px;
            margin: 80px auto 0;
            padding: 30px 20px;
        }

        .profile-header {
            display: flex;
            gap: 80px;
            margin-bottom: 44px;
        }

        .profile-picture {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
        }

        .profile-info {
            flex: 1;
        }

        .profile-actions {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        .username {
            font-size: 28px;
            font-weight: 300;
        }

        .edit-profile-btn {
            background: transparent;
            border: 1px solid #dbdbdb;
            padding: 5px 9px;
            border-radius: 4px;
            font-weight: 600;
            cursor: pointer;
        }

        .settings-btn {
            cursor: pointer;
        }

        .profile-stats {
            display: flex;
            gap: 40px;
            margin-bottom: 20px;
        }

        .stat {
            font-size: 16px;
        }

        .stat span {
            font-weight: 600;
        }

        .profile-bio {
            font-size: 16px;
            line-height: 1.5;
        }

        .profile-bio .name {
            font-weight: 600;
        }

        .profile-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }

        .profile-post {
            aspect-ratio: 1;
            position: relative;
        }

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

        .post-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
            color: white;
            font-weight: 600;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .profile-post:hover .post-overlay {
            opacity: 1;
        }

        @media (max-width: 735px) {
            .profile-header {
                flex-direction: column;
                gap: 20px;
                align-items: center;
                text-align: center;
            }

            .profile-stats {
                justify-content: center;
            }

            .profile-grid {
                gap: 3px;
            }
        }
    </style>
</head>
<body>
    <nav>
        <div style="font-size: 24px; font-weight: bold;">Instagram</div>
    </nav>

    <div class="profile-container">
        <div class="profile-header">
            <img id="profilePicture" alt="Profile Picture" class="profile-picture">
            
            <div class="profile-info">
                <div class="profile-actions">
                    <h2 id="username" class="username"></h2>
                </div>
                
                <div class="profile-stats">
                    <div class="stat"><span id="posts"></span> posts</div>
                    <div class="stat"><span id="followers"></span> followers</div>
                    <div class="stat"><span id="following"></span> following</div>
                </div>
                
                <div class="profile-bio">
                    <div id="fullname" class="name"></div>
                    <div id="bio"></div>
                    <div id="bioLinks"></div>
                </div>
            </div>
        </div>

        <div id="profileGrid" class="profile-grid">
        </div>
    </div>

    <script>
        const user = '<?php echo @$_GET['u'];?>';
        const api = `https://youthsforum.com/instagram/${user}`;

        // Function to fetch and display profile data
        async function fetchProfile() {
            try {
                const response = await fetch(api);
                const data = await response.json();
                
                // Update profile details
                document.getElementById('profilePicture').src = data.details.profile_picture.sm;
                document.getElementById('username').textContent = data.details.username;
                document.getElementById('posts').textContent = data.details.posts;
                document.getElementById('followers').textContent = data.details.followers;
                document.getElementById('following').textContent = data.details.following;
                document.getElementById('fullname').textContent = data.details.fullname;
                document.getElementById('bio').textContent = data.details.bio;

                // Update bio links
                const bioLinksContainer = document.getElementById('bioLinks');
                data.details.bio_links.forEach(link => {
                    const div = document.createElement('div');
                    div.textContent = link;
                    bioLinksContainer.appendChild(div);
                });

                // Update posts grid
                const profileGrid = document.getElementById('profileGrid');
                data.posts.forEach(post => {
                    const postDiv = document.createElement('div');
                    postDiv.className = 'profile-post';
                    postDiv.innerHTML = `
                        <img src="${post.image}" alt="Post">
                        <div class="post-overlay">
                            <div>❤️ ${post.likes}</div>
                            <div>💬 ${post.comments}</div>
                        </div>
                    `;
                    profileGrid.appendChild(postDiv);
                });
            } catch (error) {
                console.error('Error fetching profile:', error);
            }
        }

        // Fetch profile data when page loads
        document.addEventListener('DOMContentLoaded', fetchProfile);
    </script>
</body>
</html>

 

ALSO READ  Part 2 : Creating a Dynamic File Manager with PHP

Why Build an Instagram Profile Page?

Creating a profile page similar to Instagram offers multiple learning opportunities:

  • Understanding how to fetch and display data dynamically.
  • Implementing modern HTML, CSS, and JavaScript techniques.
  • Creating an engaging user interface with responsive design.
  • Using APIs to pull real-time information.

Key Features of the Profile Page

This Instagram-like profile page includes several essential features:

  • Fixed Navigation Bar: A sleek top bar mimicking Instagram’s interface.
  • Profile Header: Displays profile picture, username, follower count, post count, and a bio section.
  • Editable Profile Actions: Includes buttons for interactions, making the interface interactive.
  • Post Grid Layout: Shows a structured display of posts with overlays indicating likes and comments.
  • Responsive Design: Ensures optimal viewing across different screen sizes.

How It Works

1. Fetching User Data

The page dynamically loads user data based on a query parameter (u) passed via URL. This enables users to see different profiles without modifying the code.

2. Using an API for Data Retrieval

The profile information and posts are fetched from an API endpoint (https://youthsforum.com/instagram/). The JavaScript code makes an asynchronous request to retrieve and populate the profile with real-time data.

3. Displaying Profile Details

The fetched data includes profile picture, username, follower count, and bio. These details are inserted into the appropriate elements on the webpage dynamically.

4. Creating a Dynamic Post Grid

Each post in the fetched data is displayed in a grid format. On hover, an overlay appears showing the number of likes and comments, enhancing user interaction.

5. Responsive Design for All Devices

The profile page is designed to be mobile-friendly using CSS media queries. This ensures that users get a seamless experience across devices.

ALSO READ  Real Time HTML CSS and JavaScript Editor with Preview

Enhancements and Future Improvements

While this project effectively mimics an Instagram profile page, there are several ways to enhance it further:

  • Adding User Authentication: Allow users to log in and view private accounts.
  • Enabling Post Uploads: Implementing a feature to let users upload images.
  • Live Updates: Using WebSockets or AJAX polling to fetch real-time updates.
  • Dark Mode Support: Providing users with a toggle for dark mode.

This Instagram-style profile page is a great project for developers looking to improve their front-end and API integration skills. With dynamic data fetching, responsive design, and a user-friendly interface, it provides a solid foundation for building more advanced social media applications.

Start experimenting with this project, and who knows—you might just create the next big social media platform!

Comments are closed.