Simple Way to Add Floating Social Media Icons on Squarespace Website
Social media is core to forming and promoting your business or personality. Introducing dynamic social icons that remain fixed on your website provides a frictionless path for inviting visitors to follow you on your platforms and stay current with your updates. These icons not only make it convenient for users to get in touch, but they also add a sleek and coherent look to your website.
New terms of service Since October 2023 Here, the popular website builder Squarespace has introduced an upgrade but at the same time the Fluid Engine to Squarespace 7.1 brings changes that mean the codes once used on 7.1(PHP) are now considered outdated.
What Are Social Media Icons? And Why Do They Matter?
Social media icons are small graphics that you can click on that link to the profile or page of social networks such as Facebook, Twitter, Instagram, LinkedIn, etc. Often found at the footer or in the sidebar of websites and blogs, these icons are links to a brand’s social media profiles, allowing users to easily connect and interact on multiple platforms. Social media icons are essential to improve user experience and grow brand visibility. These icons are a shortcut to reach your social platforms, thereby enhancing traffic, improving social sharing, and growing your online authority. Having them on your site will not only help in building trust, but it will also encourage interaction — resulting in more followers and engagement.
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
So, to get the best possible user experience and the highest engagement, 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?
Validate that CSS and HTML are correctly tailored to the Code Injection section.
Delete the browser cache and reload.
Are your buttons on top of other elements?
Update bottom right values in the CSS
Icons are Not Responsive in Mobile?
Use @media queries in the CSS to zoom out icons for small screens
FAQs
1. How do I create social media icons in squarespace?
Add social media icons with Settings → Social Links or custom code.
2. Is it possible to have floating social media buttons without any coding?
Yes, you can easily integrate it through third-party plugins, like Elfsight or ShareThis, with no code.
3. Are there free plugins for adding social icons to Squarespace?
Yes, ShareThis and AddThis provide free social media button plugins.
4. How do I make social media icons responsive?
Apply CSS media queries to resize and reposition the icons for mobile screens
