The meeting provided a step-by-step walkthrough for embedding and customizing Instagram feeds on websites using the Finsweet Components app and Webflow Designer, with no coding required.
Attendees learned how to configure, generate, and style both grid and slider Instagram feeds, modify settings, and ensure all necessary custom attributes and code remain intact for functionality.
The discussion covered options for layout, design customization, and publishing, as well as commercial use and free testing on staging domains.
Action Items
No explicit owner or due dates defined in the transcript. (No action items were indicated during the walkthrough.)
Setting Up Instagram Feeds with Finsweet Components
Open the Finsweet Components app in Webflow, go to the builder, and select the Instagram feed component.
Configure general settings: component name, instance name, class folder (for class organization), and input the required Instagram access token (documentation link provided).
Options include showing/hiding the header, caption, comments count, likes count, setting post redirect preferences (Instagram or lightbox), and selecting grid or slider layout.
The component allows limiting the number of displayed posts.
Creating and Styling a Grid Instagram Feed
Select the page element for embedding the feed.
Remove unwanted elements (header, captions, likes, comments) to display only images in a grid.
Generate the component and confirm—custom attributes and custom code are added automatically (required for functionality; do not remove).
Style the feed in Webflow Designer (e.g., adjust grid columns, image radius).
Publish the site to preview and confirm the feed displays and functions as intended.
Creating and Styling an Instagram Slider Feed
Follow similar initial steps: access app, builder, and Instagram feed, but set up as a slider (name and instance updated accordingly).
Customize slider settings: remove captions, keep comment and like counts, enable loop, set pagination to fraction, adjust slides per view for desktop/mobile.
Style the slider in Webflow Designer (background, radius, overflow, gap, padding, navigation, arrows, pagination, and font size).
Move or remove template elements as desired; ensure all component elements remain within the required instance wrapper.
Publish and confirm slider functionality and design.
Free to use on staging domains; production use requires a paid plan. Download and documentation links provided for further learning.
Decisions
Maintain required custom attributes and custom code — Necessary for component functionality; removal may break the Instagram feed.
Free usage on staging, paid for production — Users can test and build for free on io staging domains, but must purchase a plan to publish to production.