Add inline share buttons with ShareThis

Learn how to add inline share buttons to your Webflow project with ShareThis.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

ShareThis lets you add inline share buttons to your Webflow project — site visitors can share your content and you can track shares. We call that a win-win!

In this lesson:

  1. Add your project to ShareThis
  2. Paste the code snippet into Webflow
  3. Add and style the inline buttons


Add your project to ShareThis

If you don’t already have one, go ahead and sign up for a ShareThis account now. 

Once you’ve done that, you’ll choose Setup New Property from the dropdown in the top right of your ShareThis account, enter your project’s domain, and click ADD.

Paste the code snippet into Webflow

In this step, you’ll grab the code snippet for inline sharing. Under Sharing tools > Inline share buttons, click Get the code, and click Copy (to copy the snippet).

Back in Webflow, from either the Dashboard or the Designer, open your Project settings where you’ll paste the snippet you copied in the last step. 

Under the Custom code tab, paste your code in the Head code field using Command + V (on Mac) or Control + V (on Windows), click Save changes, and in the top right click Publish and then Publish to selected domains.


You can verify your work back in ShareThis. Under Sharing tools > Inline share buttons, click Verify manually, enter your project’s URL, click Verify, and then scroll down to Update


Add and style the inline buttons

Still in ShareThis under Sharing tools > Inline share buttons, click Copy code.


You can customize your buttons in that same window now, or return to it later. We’ll come back to this.

Head back to your project in Webflow. From the left toolbar, click the plus sign, and under Components, drag an Embed element into your design where you want the ShareThis buttons to appear. 


When the HTML embed code editor pops up, paste your code snippet from ShareThis, and hit Save & close.


Because the code snippet you just pasted is a reference to the one you pasted in the previous step, your buttons won’t appear yet. To make them show up, select Publish from the top right, click Publish to selected domains, and click to open the live site — your buttons should be right where you placed them. 


You can now return to ShareThis to customize your button alignment, color, language, etc. Once you’re happy with your changes, click Update. Back in Webflow, refresh your project with Command + R (on Mac) or Control + R (on Windows) to see your changes.

Now you can refer to the Social Analytics dashboard in your ShareThis account to track the performance of your shares over time. Great work!

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top