How Do I Show My Instagram Feed on Webflow?

by

Are you looking to display your Instagram feed on your Webflow website? With the increasing popularity of Instagram, it’s no surprise that many website owners want to showcase their beautiful images on their own platforms.

Thankfully, integrating your Instagram feed into Webflow is easier than you might think. In this tutorial, we will walk you through the steps to show your Instagram feed on Webflow.

Step 1: Get an Instagram Access Token

The first step in displaying your Instagram feed on Webflow is to obtain an access token from Instagram. This access token will allow you to access your account’s data and display it on your website. Here’s how you can get one:

  1. Create a Facebook Developer Account: Visit the Facebook Developers website and create an account if you don’t have one already.
  2. Create a New App: Once you’re logged in, create a new app by clicking on the “My Apps” dropdown menu and selecting “Create App”.
  3. Add Instagram Basic Display: Inside your newly created app, head over to the “Products” tab and click on “Add Product”. Choose “Instagram Basic Display” from the available options.
  4. Configure Your Instagram Basic Display: Follow the instructions provided by Facebook to configure your Instagram Basic Display.

    This includes linking your Instagram account to your app.

  5. Get Your Access Token: After completing the configuration, go back to the “Products” tab and click on “Instagram Basic Display”. Here, you’ll find your Access Token under the “User Token” section.

Step 2: Install a Webflow Integration

To display your Instagram feed on Webflow, you’ll need to use a third-party integration. One popular option is the EmbedSocial integration. Follow these steps to install it:

  1. Sign Up for EmbedSocial: Visit the EmbedSocial website and sign up for an account if you don’t have one already.
  2. Add Your Instagram Account: Inside your EmbedSocial account, click on the “Add Account” button and select Instagram. Follow the prompts to authorize EmbedSocial to access your Instagram data.
  3. Create a Feed: After adding your Instagram account, create a new feed by clicking on the “Create Feed” button. Customize your feed’s appearance according to your preferences.
  4. Get Your Embed Code: Once you’ve finished customizing your feed, click on the “Embed Code” button and copy the provided code.

Step 3: Add the Instagram Feed to Webflow

Now that you have your access token and embed code ready, it’s time to add your Instagram feed to Webflow. Follow these steps:

  1. Login to Webflow: Log in to your Webflow account and open the project where you want to display your Instagram feed.
  2. Add an HTML Embed Element: Drag and drop an HTML Embed element onto the page where you want your Instagram feed to appear.
  3. Paste Your Embed Code: In the settings panel of the HTML Embed element, paste the embed code you copied from EmbedSocial.

Congratulations! You’ve successfully added your Instagram feed to Webflow. Preview your website to see your beautiful Instagram images seamlessly integrated into your site’s design.

Conclusion

In this tutorial, we’ve learned how to show your Instagram feed on Webflow. By following the steps outlined above, you can easily display your Instagram content on your website.

Remember to obtain your Instagram access token and use a third-party integration like EmbedSocial for a hassle-free implementation. Now go ahead and make your Webflow website even more visually engaging by showcasing your stunning Instagram feed!