Include inline social buttons with ShareThis

ShareThis enables you to integrate inline social buttons into your Webflow project — visitors to your site can easily share your content, and you can monitor the shares. This creates a beneficial outcome for everyone involved!

Topics covered in this tutorial:

1. Add your project to ShareThis
2. Insert the code snippet into Webflow
3. Integrate and design the inline buttons

Integrate your project into ShareThis

If you haven’t registered yet, please go ahead and create a ShareThis account now. 

Once you’ve completed the registration, select Setup New Property from the drop-down menu located at the top right corner of your ShareThis account, enter your project’s domain, and then click ADD.

Insert the code snippet into Webflow

In this step, you’ll obtain the code snippet for incorporating inline social sharing. Under Sharing tools > Inline social buttons, click on Get the code, and then click on Copy to save the snippet to your clipboard.

Upon returning to Webflow, either through the Dashboard or the Designer, navigate to your Project settings where you’ll paste the copied snippet from the previous step. 

Within the Custom code section, insert your code in the Head code field using Command + V (on Mac) or Control + V (on Windows), save your changes by clicking Save changes, then head to the top right corner and select Publish followed by Publish to selected domains.

You can validate your progress within ShareThis. Under Sharing tools > Inline social buttons, choose Verify manually, input your project’s URL, click Verify, and then proceed to Update. 

Integrate and customize the inline buttons

While still in the ShareThis platform under Sharing tools > Inline social buttons, simply click on Copy code.

‍

You can now customize your buttons within that same interface, or you can revisit this customization later. We will get back to this shortly.

Return to your Webflow project. From the left-hand sidebar, use the plus icon and, under Components, drag an Embed element to the area where you wish to display the ShareThis buttons. 

When the HTML embed code editor appears, paste the code snippet from ShareThis and then select Save & close.

Since the code snippet you just inserted refers to the one integrated in the previous step, your buttons will not be visible yet. To display them, choose Publish from the top right corner, proceed with Publish to selected domains, and then open the live site — your buttons should now be visible in the designated location. 

‍

You can go back to ShareThis to modify the alignment, color, language, and other aspects of your buttons. Once you are satisfied with the changes, click on Update. Refresh your Webflow project by pressing Command + R (on Mac) or Control + R (on Windows) to view the recent adjustments.

You can now access the Social Analytics dashboard within your ShareThis account to monitor the performance of your shares over time. Remarkable job!