in this video we are going to create custom Instagram feeds in our website without coding We're generating the Instagram feed using Finn sweet components app and styling them in web flow designer just like native elements in web flow First click on apps and open the finite components app Go to the builder Select the Instagram feed component Here in the configuration panel we can see the general settings We can change the name of the component the instance name and the class folder The class folder serves as the prefix that will be added to the classes for better organization In the access token you should add the access token of your Instagram profile Click on this link to find the step-by-step documentation We can show or hide the header the caption the comments count and likes count In the view posts on the page option we can select whether we want to redirect users to Instagram or display the posts in a light box on the page We can also limit the number of posts that are displayed and change the layout from grid to slider Let's generate our first Instagram feed I'll select the element that I will add the component inside I'll remove header captions likes and comments to keep only a grid with the pictures Let's click on the create Instagram feed button and confirm Nice Our Instagram feed component was generated on the page It's important to say that all these elements are generated with custom attributes that are required to make the solution work So please do not remove them When we created this component we also added custom code to the project To see this custom code you can go to site settings and custom code This custom code is also required to make the solution work So please do not remove it Let's go back to designer Now we can style the Insta feed however we want I'll select the list and change the grid to five columns And in the image I'll add radius 0.5 rim Let's publish our project and see the final result Nice Our Instagram feed is working perfectly It also shows the content on the page when we click on the posts Cool Now let's create our Instagram feed using a slider Go to apps and open the Finssweet components app Go to the builder Select the Instagram feed I'll change the name to Instagram slider and do the same for the instance and class folder Done For the slider I'll remove the caption and keep comments and like counts in layout Let's select slider I'll add loop change pageionation to fraction and sliders per view on desktop to four We can also change tablet and mobile break points if we want Let's select the element that I will add the component inside Click on create Instagram feed and confirm Now a slider with the Instagram post was added to the page Let's style it You can change any style that you want The options are endless Our solution will use the first item as template We can remove the other ones if we want First I'll select the slide Change background to white [Music] radius to 0.5 rim Overflow hidden And change gap to 0.0 Select the row with likes and comments Add one rem padding Cool Looking good Now I'll copy this div block with the picture name and username and paste inside the slide Move it above the image and add extra padding of one rep This is a good example of how customizable our solution is Let's get rid of the header and style the slider pageionation and arrows Select navigation align right Remove the padding Remove default background color Done Select the previous arrow Move it closer to the next button Change the color Change radius Increase padding Select pageionation Remove 100% width Add extra right margin Select current fraction Increase font size to finish Let's bring this header inside our component and move pageionation inside the header Everything will work if we keep the elements inside the instance wrapper that contains the instance attribute Let's publish [Music] Amazing Our solution is rendering the content from the Instagram profile and our slider is working That's sweet Finn sweet components is always free with your io staging domain We will never charge you to test and build your components When you are ready to go live get a plan to publish to production You are one step closer to building next level components inside your Web Flow project You can download Finssweet components in the Web Flow apps marketplace and those links are in the description below Go to finssweet.com/components to learn how we can help you succeed with Web Flow [Music]