How to Install ShareThis’ Tools on Webflow
Note: If you have a free Webflow plan, ShareThis tools unfortunately will not work on your website since the custom code feature is locked.
In order for ShareThis tools to work on your Webflow website, follow the steps below to add your unique ShareThis code to the <head> section of your website:
Adding ShareThis Tools in All Pages
- Log in or sign up to the ShareThis Platform.
- Add your domain.
- Copy your unique ShareThis installation script.
- You can find it in Step 1 of any App page (e.g., Inline Share Buttons, Sticky Share Buttons, Follow Buttons).
- Or, you can find the same script in Settings → Setup inside the Platform.
- Log in to Webflow’s website. On your Projects Dashboard, select the three dots icon from the project you want your buttons on, and click Settings.
- Within Project Settings, go to the Custom Code section.
- Paste the unique ShareThis code that you copied from step 3 and click Publish.
- In the ShareThis Platform, open the app you want to use and click Enable App to activate it on your site.
- (Optional but recommended) Customize your app.
- Choose between Smart Share Buttons or manual selection of networks.
- Adjust colors to match your brand.
- Set button size, shape, alignment, and enable share counts if desired.
Adding ShareThis Tools in Specific pages
- Log in or sign up to the ShareThis Platform.
- Add your domain.
- Copy your unique ShareThis installation script.
- You can find it in Step 1 of any App page (e.g., Inline Share Buttons, Sticky Share Buttons, Follow Buttons).
- Or, you can find the same script in Settings → Setup inside the Platform.
- Log in to your Webflow website. Open your website in design mode, select Pages from the left sidebar, then select Edit Page Settings from the specific page you want your buttons to be on.
- Within Page Settings, scroll down to the Custom Code section.
- Paste the unique ShareThis code that you copied from step 4 and click Publish.
- In the ShareThis Platform, open the app you want to use and click Enable App to activate it on your site.
- (Optional but recommended) Customize your app.
- Choose between Smart Share Buttons or manual selection of networks.
- Adjust colors to match your brand.
- Set button size, shape, alignment, and enable share counts if desired.
Adding Inline ShareThis tools
Inline tools require an extra snippet of code to work on your site. If you would like to install our Inline Share Buttons, Follow Buttons, Reaction Buttons, or Social Feed tools on your website, you will need to add placement code wherever you want the tool to appear.
- In your ShareThis Platform, select the ShareThis tool you want to use and copy the placement code. Depending on the tool you are installing, the code should look similar to this:
<div class="sharethis-inline-share-buttons"></div> - In the design mode of your Webflow website, go to the Page where you want your buttons to appear.
- From the left sidebar select Add and search for the Embed option, then drag it to where you want the buttons to appear.
- In the new HTML Embed Code Editor window, paste the unique ShareThis code that you copied from Step 1.
- Click Save & Close.
- Click Publish.
Notes:
- The ShareThis tools may not appear on the backend of your website so you may need to visit your published website in order to view them.
- Webflow tends to embed the buttons in Flex containers, which could limit the display of some content, especially the last button.
One way to fix this without changing the display of the parent container from flex to inline-block is to set fixed value for the buttons’ width.
To do this, click on the buttons themselves and on the Webflow Editor, set their Width to a value larger than what it is right now (if this only happens on mobile screens, you apply the same principle, but change the mobile breakpoint at the top of the Webflow Editor to Mobile screens/Tablets):
