How to add Social Share Buttons to your Framer Website

This article was originally published in 2024 and has now been updated for 2025 based on the latest features released by Framer.

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 plugin that makes it really easy to add share buttons to your project in just 3 steps.

Currently the FrameShare plugin supports over 20+ social media platforms - from Facebook, to X, LinkedIn, Pinterest and more. You can check the full list of platforms that are supported here.

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 plugin - click here to get the plugin now.

Step 1 - Open the plugin and activate your account

The FrameShare plugin requires to purchase a License Key to be able to access the functionalities of the plugin. Check out our Deals page to see if a discount is currently available for this plugin.

After purchasing the plugin you’ll receive a License Key. Open the plugin from your Framer project and enter the license key to activate your account.

This is a one-time purchase, which means that the license key will let you use the plugin across different Framer projects and the license is also available for a lifetime.

Step 2 - Select the social share buttons

Browse all the buttons available in the plugin to select the ones you want to add to your website.

Simply drag each button onto the canvas and drop them exactly where you want them to be displayed on your website.

You can choose to includes share buttons from over 20 of the most popular social media platforms. Buttons for emailing a link, copying a link to the clipboard and printing the page are also included.

By default all the buttons will have a white icon and the brand's main colour as background colour - this can be customised in the next step.

Step 3 - Customise the social icons

After adding all the buttons to your website it’s now time to customise them so that they match the design of your website.

Select a button and customise its size, colour, fill and radius using the settings available on the panel in the right hand side.

If you’re not satisfied with the icon that is provided by default you also have the option to upload your own SVG icon for each button. Use the same panel in the right hand side to upload an SVG that will replace the current icon.

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

Pro Tip:
Customise all the buttons to your liking and add them to a stack to create a custom share widget that you can reuse on different pages across your website.

Get the FrameShare plugin for Framer here →