How to Add Custom Social Media Share Buttons to Your Squarespace Website Front Page: A Complete Guide
Why Add Custom Social Media Buttons?
Squarespace is an excellent platform, but it lacks flexibility when it comes to custom share buttons. Adding your own allows you to:
• Improve branding consistency.
• Control styling to match your website’s aesthetic.
• Drive more engagement by making it easier for visitors to share your content.
Step-by-Step Tutorial to Add Social Media Share Buttons
1. Prepare Your Website
Before diving into the code, decide where you’d like the share buttons to appear:
• On individual blog posts.
• On product pages.
• On your homepage or specific landing pages.
Make sure you’ve customized your page layout to include space for the buttons.
2. Add the HTML Code
This HTML code dynamically grabs the current page URL and creates share buttons for Facebook, Twitter, Pinterest, LinkedIn, Tumblr, and Instagram.
1. Go to the Page Editor:
• In Squarespace, navigate to the page where you want the buttons. For my example, I have put one on our main page, called The Castle Gates, right below the PROMO CODE.
2. Insert a Code Block:
Adding a Code Block in Squarespace allows you to insert custom HTML, CSS, or JavaScript into your website. This is particularly useful for advanced customization, like adding the custom social media share buttons we just created.
Step 1: Log In to Squarespace
• Go to Squarespace and log in to your account.
• Select the website you want to edit from your dashboard.
Step 2: Navigate to the Page or Section
1. Find the Page You Want to Edit:
• In the left-hand menu, go to Pages.
• Select the page where you want to add the code.
2. Switch to Edit Mode:
• Click the Edit button in the top-right corner to begin editing the page.
Step 3: Add a Code Block
1. Choose the Location:
• Hover over the section where you want to insert the code until you see a gray “+” button or an Insert Point.
2. Add a Block:
• Click the “+” button to open the block menu.
• Scroll or search for the Code option (it has a “</>” icon) and click it.
3. Insert Your Code:
• A blank Code Block will appear. Paste your custom HTML, JavaScript, or CSS into the editor inside the block.
4. Display Settings (Optional):
• If your code involves CSS or JavaScript, uncheck the Display Source option so visitors won’t see the raw code.
• For most use cases, you can leave this box unchecked.
Step 4: Style and Position the Block
• Use the drag-and-drop feature to reposition the Code Block on your page.
• Adjust the width or alignment of the block to fit your page’s layout.
Step 5: Save Your Changes
• Once you’ve added and positioned your Code Block, click Save in the top-right corner to publish your changes.
BACK TO: Add a Code Block to the desired section and paste this code:
<div class="social-share-buttons">
<a href="#" class="share-button facebook" onclick="shareOnFacebook()">Facebook</a>
<a href="#" class="share-button twitter" onclick="shareOnTwitter()">Twitter</a>
<a href="#" class="share-button pinterest" onclick="shareOnPinterest()">Pinterest</a>
<a href="#" class="share-button linkedin" onclick="shareOnLinkedIn()">LinkedIn</a>
<a href="#" class="share-button tumblr" onclick="shareOnTumblr()">Tumblr</a>
<a href="https://www.instagram.com/" target="_blank" class="share-button instagram">Instagram</a>
</div>
<script>
const currentURL = encodeURIComponent(window.location.href);
function shareOnFacebook() {
window.open(`https://www.facebook.com/sharer/sharer.php?u=${currentURL}`, '_blank');
}
function shareOnTwitter() {
window.open(`https://twitter.com/intent/tweet?url=${currentURL}`, '_blank');
}
function shareOnPinterest() {
const imageURL = encodeURIComponent("YOUR_IMAGE_URL"); // Replace with your image URL
window.open(`https://pinterest.com/pin/create/button/?url=${currentURL}&media=${imageURL}`, '_blank');
}
function shareOnLinkedIn() {
window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${currentURL}`, '_blank');
}
function shareOnTumblr() {
window.open(`https://www.tumblr.com/widgets/share/tool?canonicalUrl=${currentURL}`, '_blank');
}
</script>
Note: Replace YOUR_IMAGE_URL with the URL of an image for Pinterest. ( I still haven’t done that….. :( )
3. Add the CSS Code
Now, style your buttons to make them look professional and consistent.
1. Go to Design > Custom CSS:
• Navigate to your Squarespace dashboard and paste this CSS:
.social-share-buttons {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 20px;
}
.share-button {
display: inline-block;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-size: 16px;
font-weight: bold;
color: white;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.share-button.facebook {
background-color: #3b5998;
}
.share-button.facebook:hover {
background-color: #2d4373;
transform: scale(1.1);
}
.share-button.twitter {
background-color: #1da1f2;
}
.share-button.twitter:hover {
background-color: #0d8de3;
transform: scale(1.1);
}
.share-button.pinterest {
background-color: #bd081c;
}
.share-button.pinterest:hover {
background-color: #8c0615;
transform: scale(1.1);
}
.share-button.linkedin {
background-color: #0077b5;
}
.share-button.linkedin:hover {
background-color: #005582;
transform: scale(1.1);
}
.share-button.tumblr {
background-color: #35465c;
}
.share-button.tumblr:hover {
background-color: #2c3b4c;
transform: scale(1.1);
}
.share-button.instagram {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.share-button.instagram:hover {
filter: brightness(1.2);
transform: scale(1.1);
}
OR THE MOBILE FRIENDLY VERSION:
/* Base Styling for Social Media Buttons */
.social-share-buttons {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 20px;
flex-wrap: wrap; /* Allow wrapping for smaller screens */
}
.share-button {
display: inline-block;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-size: 16px;
font-weight: bold;
color: white;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.share-button.facebook {
background-color: #3b5998;
}
.share-button.facebook:hover {
background-color: #2d4373;
transform: scale(1.1);
}
.share-button.twitter {
background-color: #1da1f2;
}
.share-button.twitter:hover {
background-color: #0d8de3;
transform: scale(1.1);
}
.share-button.pinterest {
background-color: #bd081c;
}
.share-button.pinterest:hover {
background-color: #8c0615;
transform: scale(1.1);
}
.share-button.linkedin {
background-color: #0077b5;
}
.share-button.linkedin:hover {
background-color: #005582;
transform: scale(1.1);
}
.share-button.tumblr {
background-color: #35465c;
}
.share-button.tumblr:hover {
background-color: #2c3b4c;
transform: scale(1.1);
}
.share-button.instagram {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.share-button.instagram:hover {
filter: brightness(1.2);
transform: scale(1.1);
}
/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
.social-share-buttons {
gap: 10px; /* Reduce spacing */
}
.share-button {
font-size: 14px; /* Smaller text size */
padding: 8px 15px; /* Compact padding */
}
}
@media (max-width: 480px) {
.social-share-buttons {
flex-direction: column; /* Stack buttons vertically */
align-items: center;
}
.share-button {
width: 100%; /* Stretch to full width */
text-align: center;
font-size: 12px; /* Smaller font size */
}
}
Final Result
Your beautifully styled social media share buttons will look like this in the picture.
Bonus Tips
• Placement: Add the buttons to blog posts, product pages, or anywhere you want visitors to share your content.
• Analytics: Use tools like Google Analytics to track which social platforms drive the most traffic to your site.
Why This Matters
By adding custom share buttons, you make it easy for visitors to amplify your content. More shares = more traffic = more sales. 🎉
If you found this guide helpful, feel free to share it on your favorite social media platform (because now you know how 😉). Happy designing! 🚀
P.S: Know When to Use Code Injection:
If you need your code to apply site-wide (e.g., custom CSS or JavaScript), use Code Injection under Settings > Advanced > Code Injection instead of a Code Block. I will make another tutorial about that soon.