In this advanced tutorial, we’ll implement social sharing icons using conditional logic to ensure the buttons are placed only on blog postsor product pages, depending on the content you’re working with. This method gives you more flexibility and ensures the buttons only appear where necessary, INCLUDING MOBILE VERSION…. (duh…)

Use this codes in case there is something wrong with mobile versions of your website.

Step 1: JavaScript with Conditional Logic

This method adds social sharing buttons specifically to blog posts and product pages by checking the page type. The buttons will be placed below the title on blog posts and below the product price on product pages.

1. Access Code Injection

To begin, we need to add our custom JavaScript code:

1. Go to Settings > Advanced > Code Injection.

2. Paste the code below into the Footer section (not the Header!).

2. Add the JavaScript Code

<script>

document.addEventListener("DOMContentLoaded", function () {

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>

`;

const isBlogPage = document.body.classList.contains("collection-type-blog");

const isProductPage = document.body.classList.contains("collection-type-products");

let targetElements = [];

if (isBlogPage) {

targetElements = document.querySelectorAll(".BlogItem-title");

} else if (isProductPage) {

targetElements = document.querySelectorAll(".pdp-details-price");

}

targetElements.forEach(el => {

el.insertAdjacentHTML("afterend", shareButtonsHTML);

});

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");

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: Apply the Same Styling

We’ll use the same CSS for the buttons as before, ensuring that the buttons remain consistent across both blog and product pages. Please not that you should always delete the old CSS and just paste a new one or if you already like the style of your buttons and they look good on both desktop and mobile, you should not change the CSS. This CSS works on both Desktop and Mobile

CSS Code:

/* Social Buttons Container */

.share-buttons {

display: flex;

gap: 10px;

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;

}

}

Conclusion

This tutorial covers how to implement social sharing buttons on Squarespace blog posts and product pages without relying on code blocks. You now have the flexibility to place social sharing buttons exactly where you want them, either below the title, after the content, or any other specific location.