Webflow

Social share buttons on your Webflow site

How to add custom social share buttons to your Webflow Collection Pages

Overview

Social share icons are commonplace on blogs and other content you want people to share. While there are third party options that can handle this for you (which we cover below), it's actually pretty easy to create these on your own. Additionally, by building these right in your Webflow site, you have complete control over the style, presentation, and you won't be putting your site visitors in a position to be tracked by third party companies.

Third Party Options

In the spirit of No Code, there are several third party No Code options that will dynamically add social share links onto your site. Two of the most popular tools are ShareThis and AddThis. These tools are both full featured and free. The one thing to know is that they do collect and store information on your site visitors. For this reason, I usually avoid using these tools. If you would like to implement ShareThis, here is a ShareThis tutorial on Webflow University.

Another No Code tool that might be worth checking out is Elfsight. As a paid tool they don't collect and store user data (they do use a cookie to track the number of visitors on your site, but they don't collect/sell any user data).

Custom Webflow Solution

If you're not interested in having a third part collect information on your site visitors or you don't want to pay for social share links - here is a simple custom solution. With this you'll be able to customize the button design with the full power of Webflow.

Simple Social Share Link Setup

On your Webflow styles page (if you don't have a styles page, create a test page), create your share links using a div and link elements. You want to build and keep this instance of your social links so you can easily style everything — and this will also prevent the classes from being removed if you clean up your CSS.
Add classes to your div and all links. (All links can have the same class if they are going to be styled the same.)

On your collection page, add an Embed block where you would like your share links to be located. Give the Embed block the same class as your div from the previous step. (eg Share Buttons)
Copy/Paste the code below into your Embed block.

Update the empty class="" in the code to match the classes given to your links. Important: Webflow automatically replaces all spaces with - and uses all lowercase letters. So the class "Share Link" becomes "share-link" in your code.
Still in the Embed Block... replace "[your URL path/{slug variable}]" with your URL and the collection folder path

The red box is the URL path to your page.

Add the "Slug" variable after your path

Advanced Implementation

If you want to take your share buttons up a notch - beyond a simple list of links - we have a few tips. Just like the simple implementation, the end result will be to build your share links in an embed block. However, since your structure will likely be a bit more involved, it is easier to grab the HTML code from the dev tools. Here is how:

First, build your links in Webflow using divs, links, link blocks, etc. Add your classes and style them how you want.
Publish your page to your staging site.
Open your staging site, right click on the links, and choose "Inspect" from the options

Choose Inspect to open the Developer Tools

Find and highlight the element that contains your social share links. Right click and select "Edit as HTML"

Select and Copy all of the HTML for your container

Past your HTML into this HTML formatter to clean everything up.
Copy and paste your formatted code into a Webflow embed block. You can remove any classes that start with "w-" (eg you can delete w-inline-block) and also remove any inline styles (eg my code had style="opacity: 0;" - which I deleted in the embed block)

Now that you have your clean HTML pasted into your embed block, you can update the link <a>, the same way that is shown in the simple implementation.

Additional Social Sites

The code above includes Facebook, Twitter, LinkedIn and Email links. If you need different sites there are several "Share Link Generator" sites out there. This Social Share Link Generator site includes a lot of different site options. Update: I got some reader feedback that this share link creator was another useful tool.

Once you have selected your desired site, just swap out the beginning of the link in the href and onclick portions of the code.

For example, if you want to share to MySpace instead of Twitter (cause why wouldn't ya?)...

Change all instances of "https://twitter.com/intent/tweet?url=" to "https://myspace.com/post?u="
Update the link title to "Share on MySpace"
Change your text inside the link to "Share on MySpace"

Social share buttons on your Webflow site

More tutorials

Make a Webflow form checkbox required

Dynamic images in Webflow with SVG's or sprites

Airtable Tip - Structuring your Base with Helper Fields

Whalesync — the easiest way to sync Webflow and Airtable