Transcript of How to Add Social Sharing in Framer

hey guys West from insert frame here and today I'm going to show you how to set up Social sharing on your framer site with super Fields so I've set up a bit of a demonstration here as you can see it's just a simple blog post uh with some social sharing buttons here on the left uh and if we wanted to share this page to Twitter or X you can see here it works and does just that cool so what we're going to want to do if we're going to want to do this our own site is we're going to want to go to the superfields dashboard we're going to want to go to social sharing and copy this component right here and then we'll go to our framer project so obviously yours will look a little different um but the way you set it up should look the same no matter what your site looks like so it's really simple all I'm going to do I know I want my buttons to be down here just like in the example I showed you which we've got just here for reference I just go here um select the frame I want to paste it in and just go ahead and hit paste and now once we've done that we can go ahead and check out the panel here for the component so we've got a few options here to customize um what you want the button to look like but first we're just going to take a look at some of the platforms so these are all um the platforms you can share your page to and as you can see here it's a pretty good selection it's all your made major uh social medias and sharing platforms so if I wanted it to look like it was on this page here we've got Facebook X LinkedIn email and uh just the copying the URL so I'm just going to duplicate that because we've got Facebook already Twitter LinkedIn and was email and then to copy the URL cool so now we've got the buttons in and we've set them up to the right social sharing platforms um and what we're going to do now is customize uh the buttons appearances so the way we do that I'm just going to select them all and do them all in one go but as you can see here you can add a border let's say I wanted to add you know a big black border and um make it give them white borders and I'll just do it like that but I'm going to get rid of that uh and because I want it to look the same as it does here um I can see here that there are no brand colors so I'm just going to go into the colors and the background fill I'm just going to go to custom and then delete that so now that's got rid of the background um the icon color I'm just going to keep with white might use the style there that I've set up and then I'm just going to get rid of the radius get rid of the padding and then you can see there that it's basically the same or if not the exact same as we've got it set up just here so that's the basic customization that we can do to the components but let's say I wanted to add my own custom icon let's say I wanted this x to be the old Twitter logo with the bird um what I'd do is I'd go to a font Library like font awesome.com this is just what I've got and I'm going to go in here and I'm just going to pick the color that I want I know I want it to be white and then I'm just going to copy the SVG the snippet there going to go back over to my project which is this one and what I'm going to do is go here where it says custom icon it's just the last selection there and then I just paste it in and then Watch What Happens here as I hit enter and you can do the same for an image if you wanted to input an image for the icon there but we're just going to stick with the SVG the next thing I want to look at is this share link uh toggle here so by default set to current page and that's the way that we want it for this example here uh we just want it to share the page that it's attached to so if I had another CMS collection which I don't but if I did uh and it was a different blog post it would share that specific page but let's just say I wanted it to be attached to a custom URL um I would hook this URL up to a variable let's say I had the um another link variable but right now I'm just going to hook it up to the slug just to show you how that would work but we're just going to keep it on current page cool so now all that's left to do is publish our changes I'm just going to hit up update open the link you can see here it's the right page we've got this custom icon there and then if I wanted to try that just hit the button there and as you can see that works as it should and if you've set it up correctly it should look the same uh you want to test that it all works once you've published it and if the correct link is there you know you've done it correctly so that's how you set up Social sharing with superfields I hope this helped and I hope you have a great day see you later