How Do I Add Instagram to Webflow?

by

In this tutorial, we will learn how to add Instagram to Webflow. Instagram is one of the most popular social media platforms, and integrating it into your Webflow website can enhance your online presence and engage with your audience. Let’s get started!

Step 1: Create an Instagram Developer Account

To add Instagram to your Webflow website, you’ll first need to create a developer account on the Instagram Developer Platform. Go to the Instagram Developer Platform and click on the “Get Started” button.

Step 2: Create a New App

Once you have created a developer account, navigate to the Dashboard and click on the “Create App” button. Fill in the required information such as your app name, contact email, and agree to the terms of use. Then click on the “Create App” button.

Pro Tip:

Make sure to choose a unique app name that represents your brand or website.

Step 3: Configure Your App Settings

After creating your app, you’ll be redirected to its settings page. Here, you need to configure some settings before integrating it into Webflow.

  • Add a Platform: Click on the “+ Add Platform” button and choose “Website”. Enter your Webflow website URL in the “Site URL” field.
  • Add Products: Under “Products”, click on “+ Add Products”.

    Choose “Instagram Basic Display” from the available options.

  • Add Valid OAuth Redirect URIs: Scroll down to the bottom of the page and find “Valid OAuth Redirect URIs”. Add the redirect URL for your Webflow website.

Step 4: Generate Access Token

To access Instagram’s API, you need an Access Token. From your app’s settings page, navigate to the “Basic Display” tab and click on the “Create New App” button.

You will be asked to authorize your app with your Instagram account. Click “Authorize” to grant access.

Pro Tip:

Make sure you have a valid Instagram account and are logged in before authorizing your app.

Step 5: Implement Instagram on Webflow

Now that you have your Access Token, it’s time to integrate Instagram into your Webflow website. Open your Webflow project and go to the page where you want to add Instagram content.

Add a new HTML Embed element from the Elements panel and paste the following code:

<div class="instagram-feed">
    <script>
        const accessToken = 'YOUR_ACCESS_TOKEN';
        const userID = 'YOUR_USER_ID';
        const numPhotos = 6;

        fetch(`https://graph.instagram.com/${userID}/media?fields=id,caption,media_type,media_url,permalink,thumbnail_url&access_token=${accessToken}`)
          .then(response => response.json())
          .then(data => {
            data.data.slice(0, numPhotos).forEach(photo => {
              const img = document.createElement('img');
              img.src = photo.media_url;
              document.querySelector('.instagram-feed').appendChild(img);
            });
          });
    </script>
</div>

Note: Don’t forget to replace ‘YOUR_ACCESS_TOKEN’ with your actual Access Token and ‘YOUR_USER_ID’ with your Instagram User ID.

Pro Tip:

To find your User ID, you can use services like InstaFollowers by entering your Instagram username.

Step 6: Style Your Instagram Feed

By default, the Instagram feed will be displayed as a simple list of images. You can enhance the visual appearance by adding CSS styles to the .instagram-feed element or customizing it to match your website’s design.

Congratulations! You have successfully added an Instagram feed to your Webflow website. Now visitors can see your latest Instagram posts directly on your site.

Conclusion

In this tutorial, we learned how to add Instagram to Webflow by creating an Instagram Developer account, configuring app settings, generating an Access Token, implementing the Instagram feed code in Webflow, and styling the feed. Integrating Instagram into your Webflow website can provide a dynamic and engaging experience for your audience. So go ahead and showcase your stunning Instagram content on your Webflow site!