Simple Way to Add Floating Social Media Icons on Squarespace Website

Social media plays a pivotal role in shaping and promoting your business or personal identity. The addition of dynamic social icons, persistently visible on your website, presents a seamless avenue for enticing visitors to engage with your various platforms, ensuring they remain abreast of your latest content. Beyond facilitating easy connectivity, these icons lend a polished and unified aesthetic to your site. 

The recent update to Squarespace's Fluid Engine renders the previously employed codes on 7.1 obsolete, necessitating adjustments for continued efficacy.

Step 1: Add a Social Link Block To Footer Section

Integrate a social links block into the footer of your website. Afterwards, access the design tab within the block and align the icons to the left. Opt for either the knockout or solid style to elevate the visual presentation. 

By implementing this feature, not only do you enrich your site's connectivity, but you also imbue it with a touch of customization, ensuring a harmonious blend of digital interaction and aesthetic appeal.

Step 2:Inject the CSS Code 

Code:

#page {z-index:0;}
footer {
  overflow: unset;
  z-index: 10;
}
footer .sqs-svg-icon--wrapper {
  display: block !important;
}
footer .socialaccountlinks-v2-block {
  pointer-events: none; /*this ensures the icons don't overlap elements within the section*/
  position: fixed !important;
  top: 50% !important; /* Change this number to adjust the distance of the icons from the top */
  left: 10px!important;
  z-index: 2000000;

}
footer .socialaccountlinks-v2-block .sqs-svg-icon--list {
  pointer-events: none;
  display: flex;
  flex-direction: column;
}
footer .socialaccountlinks-v2-block a {
  margin: 0 0 25px !important; /*Change this number to adjust the spacing of the social icons*/
  display: inline-block;
  pointer-events: auto;
}

Best Practices for Implementing Floating Social Media Icons

To maximize engagement and ensure an optimal user experience, follow these best practices:

✅ Position Wisely – Place icons on the left or right side for better visibility.
✅ Optimize for Mobile – Ensure icons scale properly on smaller screens.
✅ Use Brand Colors – Align icon colors with your branding for consistency.
✅ Keep It Simple – Avoid cluttering the UI with too many social buttons.

Common Issues & Troubleshooting

🔸 Icons Not Showing?

• Ensure CSS and HTML are correctly placed in the Code Injection section.

• Clear your browser cache and refresh.

🔸 Buttons Overlapping Other Elements?

• Adjust bottom or right values in the CSS.

🔸 Icons Not Responsive on Mobile?

• Add @media queries in the CSS to resize icons for smaller screens.

---

FAQs

---

How do I add social media icons to my Squarespace website?

Use Settings → Social Links or custom code to integrate social media icons.

Can I add floating social media buttons without coding?

Yes, third-party plugins like Elfsight or ShareThis allow no-code integration.

Are there free plugins for adding social icons to Squarespace?

Yes, ShareThis and AddThis provide free social media button plugins.

How do I make social media icons responsive on Squarespace?

Use CSS media queries to adjust icon size and position for mobile screens.

Can I change the size and color of floating social icons?

Yes, by modifying the CSS properties for color, size, and shape.

This guide provides a complete solution for adding floating social media icons to Squarespace, ensuring better engagement, shareability, and branding. Choose the method that suits your needs and enhance your website today! 🚀