How can I embed a responsive Instagram photo on a Webflow landing page? I've tried using Instagram's embed code, but it only supports individual images and is not responsive. Third-party embed widgets I've tried are fixed width and non-responsive. Are there any alternative options, such as using IFTTT to automatically download the latest Instagram post to Dropbox and then embed that image on the landing page? Thank you for your help!
- Use IFTTT to auto-save new Instagram posts to Dropbox.
- Modify Dropbox URLs or use Make/Zapier to add the images to a Webflow CMS Collection.
- Embed and style the image in Webflow using a Collection List for responsiveness.
To embed a responsive Instagram photo on a Webflow landing page, you'll need to use a custom approach since Instagram's default embed code is not responsive and third-party widgets are commonly fixed-width. Here’s how you can build a solution using IFTTT + Dropbox + Webflow CMS.
1. Automate Image Download with IFTTT
Use IFTTT to automatically save new Instagram posts to Dropbox:
- Create an IFTTT account and link your Instagram and Dropbox accounts.
- Use the applet: "If new photo by you on Instagram, then add file from URL to Dropbox."
- This applet uploads your latest Instagram image to a Dropbox folder whenever you post a new photo.
- Make sure the image file is saved in a specific folder (e.g.
/Apps/WebflowInstagram).
2. Serve Dropbox Images Publicly via a Hosting Layer
Dropbox doesn't serve raw image URLs directly usable in <img> tags. You need to:
- Use Dropbox shared links, but modify the URL:
- Replace
www.dropbox.comwithdl.dropboxusercontent.com - Remove the
?dl=0query to serve the image directly - Alternatively, use a Dropbox → Make (Integromat) → Webflow integration to host images more robustly via a CMS collection
3. Create a CMS Collection in Webflow for Instagram Photos
Build a mini CMS in Webflow that stores Instagram image URLs:
- In Webflow, go to CMS Collections and create a new collection (e.g. Instagram Feed)
- Add a Name and an Image URL field
- Optional: Add fields like Caption or Post Date
4. Use Zapier or Make (Integromat) to Sync New Images to Webflow CMS
To sync new Dropbox images into your CMS:
- Set up a Zapier or Make (Integromat) automation:
- Trigger: New file added in Dropbox
- Action: Create new CMS item in Webflow, using the public image URL
Make sure your public image link is cleaned up properly before sending to Webflow.
5. Embed the CMS Image Responsively on the Landing Page
On the Webflow landing page:
- Add a Collection List and link it to your Instagram Feed collection
- Place an Image element inside the list item and bind it to your Image URL field
- Style the image with 100% width and appropriate aspect ratio using CSS for responsiveness
6. Optional: Limit to Showing Only the Latest Post
To show only the most recent photo:
- In the Collection List settings, set the filter:
- Limit items = 1
- Sort order = Newest first (sort by Date Created)
Summary
To embed a responsive Instagram photo on a Webflow page, use IFTTT to auto-download new posts to Dropbox, then use a tool like Zapier or Make to sync those images to a Webflow CMS Collection. Embed the image from the CMS using responsive styling. This approach is fully customizable, responsive, and updates automatically with each new Instagram post.
