In Part 1 of this series, I have outlined how you can set up a connection between Webflow and Instagram, using a third party tool called Zapier. If you haven’t done so already, please read this article first and follow the steps included before starting with part 3 of this series. In Part 2 I am now going over how to place and style your CMS Collection in Webflow, so your Instagram feed appears on your page.
Assuming you have followed the steps in the previous article in this series, you are now ready to finalise the set up with the last remaining tasks:
- Go to the page in your Webflow project which you want the Instagram feed to appear on.
- Put a new CMS Collection List onto your page and place an image element and link block inside. If you like you can use Webflow’s grid feature to set up an Instagram-like layout here.
- Connect the CMS Collection List, image element and link block to your Instagram CMS Collection you created earlier and publish your site.
- Through your link block settings, you can determine if the Instagram post is being opened in a new browser tab or in the same tab as your website. If instead you want a modal to open with the actual Instagram post, you'll need to use Webflow's interactions to set up the modal and use an HTML embed item to embed the Instagram post via an iFrame. How do this, I'll explain in the upcoming part 3 of this series.
- That’s it, your Instagram feed is now connected to Webflow. If you would like the feed content to refresh/update more frequently than every 15 minutes, you’ll need to upgrade to a paid Zapier plan (Professional Plan and above).
Including a caption
If you’d like to show the Instagram caption in your feed as well (or other data from Instagram that you haven’t included before), you’ll need to make some additional adjustments in Webflow and Zapier:
- Go back to your CMS Collection in Webflow, add a Text Field and save the Collection.
- Next, go back to Zapier and click on the Workflow (called Zap in Zapier) your created. You can find all your Workflows under “Zaps” in the navigation menu on the left side of the screen.
- Press “Create Live Item in Webflow”, followed by “Set up action”.
- You’ll now see all the fields currently in your CMS Collection. Press “Refresh Fields” to ensure your newly created text field also appears here.
- As soon as it appears, click the empty field and choose “Caption” from the dropdown.
- Press “Close”.
- You can now ensure everything is working fine by clicking “Test” and “Retest action”. If your Zap has been turned off, turn it back on by pressing the appropriate button.
- Make the appropriate amendments to your layout in Webflow, to include the caption and republish 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.
