Adding an Instagram feed to your website is a great way to show off your latest photos and increase engagement with your followers. In this blog post, we will show you how to add an Instagram Feed to your website in 5 easy steps using Elfsight. We will also provide some tips on how to get the most out of your Instagram Feed. Let's get started!
Setting up Instagram Feed Widget
The first thing you need to do is sign up for an Elfsight account. You can do this by clicking the "Sign Up" button on their website. Elfisight has a collection of dozens of widgets that can be customized and embedded into your website. The Instagram Feed Widget they offer is like an Instagram feed plugin for embedding Instagram feeds that works with Webflow, WordPress sites, and any other platform that supports custom code embeds. Once you have created your account, you will be able to log in and create your first Instagram Feed.
Once you are logged in, you will be able to select the Instagram Feed template. The free version is sufficient for testing it out, but if you plan on having a lot of website visits, you'll want to upgrade your plan. Elfsight offers a variety of different templates, so you can choose the one that best fits your website's design.
Connecting the Instagram Account
Once you have selected a template, you will need to connect your Instagram account. To do this, simply click the "Connect Account" button and enter your Instagram username and password. Once you have connected your account, you will be able to select which photos you would like to display in your feed.
You can also customize the look of your Instagram Feed. Elfsight offers a variety of different layout options, so you can make your feed look exactly the way you want it to.
Add Instagram Posts to Website
Once you are happy with the look of your Instagram Feed, it's time to add it to your website. Elfsight makes it easy to do this by providing a code snippet that you can use to embed the instagram feed directly into your website. Add Instagram posts to website and embed Instagram feed with the HTML embed code. Just the paste the code inside a Custom Code element in Webflow or any other website CMS.
The embedded Instagram feed can they be positioned by adjusting the styling of the embed code element's parent elements. For example, you could add spacing and display properties and even add other elements around the Instagram photos like a heading that says something like "Follow us on Instagram" or "Check out our Instagram posts".
You can also use the Elfsight Instagram feed on multiple pages of your website by copying and pasting the code snippet into each page where you would like the feed to appear.
Testing Each Instagram Post on Your Published Site
Each Instagram photo can be opened from the feed and will load on the screen as a popup, displaying your post caption, likes, and comments. If you'd like to adjust it's appearance or change how the Instagram images interact with one another, adjust the widget settings in Elfsight until you're satisfied.
How do I add my Instagram feed to Webflow?
Custom Code Embed
Use a Custom Code embed where you want it to appear and paste the code.
Centering the Instagram Feed on the Page
Make sure the Custom Code embed is inside a Container element with a max-width set and Auto margin applied to the left and right.
Once finished, publish your site and check out your new Instagram feed widget! You've now successfully added an Instagram Feed to your website. Thanks for reading!