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!
To embed a responsive Instagram photo on your Webflow landing page, you can use a combination of Webflow's CMS Collections, Zapier, and custom code. Here's a step-by-step process:
1. Set up a CMS Collection in Webflow: Create a new collection in your Webflow project and add a single Image field to store the Instagram image URL.
2. Obtain the Instagram image URL: Manually or through a third-party service, get the URL of the Instagram image you want to embed. You can right-click on the image and select "Copy image address" or use a service like Instadp.io to find the direct image URL.
3. Set up a Zapier account: Zapier allows you to automate actions between different apps and services. Create an account on Zapier if you haven't already.
4. Create a Zap: In Zapier, create a new Zap. Choose the "Instagram" trigger app and select the "New Media Posted by You" trigger. Connect your Instagram account.
5. Set up a Catch Hook in Zapier: In the same Zap, add a "Webhooks by Zapier" action app and choose the "Catch Hook" action. Copy the generated webhook URL.
6. Modify the Instagram trigger: Go back to the "New Media Posted by You" trigger and edit the Instagram post to include the Catch Hook URL generated in the previous step. This allows Instagram to send data to Zapier when you make a new post.
7. Create a new item in Webflow CMS using Zapier: In Zapier, add another action app and choose "Webflow." Select the "Create Item" action and connect your Webflow account. Map the Image field in your CMS Collection with the Instagram image URL field from the Instagram trigger.
8. Test and activate the Zap: Test the Zap to ensure that when you make a new post on Instagram, a new item is created in your Webflow CMS Collection.
9. Embed the Instagram photo in the landing page: On your Webflow landing page, add a Collection List and bind it to your CMS Collection. Insert an Image element and bind it to the Image field. Adjust the settings and styling as needed to make it responsive within the layout.
With this setup, whenever you make a new Instagram post, Zapier will automatically create a new item in your Webflow CMS Collection, and your landing page will display the latest Instagram photo. Plus, since you're using Webflow's CMS and custom code, you have full control over the styling and responsiveness of the embedded photo.