How to Add Social Share Buttons to Your Squarespace Blog Without Plugins (Works on Desktop and Mobile)

Nov 24

Preview

How to Add Social Share Buttons to Your Squarespace Blog Without Plugins

One of the biggest challenges Squarespace users face is the lack of built-in, customizable social share buttons on blog posts. While there are third-party plugins and extensions available, they often come with limitations, hidden costs, or security concerns.

But don’t worry! In this post, I’ll show you how I added custom share buttons to my blog posts on Squarespace—all with a little HTML, CSS, and JavaScript. This solution is 100% free, fully customizable, and doesn’t require any plugins. 🚀

Why Social Share Buttons Matter

Social share buttons are more than just a nice touch—they’re a powerful tool for increasing your blog’s reach. Here’s why you need them:

• Boost Traffic: Every share puts your content in front of new audiences.

• Increase Engagement: Make it easy for readers to share their favorite posts with friends.

• Brand Consistency: Custom buttons allow you to match your website’s aesthetic.

Step-by-Step Guide: Adding Custom Social Share Buttons

This guide will walk you through the process of adding stylish, responsive social share buttons to your Squarespace blog posts using the Post Blog Code Injection feature.

Step 1: Access the Post Blog Code Injection

The Post Blog Code Injection is a powerful feature in Squarespace that lets you inject custom code directly into your blog posts.

1. Log in to your Squarespace dashboard.

2. Navigate to Settings > Advanced > Code Injection > Post Blog Code Injection.

3. Open the editor and prepare to add your code.

Step 2: Add the Share Buttons Code

Copy and paste the following code into the Post Blog Code Injection box:

</a>

</a>

</a>

</a>

</a>

</a>

</div>

// Sharing Functions

const currentURL = encodeURIComponent(window.location.href);

window.shareOnFacebook = function () {

window.open(`https://www.facebook.com/sharer/sharer.php?u=${currentURL}`, '_blank');

};

window.shareOnTwitter = function () {

window.open(`https://twitter.com/intent/tweet?url=${currentURL}`, '_blank');

};

window.shareOnPinterest = function () {

const imageURL = encodeURIComponent("YOUR_IMAGE_URL"); // Replace with your image URL

window.open(`https://pinterest.com/pin/create/button/?url=${currentURL}&media=${imageURL}`, '_blank');

};

window.shareOnLinkedIn = function () {

window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${currentURL}`, '_blank');

};

window.shareOnTumblr = function () {

window.open(`https://www.tumblr.com/widgets/share/tool?canonicalUrl=${currentURL}`, '_blank');

};

</script>

Step 3: Style the Buttons with CSS

Now it’s time to style the buttons so they fit seamlessly into your blog design.

1. Go to Design > Custom CSS in Squarespace.

2. Paste the following CSS:

.post-share-buttons {

display: flex;

gap: 10px;

justify-content: center; /* Center the buttons */

margin: 20px 0; /* Add spacing above and below the buttons */

}

.share-icon {

display: inline-flex;

justify-content: center;

align-items: center;

width: 40px; /* Square size */

height: 40px; /* Square size */

border-radius: 8px; /* Slightly rounded corners */

background-color: #f0f0f0;

color: white; /* Icon color */

font-size: 18px;

text-decoration: none;

transition: transform 0.2s ease, background-color 0.3s ease;

}

.share-icon.facebook { background-color: #3b5998; }

.share-icon.twitter { background-color: #1da1f2; }

.share-icon.pinterest { background-color: #bd081c; }

.share-icon.linkedin { background-color: #0077b5; }

.share-icon.tumblr { background-color: #35465c; }

.share-icon.instagram {

background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);

}

.share-icon:hover {

transform: scale(1.1);

}

Step 4: Load Font Awesome for Icons

The icons are powered by Font Awesome. Ensure it’s loaded in your Squarespace site.

1. Navigate to Settings > Advanced > Code Injection > Header.

2. Add this line:

Step 5: Test Your Buttons

1. Open any blog post on your website.

2. Verify that the buttons appear in the location specified by the Post Blog Code Injection.

3. Test the functionality of each button.

Why This Works

• Dynamic Sharing: The buttons automatically pull the current page URL, so they’ll work for any blog post.

• Customizable Design: Easily adjust colors, sizes, or alignment to match your website’s aesthetic.

• No Plugins: This solution is lightweight, secure, and doesn’t rely on third-party tools.

Conclusion

Adding social share buttons to your Squarespace blog posts doesn’t have to be complicated. With a little code, you can boost engagement, drive traffic, and give your readers an easy way to share your amazing content. If you don’t want to put code blocks to every single blog post, you can design a code to put them on your whole website. Check my other tutorials on how to do this.

Happy coding! 🚀

SEO Keywords for Discoverability:

• How to add social share buttons on Squarespace

• Custom social share buttons for Squarespace blog

• Add share buttons Squarespace 7.1

• Squarespace social buttons without plugins

This content is exclusive to our paid members. Please respect copyright laws and refrain from copying or sharing this material.

Step-by-Step Squarespace TutorialsSquarespace Customization

NoarusRainbowLand

How to Add Social Share Buttons to Your Squarespace Blog Without Plugins (Works on Desktop and Mobile)

Adding Custom Social Media Share Icons Below Product Prices on Squarespace (Redux Desktop Version only)

How to Add Custom Social Share Buttons to Squarespace Product Pages (Without Plugins Desktop Version)