Unlock the Power of Music: Embed Spotify on Webflow Tutorial!

in this video I'll teach you how to add a Spotify ined to your webflow site in this first example website farmer sue.com when you scroll down the website you'll notice that there is a dedicated tune into Dr Sue podcast section where she's added a Spotify imbed of a playlist of every single podcast that she's been featured in so this is one example of what it would look like the second example example is Bondi lines.com when we head over to a specific venue let's just say Bank Hotel this specific page provides information on this hotel uh for example for example opening hours and frequently asked questions but you'll notice that there's actually a Spotify ined that is actually implemented in the site and when the user clicks Play You'll Play a audio file explaining Bank hotel as well so there's many ways you can use a Spotify ined but these are just two examples let's go ahead and build this super super quick and simple all you want to do is just head over to the section you want to add your Ed click on to plus and just drag in an ed to the div block or the container that you want and then from here you want to go ahead and go into Spotify and you want to find a public playlist let's just say for example I have this nostalgic songs for 2000 kid and what you want to do is you want to go ahead and click into this three dot icon Click Share and click embed playlist from here you'll be given two options of colors one is just a default um black and white color and the other option is an automatic generated color by Spotify so at the time of recording this video you only have two options and you can't really change the color of this it's only the color that Spotify dictates what you can try to do is to update the album cover or this the playlist cover and that would automatically prompt Spotify to generate a c color that is relevant to that specific thumbnail image so that's how you could change the color but besides that you can't really manually change it into a specific hexa code the next thing you can also change is the sizing so you can add a compact Spotify ined or you can add a normal Spotify ined so if you remember from the example website with Bondi lines this is more of a compact type and whereas the pharmaceu is more of a a height type or a normal type so once that's done you can actually tick this button here which shows code and you can see the code that we'll be copying you want to hit the button copy right here you want to go back into web flow you want to go back to your ined and just paste that in and once that's done you'll see it live on the canvas for this example right here because this has so many songs if I go back to Spotify this has about I don't know like over 100 songs it doesn't really make sense for this to be this certain height so what we can do is we can actually manipulate this by going into the HTML ined and right now you can see it's got a fixed height of 352 pixels in this instance it'll probably be better if this was just a bit taller so we can go ahead and just manually change the height let's just say 800 pixels hit save and close and you'll notice that it's much much better and if we actually publish this we can see that everything will be working and responsiveness is also done automatic so right here if I just go to this example website we can see see our Spotify Ed is right there the user can play songs right here they can also scroll down to see the additional songs we've also added a height of 800 pixels so that's how you add an embed and it's the exact same thing if you want to embed just a specific song for example this one right here where is my mind if I go here and I want to embed this song I can just click this three dot icon hit share hit embed track and you can see that we have a color selected and we can just click copy we can change it from normal to compact depending on what you want and just one more thing let's just say you want to embed a podcast what you can do is you can click this three dot icon hit embed show right here and you can click copy and if we go back into web flow and you paste that in you may notice that it only Paces the most recent episode of that podcast so if you don't want that to happen what you need to do is you need to add or create a new public playlist and in that public playlist you need to add all the podcast episodes manually so for example in this instance sustainable Builders podcast I've created a public playlist and I had to manually add each one of these podcasts into this playlist meaning you have to manually update it and then you can embed that and it'll show everything at once so that's how I would add a podcast inside of your website um and at the time of recording this video this may change in the future thank you guys for watching I hope you found this video helpful if you did please leave a like and a comment and if you want more webflow videos and design videos make sure to subscribe and hit the Bell notification I'll be releasing new videos every week and I'll see you guys there

Channel: Derek Siu | Webflow & Web Design

Views: 619

Keywords:

Id: cl34T8ma6Ks

Length: 5min 24sec (324 seconds)

Published: Tue Feb 27 2024