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.
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.
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.
SHARE ON:
Featured Articles
Templates
Best Framer Templates to Launch a Course
Read article →
Templates
Best Framer Templates to Launch a Course
Read article →
Resources
Best Framer Plugins to Supercharge your CMS
Read article →
Resources
Best Framer Plugins to Supercharge your CMS
Read article →
Resources
5 Framer Plugins you Need to Check Out
Read article →
Resources
5 Framer Plugins you Need to Check Out
Read article →
Popular templates
Popular resources
Frameblox
The ultimate Framer UI kit and prebuilt website template library.
Component Library
Frameblox
The ultimate Framer UI kit and prebuilt website template library.
Component Library
SegmentUI
Boost your site designing speed with this comprehensive Framer UI Kit.
Component Library
SegmentUI
Boost your site designing speed with this comprehensive Framer UI Kit.
Component Library
Superfields
Power up your CMS with pagination, social sharing and more.
Integrations
Superfields
Power up your CMS with pagination, social sharing and more.
Integrations
Newsletter
Sign up to our newsletter to keep updated with the latest Framer templates, updates and resources.