How to display your Instagram feed on your Webflow site (Part 1)

If your company is active on Instagram and it fits your business objectives, why not show your Instagram feed on your Webflow website or landing page? Webflow currently doesn’t have a dedicated “Instagram” feature in their Designer that lets you add the feed with the click of a button. This is why in this case you’ll need to rely on external tools that work in tandem with Webflow to make this happen. While there are different services that can help you achieve the same or similar outcome, in this article I focus on the integrating the Instagram feed with Zapier. Zapier is a web-based service which lets you connect different apps with each other. For instance you could add a new event to your Google calendar and automatically add a new CMS item to your Webflow CMS collection which displays as a new event on your Webflow site. In this example you save time by not having to enter the event twice - once in Webflow and once in your Google calendar. But now let’s get back to Webflow & Instagram and showing you how to make both tools play nicely together.

• Before getting started, create a free Zapier account and ensure your Webflow project has CMS functionality activated.
• Go to your Webflow project and create a new CMS Collection. Add an image field, as well as a link field inside your CMS collection. Once you’re done, save the collection and publish your site.

‍
‍
‍

• Access your Zapier account, navigate to your Dashboard and start creating your new Workflow. Via to the drop down menus shown in the screenshot below, connect Instagram with Webflow. In the “When this happens...” dropdown select “New Media Posted in Account”. Now, in the “then do this!” dropdown you should select “Create Live Item”. This tells Zapier to once a new Instagram post is being created, create a new CMS item in Webflow. Once you’ve made your selections, press the “Try it” button.
  ‍

‍

• In the next screen just press the “Get Started” button, which allows you to in the following step connect your Instagram account with Zapier by entering your Instagram account details.
• Once this is done you have to connect your Webflow account to Zapier, by selecting the Webflow project that should contain your Instagram feed. If your Webflow project contains several CMS Collections, you’ll now need to choose the collection you created in step 2.
• Now you’ll have to select which available CMS fields you’d like to utilise for your Instagram feed. If you have set up your CMS Collection correctly, you should see your image field, link field and the other remaining fields showing up here. Select them as shown below.

• In the next screen, map the Instagram data fields to the fields in your CMS Collection as shown in the screenshot.

• Now it’s time to test if everything works as intended by clicking the “Send Test” button.
• You can now go into your Webflow project to see if a new CMS item has appeared in your CMS Collection. If it has, you can move on to the next step with Zapier.
• Lastly you press the “Turn on Zap” button to activate the Instragram —> Webflow workflow.
• That’s it, whenever you post an image to Instagram, Zapier will send your post with the Instagram image and Instagram URL to your CMS Collection.
• To make the posts visible on your Webflow site, we’ll need to place and style your CMS Collection List on the page. We’ll do this in Part 2 of this series.

Note that at any time you can stop the workflow from running by pressing the on/off button in Zapier. You can also delete your workflow entirely if required. Also keep in mind that with Zapier’s free account, Zapier only checks for new Instagram posts every 15 minutes. This means if you post lots of Instagram photos after another, it might take a little while for them to appear in your CMS Collection (and therefore on your Webflow site). Lastly, Zapier will only automatically pull future Instagram posts into Webflow and won’t fetch the ones you’ve already published before setting up your Zapier workflow. I’ll explain how to remedy this in part 2 of this series.

Also in Part 2 of this series I’ll show you how to style your CMS Collection list in Webflow and actually make your Instagram posts visible on your site.

Hope this rundown helped you get Instagram working on your Webflow site. Want me to set this up for you on your Webflow site? No worries, just get in touch with me.