Framer
Learn how to get started building an Instagram feed with Framer.
1. Getting Started
Building a social feed in Framer is now easier than ever. Our Framer feeds include powerful, purpose-built components that you can fully customize directly within Framer's UI. This allows you to effortlessly adjust styles and create your perfect feed seamlessly.
Key Features:
Powerful components: Feeds are built by copy and pasting components to your canvas
Pre-made Layouts: We provide a collection of pre-made layouts that you can browse
Flexibility: You can customise feeds directly inside Framer's UI
1.1 Create Feed *
From your FeedSpring dashboard, select the "Connect New Feed" option and follow the steps to create a new feed. For more detailed getting started instructions, view our documentation page.
1.2. Installation *
Add the FeedSpring starter component to your Framer project by copying the URL below and pasting it directly into Framer's UI.
Framer Components: Browse our collection of Framer components to find a suitable starting layout for your project. All components can be customised directly inside of Framer.
1.3. Pre-made Components
FeedSpring offers a number of pre-made components that you can copy and paste directly into your projects. This can help you start customizing a feed right away and provides an excellent example of how a feed is built. Browse our pre-made components here
2. Building
2.1 Starter Framer Component
After creating your Framer feed in the dashboard, you'll receive a starting layout that you can paste directly into your Framer canvas. This layout is designed to fit most websites and can be further customized within Framer's UI.
Additionally, you can explore and copy alternative layouts from our components library to suit your specific needs.
2.2 Add FeedSpring ID
After pasting a layout into your Framer project, add your FeedSpring ID, which can be found in your dashboard. Once you add the ID to your feed, the data will start to populate, activating the feed on your site.
Your unique feed ID is available on the feed setup page within the app and can be copied directly from there.
2.3 Customise your feed
Once your component has been added to Framer, you can adjust its styles and layout while it is in focus. Use the style panel on the right side of the Framer interface to customize various aspects, including the number of posts to display, typography, spacing, border radius, and more.
Need more customisation?: Framer has great support for developers, and if you are familiar with react you can build even more customisation to your feeds. View our developer documentation pages to learn more about this.
2.4 Publish your feed
Once you’re satisfied with the design and layout of your feed, you can publish it and view it live on your site.
Last updated
