How to Embed Instagram Feed in......

How to Embed Instagram Feed in javascript

Embedding an Instagram feed in a JavaScript-based website or web application can be achieved using Instagram’s Basic Display API. Here are the steps to embed an Instagram feed using JavaScript:

Step 1: Set Up Your Instagram Developer Account

To use Instagram’s API, you need to set up a developer account and create an Instagram app:

Go to the Instagram Graph API page on Facebook Developers.
Create a Facebook App if you haven’t already.
Set up your Instagram app in the Instagram Basic Display section.

Obtain an Instagram User Token from the User Token Generator section.

Step 2: Create an HTML File

Create an HTML file where you want to embed your Instagram feed. You can create a new HTML file or add the code to an existing one.

<!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>
</head>
<body>
    <div id="instagram-feed"></div>
</body>
</html>

Step 3: Create a JavaScript File

Create a JavaScript file that will handle fetching and embedding your Instagram feed. Here’s a basic example:

// Replace with your Instagram Access Token
const accessToken = 'YOUR_INSTAGRAM_ACCESS_TOKEN';

// Function to fetch and display Instagram feed
function getInstagramFeed() {
    fetch(`https://graph.instagram.com/v12.0/me/media?fields=id,caption,media_type,media_url,permalink,timestamp&access_token=${accessToken}`)
        .then(response => response.json())
        .then(data => {
            const feedContainer = document.getElementById('instagram-feed');

            data.data.forEach(post => {
                const postLink = document.createElement('a');
                postLink.href = post.permalink;
                postLink.target = '_blank';

                const postImage = document.createElement('img');
                postImage.src = post.media_url;
                postImage.alt = post.caption;

                postLink.appendChild(postImage);
                feedContainer.appendChild(postLink);
            });
        })
        .catch(error => console.error(error));
}

// Call the function to fetch and display the Instagram feed
getInstagramFeed();

Step 4: Replace ‘YOUR_INSTAGRAM_ACCESS_TOKEN’

Replace 'YOUR_INSTAGRAM_ACCESS_TOKEN' with the actual access token you obtained in Step 1.

Step 5: Style Your Instagram Feed

Style the Instagram feed to match your website’s design using CSS.

Step 6: Include JavaScript in Your HTML File

Include the JavaScript file in your HTML file. Add the following line before the closing </body> tag in your HTML:

<script src="your-script.js"></script>

Make sure to replace "your-script.js" with the actual filename of your JavaScript file.

Step 7: Test Your Instagram Feed

Open your HTML file in a web browser to see your Instagram feed embedded on the web page.

Please note that Instagram’s API requirements and endpoints may change over time, so refer to the latest Instagram API documentation for any updates, and ensure you comply with Instagram’s policies and usage guidelines.