How To

Add Social Share Buttons To Webflow Using ShareThis & Tag Manager

Add Social Share Buttons To Webflow Using ShareThis & Tag Manager
May 19, 2024

  · 5 min

In this post, we'll be looking at quickly adding social share buttons to your blog posts that will pull in your OG Tags when you share to social.

For this post you're going to need Google Tag Manager installed on your site or Webflow Project. You can find the how-to for Webflow here. You're also going to need a ShareThis account that you can set up for free here. We're going to set this up for our Webflow Project's Blog posts, but this can be for any page on your site or product pages for Ecommerce and it isn't restricted to Webflow, as long as you have Tag Manager installed you're golden. We'll also do a more in depth post on installing share buttons using dynamic CMS collection fields for Webflow and native social share snippets at a later stage, but this is pretty quick and painless so enjoy.

Step 1 - Set up ShareThis and Tag Manager

Start by adding the domain you'll be using.

Add Domain to ShareThis
Add Domain to ShareThis

Hit Activate Code and copy the snippet.

ShareThis Tracking Code
ShareThis Tracking Code

Head you for Tag Manager Container and create and new Tag. Give the Tag an name, select Custom HTML and paste in the Snippet.

Tag Manager

Add ShareThis to Tag Manager
Add ShareThis to Tag Manager

For the Trigger, select All Pages, we're going with the Fully Loaded Trigger. That will fire the Tag after everything has loaded on the page giving a better user experience and speeding up your PageSpeed results for Google. You find a post on how to set that up here if you'd like to go down that route, but All Pages is fine if you're not worried about that.

Add ShareThis Trigger in Tag Manager
Add ShareThis Trigger in Tag Manager

Now, Save the Tag, hit Submit and Publish the Container.

Go back to ShareThis and hit Activate.

Activate ShareThis Tracking Code Test
Activate ShareThis Tracking Code Test

If you get a warning about the code not being in the head, ignore that and continue.

Go to the Apps Directory.

We're going to be adding Sticky Share buttons, but you can choose whatever.

Pick your Share buttons in ShareThis
Pick your Share buttons in ShareThis

Hit Enable tool and if there's a warning just ignore that as well.

Enable the Share buttons in ShareThis
Enable the Share buttons in ShareThis

Choose your social networks, alignment and whatever else you want to customise and hit update.

Give ShareThis a few minutes to do it's thing and you should see your share buttons:

ShareThis share buttons visible on your site
ShareThis share buttons visible on your site

This is all good and well, but wait you might say, you said on my blog and now it's all over my site.

Step 2 - Specify on which pages to show the share buttons

Let's make it show on only the blog post pages.

Open Tag Manager. If you're not going down the Fully Loaded Trigger path follow Step 1 A, if you're using the Fully Loaded Trigger use Step 1 B.

Step 1 A - Create a Blog Post Trigger.

Open the Tag, remove the trigger by hitting minus and create a new Trigger.

Update the ShareThis trigger in Google Tag Manager
Update the ShareThis trigger in Google Tag Manager

Give the Trigger a name and select Page View as the Trigger Type.

ShareThis Page view trigger in Tag Manager
ShareThis Page view trigger in Tag Manager

Before we continue, have a look at your blog post URL structure. Our posts sit the in the Post CMS collection and all post slugs start with /post/ as that the 'folder' for the blog collection.

<!-- fs-richtext-ignore -->https://www.milkmoonstudio.com/post/installing-free-behavioural-insights-using-google-tag-manager-and-microsoft-clarity

This makes things fairly simple for us, it means that all posts contain /post/ so we can create a trigger for that. You'll just use whatever structure you're using.

So, on the Trigger select, Some Page Views, then Page URL from the dropdown, then Contains, then the part of your blog slug you'll be using, for us that's /post/

ShareThis some page views limiting trigger
ShareThis some page views limiting trigger

Make sure you've got the new Trigger selected and the old one removed. Save, Submit and Publish and you're good to go. But what's happening?

Well, every time Tag Manager sees a page view event it's going to only be looking for Some Pages, those pages will have a Page URL that Contains /post/ or whatever you used. If you'd like to load it on other pages as well, in our case we have it on our portfolio pages, just create more Triggers for those pages and add those to the Tag.

Now you'll have share buttons filled in using your site's OG Tags.

Testing ShareThis sharing to Facebook
Testing ShareThis sharing to Facebook

Step 1 B - Create a Fully Loaded Some Pages Trigger

If you went down the Fully Loaded Trigger path you're going to do the following.

Look at your blog post URL structure. Our posts sit the in the Post CMS collection and all post slugs start with /post/ as that's our blog folder.

<!-- fs-richtext-ignore -->https://www.milkmoonstudio.com/post/installing-free-behavioural-insights-using-google-tag-manager-and-microsoft-clarity

This makes things fairly simple for us, it means that all posts contain /post/ so we can create a trigger for that. You'll just use whatever structure you're using.

Click on the Fully Loaded Trigger, now make a copy.

Fully Loaded Google Tag Manager Trigger
Fully Loaded Google Tag Manager Trigger

Name your Trigger, select Some Custom Events, then Page URL from the Dropdown, then Contains and fill in the bit of your URL you'll be using, /post/ for us.

Narrow the ShareThis Fully Loaded Trigger to Specific Pages
Narrow the ShareThis Fully Loaded Trigger to Specific Pages

Save the Trigger, remove the old Trigger and add your new Blog Trigger, Save, Submit and Publish.

And you're done. But what's happening? Every time your new Fully Loaded Blog Trigger fires Tag Manager is looking for the custom event, but only on pages where the URL Contains /post/ in our case. As a bonus, it's waiting for everything else to load first! If you'd like to load it on other pages as well, in our case we have it on our portfolio pages, just create more Triggers for those pages and add those to the Tag.

Now you'll have share buttons filled in using your site's OG Tags.

Final ShareThis Test After going live and adding a fully loaded trigger.
Final ShareThis Test After going live and adding a fully loaded trigger.

Have questions, hit us up in the comments and check out more how-tos here.


Share

All Posts

Gradient Background