We're in beta! Don't mind the bugs.
Helpful resources
Need more help?
Check out the Webflow community.
Free Webflow templates
The best free Webflow templates.
Hire a Webflow expert
Partner with a certified expert.
Rate this answer
Good
Good
Bad
Bad
Share
All posts
Integrations

How can I embed an Instagram feed into my Webflow website?

Published on
September 22, 2023
Note
CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To embed an Instagram feed into your Webflow website, you can follow these steps:

  1. Obtain your Instagram Access Token: To access your Instagram feed, you will need an Access Token. You can generate this token by creating an app on the Facebook Developer platform and linking it to your Instagram account. Make sure to follow the provided documentation to generate the Access Token successfully.

  2. Install the Webflow Instagram Feed Widget: In Webflow, you can use a third-party widget to embed your Instagram feed. One popular option is the "Lightwidget" widget, which allows you to display your Instagram feed in a grid or slider format. To install this widget, follow these steps:

  • Go to the Lightwidget website (https://lightwidget.com/).
  • Click on the "Get Started" button.
  • Configure the settings for your Instagram feed, such as the number of photos to display and the layout.
  • Click on the "Get Code" button.
  • Copy the provided HTML code.
  1. Add the Instagram Feed Widget to Webflow:
  • Open your Webflow project in the Designer.
  • Navigate to the page where you want to embed the Instagram feed.
  • Drag and drop an HTML Embed element from the Elements panel onto the desired location on the page.
  • Paste the HTML code obtained from the Lightwidget website into the HTML Embed element.
  • Adjust the size of the HTML Embed element to fit your desired feed display.
  • Preview your website, and you should see your Instagram feed embedded.
  1. Customize the Instagram Feed:
  • If you want to further customize the appearance of your Instagram feed, you can use custom CSS styles.
  • Give the HTML Embed element a specific class or ID by selecting it and adding a class or ID name in the Selector field of the Styles panel.
  • Create a new Stylesheet (if needed) or add styles to your existing Stylesheet by navigating to the Designer's Style Manager.
  • Add CSS styles to target the specific class or ID you assigned to the HTML Embed element.
  • Customize the styles to match your website's design and layout.

By following these steps, you can easily embed an Instagram feed into your Webflow website and showcase your latest Instagram posts to your visitors.

Additional Questions:

  1. How can I embed a Facebook feed into my Webflow website?
  2. Can I embed a Twitter feed into my Webflow site?
  3. What are the best practices for integrating social media into a Webflow website?
Does Webflow have a feature that allows users to track and be notified of any changes made to a website?
What could be causing the preview in Webflow to differ from the published site, and why is the picture height different?
Is there an easy way to replace the design of one Webflow page with another page's design?
Can Webflow natively click/hover a thumbnail in an image gallery to bring up the larger image or would this still be achieved using tabs?
Is there an onboarding video available for setting up the checkout in Webflow ecommerce, or are there Webflow staff members who can assist with setting up Stripe payment integrations correctly to resolve checkout errors on every card?
How can I troubleshoot an issue with Google tags not working on Webflow, even after following the installation instructions correctly?
What could be causing the issue where my Webflow.io sites embedded in iframes on my site are not loading?
Is there a way to disable the functionality in Webflow that serves images from uploads-ssl.webflow.com instead of the local images/ directory? If not, can anyone verify the logic for how these files are stored on the Webflow CDN?
What steps has the user taken to implement event tracking on a button click in Webflow, and what error message are they receiving?
Is the basic plan in Webflow with 50gig bandwidth and no CMS enough for me if I want to upload some prototypes, final version, and link/embed my Youtube videos and twitch stream on my portfolio site? Do you have any recommendations for my situation?
Home
Categories
Tutorials
© 2023 CommunityFAQ. All rights reserved.
TermsPrivacyCookies
CommunityFAQ is not affiliated with Webflow. This is a personal project to help answer Webflow's questions and a test project to implement new strategies while working with larger a larger CMS. CommunityFAQ is reader-supported and some links may be affiliate links.