Add Share Buttons to Your Squarespace Site with ShareThis

Learn to add social media Share Buttons to your Squarespace site using ShareThis with our step-by-step guide. This enhances engagement and social sharing, helping you connect with a broader audience. You can add buttons to blog posts, products, and events to encourage social sharing, which can increase traffic. Note that Squarespace Version 7.1 lacks built-in share buttons, requiring custom code injection, a premium feature not available in the personal plan.

Setting Up ShareThis

Visit the ShareThis website and hover over “Website Tools” in the top navigation. From the dropdown, select the “Share Buttons” option.

On the following page, click the “Activate Now” button. Among the two popular options, I prefer the “Inline Share Buttons” for their superior user experience over “Sticky Share Buttons.”

Customizing Your Share Buttons

Next, click on the “Customize your Inline Share Buttons” option. You can choose the “Smart Share Buttons” feature, which automatically adjusts the social channels based on your website visitors' locations; however, I opt for the manual selection.

Now, customize the look of your share buttons by adjusting settings such as button size, shape, color, language, and the social media platforms you wish to include. Tailor these features to align with your site's branding and aesthetic.

Add Share Buttons to Your Squarespace Site with ShareThis

Selecting Social Platforms

In the next section, top social platforms are pre-selected. Simply click to deselect any that you don't want. You have plenty of options, so choose the social networks you wish to display on your website.

Then, select the alignment and other preferences. I recommend choosing the “None” option under “Labels'“, as it allows the buttons to occupy less space while still looking sleek.

You can also adjust the slider under “Corners” to decide how rounded you want the buttons to be.

Generating the Code Snippet

Once you’ve finalized the appearance of your share buttons, click Next and create your account by entering your email address and selecting a password.

After signing up, ShareThis will generate a unique code snippet for your buttons. Copy this code, as you'll need it to integrate into your Squarespace site.

Integrating Code into Squarespace

Next, access your Squarespace site. In the Pages panel, scroll down and select the Website Tools option, then navigate to the Code Injection section. Please note that this option is not available on personal plans. Click on the last line and press Enter to create a new code line. Right-click and paste the code you copied from ShareThis. Finally, click the Save button.

Adding Share Buttons to Blog Posts

Once you've added the code to your Squarespace site, return to the ShareThis website and scroll down to copy the placement code.

Now, open your Squarespace site again. In the Pages panel, navigate to a blog post page. Click the Plus ➕ symbol and select the "Code" option from the menu. Choose the default code block and paste the placement code you copied from ShareThis. Double-click in the empty space. The share buttons will be successfully added, but they may not be visible in the editing view. Save your changes.

Viewing Share Buttons Live

To see the live share buttons, open the same webpage in a new browser tab. You should see the social media share buttons displayed on your site. You can test one of the share buttons to ensure the title and URL of your webpage are correctly included in a new post on the selected social platform. If a website visitor clicks the specific share button, around 60 social platform options will be presented for sharing.

Adding Share Buttons to Other Pages

In addition to blog pages, you can add social media share buttons to other types of pages on your Squarespace site, such as product pages or the home page. To add share buttons to the home page, select a section and click the "Add Block" button. From the menu, choose the "Code" option. You can adjust the position and size of the code block as needed. Click the pencil ✎ symbol and paste the same placement code you copied from ShareThis. The share buttons will be added. For a better user experience, consider guiding users on how to use the share buttons. Save your changes and then open the home page on the live site to view the share buttons.

Finalizing Setup in ShareThis

Next, return to the ShareThis website and select the “Continue to Dashboard” button. Here, you should add your domain name for better organization, especially if you have multiple domains. On the next page, click the “Activate Code” button. Since you have already added this code to your website, simply click the “Activate” button. You will receive a notification confirming that the code has been successfully activated.

Managing Your Share Buttons

From the ShareThis dashboard, you can access the Apps Directory to copy the placement code again whenever needed. You can also update the appearance and settings of the share buttons from the dashboard.

Conclusion

I hope you found this tutorial helpful! Be sure to check out our other tutorials for additional options to add share buttons to your Squarespace site. Utilize ShareThis's analytics tools to track how often your content is shared and identify which platforms are most popular with your audience. This data can help refine your social media strategy.

By following these steps, you can seamlessly integrate ShareThis buttons into your Squarespace site, enhancing interactivity and expanding your reach.

More Resources

Be sure to check out Dozro's social media platforms, including our YouTube channel and Facebook page.

Irfan Hayat

As the Founder and CEO of DOZRO and various other ventures, I bring a wealth of diverse life experiences to the forefront. At heart, I am a passionate tech enthusiast. Feel free to explore our range of Pro Services, such as website and graphics design, SEO, and video editing, with confidence.

https://www.dozro.com/irfan-hayat
Next
Next

Adding “Copy to Clipboard” Button on Squarespace site for Free without Plugin: Easy Step-by-Step Guide