How Do I Add My Instagram Feed to Webflow?

by

Adding your Instagram feed to your Webflow website can be a great way to showcase your social media presence and engage with your website visitors. In this tutorial, we will walk you through the steps to seamlessly integrate your Instagram feed into your Webflow site.

Step 1: Create an Instagram Developer Account

If you haven’t already, you will need to create an Instagram Developer Account. This will allow you to generate an access token that is necessary to retrieve your Instagram feed and display it on your Webflow website.

Here’s how you can create an Instagram Developer Account:

  1. Go to the Instagram Developer website

    2. Visit the official Instagram Developer website by typing “Instagram Developer” in your preferred search engine. Click on the first result that appears, which should be developers.instagram.com.

  2. Create a new application

    3. Once you are on the Instagram Developer website, log in with your existing Instagram account or create a new one if needed. After logging in, click on the “Manage Clients” button and then select “Register a New Client”.

    Fill out all the required information such as name, description, and website URL for your application.

  3. Note down the client ID

    4. After creating a new application, you will receive a client ID. Make sure to note it down as it will be needed later in the process.

Step 2: Generate an Access Token

In order to access and display your Instagram feed on Webflow, you need to generate an access token using your client ID obtained from step 1.

Follow these steps to generate an access token:

  1. Use a third-party service

    2. There are several third-party services available that can help you generate an access token easily. One popular option is the Instagram Access Token Generator. Visit the website and follow the instructions to generate your access token.

  2. Authorize your application

    3. After generating the access token, you will be prompted to authorize your application. Make sure to grant all necessary permissions for the application to fetch your Instagram feed.

  3. Copy the access token

    4. Once you have authorized the application, you will be provided with an access token. Copy this token as it will be used in the next step.

Step 3: Add Instagram Feed to Webflow using Embed Element

Now that you have obtained your access token, it’s time to add your Instagram feed to your Webflow website using the Embed element.

Here’s how you can do it:

  1. Login to your Webflow account and open your desired project

    2. If you don’t have a Webflow account, sign up for one and create a new project or open an existing project where you want to add your Instagram feed.

  2. Add an Embed element

    3. In Webflow’s Designer interface, navigate to the page where you want to display your Instagram feed. Drag and drop an Embed element from the Elements panel onto the desired section of your page.

  3. Paste the embed code

    4. In order to embed your Instagram feed, you will need to use the HTML `