How to Add Social Share Buttons to a Framer Blog

Adding social share buttons to your Framer website is a brilliant way to increase engagement and help visitors share your content across their networks.

This tutorial will walk you through how to implement these buttons using the FrameShare plugin, making it easy for users to share your content on platforms like Facebook, X, LinkedIn, and WhatsApp, among others.

If you find it easier to watch than read, then scroll down to the bottom of the page to watch the full tutorial.

What You'll Need

Before we begin, you'll need:

• A Framer account with a project. Sign up here if you don't have an account yet.

• The FrameShare plugin for Framer.

Getting Started with FrameShare

The first step is to get the FrameShare plugin:

1. Open your Framer project

2. Click on the plugin icon in your Framer workspace

3. Search for "FrameShare" and open it

Once you've found the plugin, you'll need to activate it with a license key:

1. Click the "Purchase here" button, which will redirect you to the FrameShare website.

2. Complete your purchase

3. Check your email for the license key

4. Paste this key into the plugin's home screen to activate it

Adding Share Buttons to Your Page

With the plugin activated, you now have access to over 20 social media buttons. Adding them to your page is very easy:

1. Select the social media platforms you want (E.g. Facebook, X, LinkedIn, WhatsApp, etc.)

2. Drag each button from the plugin panel to your canvas

3. Place them exactly where you want them to appear

   
   

Customising Your Buttons

One of the best features of FrameShare is how customisable the buttons are. For each button, you can modify:

• The icon

• The icon size

• The button size

• The button style (filled or outlined)

• The colour

• The corner radius

To maintain a consistent design across your website, you can adjust each button to match your brand:

1. Select a button and open the panel on the right

2. Change the style to "outline" for a cleaner look

3. Replace the default brand colours with your primary colour style

4. Adjust the radius to 32 pixels for perfectly round buttons

Repeat these steps for each button to create a cohesive look. If you're not satisfied with a default icon, you can also upload your own SVG files as replacements.

Using Buttons with CMS Pages

A particularly useful feature of these share buttons is that they work brilliantly with Framer's CMS. When added to a CMS template, the buttons will automatically appear on all pages using that template, and they'll share the specific page the user is viewing.

This makes it perfect for blog posts, product pages, or any other content you want visitors to share.

Creating Share Widgets

To save time and ensure consistency across your website, consider adding your customised buttons to a stack. This creates a reusable widget that you can quickly add to any page on your site without having to recreate the buttons each time.

Testing Your Share Buttons

Before publishing, it's important to test your buttons to ensure they're working correctly:

1. Preview your website

2. Click on each social share button

3. Verify that it opens the correct platform with your page link ready to share

Adding social share buttons to your Framer website with FrameShare is a simple process that can significantly increase your content's reach. The plugin offers extensive customisation options that allow you to match the buttons perfectly to your website's design.

Whether you're building a portfolio, blog, or e-commerce site, these buttons provide an easy way for visitors to share your content across their social networks.

Watch the full video tutorial below: