>

How to add Social Share Buttons to your Framer Website

>

How to add Social Share Buttons to your Framer Website

>

How to add Social Share Buttons to your Framer Website

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, 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:

  • Twitter

  • Facebook

  • Linkedin

  • Pinterest

  • 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 Twitter button for free or the full widget for $7.


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.

SHARE ON:

Get started with Beehiiv
Get started with Beehiiv
Get started with Beehiiv

Start building your website in minutes now with Framer.

Start building your website in minutes now with Framer.

Start building your website in minutes now with Framer.

Templates

Browse the latest templates created by the Framer community to launch your website in minutes.

BROWSE TEMPLATES

Submissions

Are you creating Framer templates? Submit it to get it featured on our website.

Resources

Discover the best Framer resources create by members of the Framer community

Templates

Browse the latest templates created by the Framer community to launch your website in minutes.

BROWSE TEMPLATES

Submissions

Are you creating Framer templates? Submit it to get it featured on our website.

Resources

Discover the best Framer resources create by members of the Framer community

Templates

Browse the latest templates created by the Framer community to launch your website in minutes.

BROWSE TEMPLATES

Submissions

Are you creating Framer templates? Submit it to get it featured on our website.

Resources

Discover the best Framer resources create by members of the Framer community

Start building your website in minutes now with Framer.

Start building your website in minutes now with Framer.

Newsletter

Sign up to our newsletter to keep updated with the latest template releases.

Newsletter

Sign up to our newsletter to keep updated with the latest template releases.

Newsletter

Sign up to our newsletter to keep updated with the latest template releases.