Introduction

After weeks of exploring and experimenting, we’ve arrived at the definitive solution for integrating stylish, responsive social sharing buttons into your Squarespace site. This guide not only consolidates everything we’ve learned but also provides the final footer script to implement these features seamlessly across blog posts and product pages.

We’ve also included the CSS styling for the design you’re currently using—simple, elegant, and versatile for any occasion.

What We’ve Learned

1. Dynamic Placement: Buttons can now be positioned below blog titles or product prices automatically.

2. Design Variations: From festive to minimalist, we’ve explored a range of button styles tailored to your site.

3. Complete Integration: Using a single footer script, you can manage all social sharing functionality site-wide.

4. Mobile Optimization: Ensuring a flawless experience across devices.

Final Footer Script

To achieve full functionality, place the following script in your Footer section (Settings > Advanced > Code Injection). This script handles the injection of sharing buttons into blog posts and product pages.

<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>

    `;

    // 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 product 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');

    };

    // Blog Posts - Add Share Buttons

    if (document.body.classList.contains("collection-type-blog")) {

      const blogPostTitles = document.querySelectorAll(".BlogItem-title");

      blogPostTitles.forEach(function (title) {

        if (title.closest(".BlogItem")) {

          title.insertAdjacentHTML("afterend", shareButtonsHTML); // Below title

        }

      });

    }

    // Product Pages - Add Share Buttons Below Price

    if (document.body.classList.contains("collection-type-products")) {

      const productPrice = document.querySelector(".pdp-details-price");

      if (productPrice && !document.querySelector(".product-share-buttons")) {

        productPrice.insertAdjacentHTML("afterend", shareButtonsHTML);

      }

    }

  });

</script>

CSS for Your Buttons

Here’s the CSS for the elegant and minimalist design currently in use. Add this to Settings > Advanced > Custom CSS.

/* Social Buttons Container */

.product-share-buttons {

  display: flex;

  gap: 10px;

  margin-top: 10px;

  flex-wrap: wrap;

  justify-content: flex-start;

}

/* Individual Share Icons */

.share-icon {

  display: inline-flex;

  justify-content: center;

  align-items: center;

  width: 40px; /* Icon Size */

  height: 40px;

  border-radius: 8px; /* Rounded edges */

  font-size: 20px;

  color: inherit; /* Matches the logo color */

  text-decoration: none;

  border: 1px solid #ddd;

  background-color: #f9f9f9; /* Subtle light background */

  transition: all 0.3s ease;

}

/* Hover Effects */

.share-icon:hover {

  transform: scale(1.1);

  background-color: #eaeaea; /* Slightly darker background on hover */

}

/* Social Media Colors */

.share-icon.facebook i { color: #3b5998; } /* Facebook blue */

.share-icon.twitter i { color: #1da1f2; } /* Twitter blue */

.share-icon.pinterest i { color: #bd081c; } /* Pinterest red */

.share-icon.linkedin i { color: #0077b5; } /* LinkedIn blue */

.share-icon.tumblr i { color: #35465c; } /* Tumblr navy */

.share-icon.instagram i {

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

  -webkit-background-clip: text; /* Makes the text color gradient */

  -webkit-text-fill-color: transparent; /* Ensures gradient is visible */

}

/* Mobile Styling (Max Width: 574px) */

@media (max-width: 574px) {

  .product-share-buttons {

    justify-content: center; /* Center buttons on smaller screens */

    margin-top: 15px;

  }

  .share-icon {

    width: 35px; /* Slightly smaller icons for mobile */

    height: 35px;

    font-size: 16px;

  }

}

Where to Place Everything

1. Footer Script

Copy and paste the JavaScript code into the Footer section of your site.

2. Custom CSS

Add the CSS for your button style to the Custom CSS field under Advanced Settings.

3. Verify

Refresh your site and ensure the buttons are visible on both blog posts and product pages.

Conclusion

This final setup consolidates everything you need for seamless social sharing on Squarespace. By integrating this footer script and CSS, your site will stand out with clean, functional, and visually appealing sharing buttons tailored for both desktop and mobile users.

Enjoy your perfectly styled social buttons! 🌟 Stay tuned for our magical Christmas designs for Social Sharing Buttons on Squarespace—coming soon to bring festive cheer to your site! 🎄✨

While you wait, you can browse our amazing products!