Talk 8: How to Add Social Sharing Buttons to Your Squarespace Website (Mobile Version)
Adding social sharing buttons to your Squarespace site can boost engagement, make your content more shareable, and drive traffic. But what happens when the built-in options aren’t cutting it? In this guide, I’ll walk you through a straightforward method to add custom social media share buttons to your product pages and blog posts.
If you’re on the hunt for more advanced customizations, I’ll hint at where to find them (spoiler: my paid blog 😉).
Why Add Custom Social Buttons?
• Enhanced Engagement: Make it easy for visitors to share your content.
• Custom Branding: Match the buttons to your site’s design.
• Cross-Platform Reach: Gain exposure on Facebook, Twitter, Pinterest, and more.
How I Did It
The process involves using custom JavaScript and CSS. Here’s a simplified version of the steps I followed:
1. Identify Target Elements:
I inspected my site using Google Chrome’s Developer Tools (Ctrl + Shift + C or Cmd + Shift + C) to find the correct spots for the buttons (e.g., below product prices or blog titles).
2. Inject Custom JavaScript:
Using Squarespace’s Code Injection feature, I added a script to dynamically place social buttons exactly where I wanted them.
3. Style the Buttons:
CSS was added to ensure the buttons look modern and mobile-friendly, with hover effects and unique colors for each platform.
A Sneak Peek of the Code
Here’s a snippet of what I used:
document.addEventListener("DOMContentLoaded", function () {
const shareButtonsHTML = `
<div class="share-buttons">
<a href="#" class="share-icon facebook">Facebook</a>
<a href="#" class="share-icon twitter">Twitter</a>
<a href="#" class="share-icon pinterest">Pinterest</a>
</div>
`;
const productPrice = document.querySelector(".pdp-details-price");
if (productPrice) {
productPrice.insertAdjacentHTML("afterend", shareButtonsHTML);
}
});
Want the full code and troubleshooting tips?
