How to add Social Share Buttons to your Framer Website

In this post we’re going to look into adding social media share buttons to your Framer website, so that your visitors can easily share your content to their social media accounts. These buttons will work on any pages on your website, even on CMS pages.

To do this we’ll be using FrameShare's Lite Widget, a Framer component that lets you add inline share buttons to your project in just 3 steps.

Currently the FrameShare widget support shares to the following platforms:

• X (Twitter)

• Facebook

• LinkedIn

• Pinterest

• Whatsapp

• Email

• Copy link to clipboard.

Before we dive in, let’s make sure you have access to everything you need:

• You'll need to have a Framer account. If you don't have one yet, you can create one here.

• You’ll need to get the FrameShare widget - click here to grab the Lite Widget.

Step 1 - Paste the widget into your Framer project.

After getting the FrameShare widget you’ll be given access to a remix link for the Framer project that includes the component.

Grab the component from this project (copy it to your clipboard).

And then navigate to your own project and paste the component wherever you want to display the widget on your pages.

Step 2 - Select the social icons

Once the component is added to your project, you’ll be able to customise it using the settings on the panel in the right hand side.

Select the icons you want to include in your widget using the toggles to show or hide specific icons. You can choose to includes share buttons for X (Twitter), Facebook, LinkedIn , Pinterest and to copy the link to your clipboard.

Step 3 - Customise the social icons

After using the toggles to select the icons you’ll see the settings to customise the look of all your icons at one go. Change the size, colours, padding, border radius and more to make sure the buttons fit in nicely with the design of your website.

And that’s it! You're ready to publish your changes to see the buttons appear on your website and test them.