How to Add Social Sharing Icons Below Blog Titles Using Simple JavaScript (Without Conditional Logic and Code Blocks)
In this tutorial, we’ll walk you through the process of adding social sharing icons directly under your blog titles in Squarespace.
This method utilizes JavaScript to inject social media buttons automatically, without any complicated conditional logic or external plugins. If you prefer a straightforward approach, this tutorial is perfect for you!
Step 1: Prepare the Code for Social Sharing Icons
First, let’s add the HTML for the social sharing icons and the JavaScript code that will inject them into the page below each blog post title.
<script>
document.addEventListener("DOMContentLoaded", function () {
// HTML for Social Share Buttons
const shareButtonsHTML = `
<div class="share-buttons">
<a href="#" class="share-icon facebook" onclick="shareOnFacebook()" aria-label="Share on Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="share-icon twitter" onclick="shareOnTwitter()" aria-label="Share on Twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="share-icon pinterest" onclick="shareOnPinterest()" aria-label="Share on Pinterest">
<i class="fab fa-pinterest-p"></i>
</a>
<a href="#" class="share-icon linkedin" onclick="shareOnLinkedIn()" aria-label="Share on LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="share-icon tumblr" onclick="shareOnTumblr()" aria-label="Share on Tumblr">
<i class="fab fa-tumblr"></i>
</a>
<a href="https://www.instagram.com/" target="_blank" class="share-icon instagram" aria-label="Visit Instagram">
<i class="fab fa-instagram"></i>
</a>
</div>
`;
// Add the social share buttons below each blog post title
const blogPostTitles = document.querySelectorAll(".BlogItem-title");
blogPostTitles.forEach(function (title) {
title.insertAdjacentHTML("afterend", shareButtonsHTML); // Below title
});
// 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 2: Style the Buttons with CSS
Now that we have the JavaScript ready, let’s add the CSS to style the social sharing buttons according to your site’s theme. These buttons will have light backgrounds with icons of each social media platform, designed to match the aesthetic of your website. Please note that the following CSS is what I use for my website, but if you want different styles, you can always check my other tutorials or create your own.
/* Social Buttons Container */
.share-buttons {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 15px;
flex-wrap: wrap;
}
/* Individual Buttons */
.share-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 8px;
background-color: #f9f9f9;
border: 1px solid #ddd;
font-size: 20px;
color: #555;
transition: all 0.3s ease;
}
.share-icon:hover {
transform: scale(1.1);
background-color: #eaeaea;
}
/* Platform-Specific Colors */
.share-icon.facebook i { color: #3b5998; }
.share-icon.twitter i { color: #1da1f2; }
.share-icon.pinterest i { color: #bd081c; }
.share-icon.linkedin i { color: #0077b5; }
.share-icon.tumblr i { color: #35465c; }
.share-icon.instagram i {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Mobile Adjustments */
@media (max-width: 575px) {
.share-icon {
width: 40px;
height: 40px;
font-size: 16px;
}
}
Step 3: Inject and Test
1. Log in to your Squarespace account.
2. Go to Settings > Advanced > Code Injection and paste the JavaScript code in the Footer section.
3. Navigate to Design > Custom CSS and paste the CSS code for styling.
4. Save the changes and refresh your page.
To address this, ensure your blog post titles and content are positioned properly in your layout, and adjust any margins or padding as needed to ensure proper spacing between elements. Please not that the buttons will always go to the end of the blog post with this method.
