How to Add Social Icons in Squarespace

This post may contain affiliate links. I may earn a commission at no extra cost to you if you make a purchase through them. Full disclosure here.

Adding social icons to your Squarespace website is an effective way to enhance your online presence and connect with your audience across various platforms. Social icons allow visitors to easily find and follow your social media profiles, increasing engagement and brand visibility.

This guide will walk you through the steps to add social icons to your Squarespace site, including different methods for both Squarespace 7.0 and 7.1.

Quick Fix

How to Add Social Icons in Squarespace:

1. Log into your Squarespace account and navigate to Settings > Social Links.
2. Add your social media URLs and press Enter after each.
3. Edit your footer or header and add a Social Links block.
4. Customize the design and placement of your social icons.

Why Add Social Icons to Your Website?

1. Increase Engagement: Social icons provide a direct link to your social media profiles, encouraging visitors to engage with your content on those platforms.

2. Enhance Brand Visibility: By promoting your social media presence, you can expand your reach and make it easier for users to connect with your brand.

3. Improve User Experience: Social icons simplify navigation, allowing users to find your social media pages quickly and easily.

4. Build Trust: Displaying social icons can enhance your credibility, showing that you are active on social media and engaged with your audience.

How to Add Social Icons in Squarespace

Method 1: Using the Social Links Settings

This method is available in both Squarespace 7.0 and 7.1 and involves adding social links directly through the settings.

Step 1: Log into Your Squarespace Account

1. Go to squarespace.com and sign in.

2. Select the website you want to edit from your dashboard.

Step 2: Navigate to Social Links

1. In the left sidebar, click on Settings.

2. Scroll down and select Social Links.

Step 3: Add Your Social Links

1. In the Social Links panel, you will see a field labeled Add a social link or email.

2. Copy and paste the URL of your social media profile (e.g., https://www.instagram.com/yourusername) into the field.

3. Press Enter on your keyboard to save the link.

4. Repeat this process for each social media platform you want to add.

Step 4: Reorder Your Icons

1. To change the order of your social icons, hover over a link until you see a faint 8-dot icon appear on the left side.

2. Click and drag the icons to rearrange them in your desired order.

Method 2: Adding Social Icons to the Footer or Header

Once you have added your social links, you can display them in various locations on your site, such as the footer or header.

Step 1: Edit the Footer

1. Navigate to the footer section of your site.

2. Click on Edit Footer.

3. Hover over the area where you want to add your social icons until you see the blue + sign.

4. Click the + sign to add a new block.

5. In the pop-up box, type in “Social,” then select Social Links to insert the social media block.

Step 2: Customize the Social Links Block

1. In the Social Links block settings, you will see the list of social icons you added earlier.

2. To add another link, click Add social link.

3. You can also edit existing links by clicking the right-aligned arrow next to each link.

4. To alter the design of your social icons, click the Design tab in the pop-up block. Here, you can change the shape, alignment, and size of your social icons.

Method 3: Adding Social Icons to the Header (Squarespace 7.1)

If you're using Squarespace 7.1, you can easily add social icons to your header.

Step 1: Edit Site Header

1. Click on Edit at the top of your page.

2. Select Edit Site Header.

Step 2: Enable Social Links

1. In the header settings, click on Elements.

2. Toggle on the Social Links option to display the social icons in your header.

Step 3: Customize Icon Placement

You can change the placement of the social icons within the header by adjusting the Header Layout settings in the same window.

Method 4: Custom Icons Using Font Awesome

If you want more customization options or specific icons that aren’t available in Squarespace, you can use Font Awesome to add social icons.

Step 1: Include Font Awesome

1. Go to the Font Awesome website and find the icons you want to use.

2. Copy the HTML code for the icons.

Step 2: Add Custom Code to Squarespace

1. Navigate to Settings > Advanced > Code Injection.

2. In the Header section, paste the Font Awesome code to include the library on your site.

Step 3: Create a Custom Block

1. Go to your page and click Edit.

2. Add a Code Block where you want the icons to appear.

3. Paste the Font Awesome icon code into the Code Block and link it to your social media profiles.

Best Practices for Using Social Icons

1. Keep It Simple: Limit the number of social icons to the platforms where you are most active. This prevents clutter and confusion.

2. Consistent Design: Ensure that the style of your social icons matches your website’s overall design and branding.

3. Test Links: Regularly check that all social links are functional and direct users to the correct profiles.

4. Positioning: Place social icons in prominent locations, such as the header, footer, or sidebar, to increase visibility.

5. Responsive Design: Ensure that your social icons are responsive and display correctly on mobile devices.

Conclusion

Adding social icons to your Squarespace website is a straightforward process that can significantly enhance your online presence and user engagement. By following the steps outlined in this guide, you can effectively integrate social media links into your site, allowing visitors to connect with you across various platforms. Whether you choose to use the built-in social links feature or opt for custom icons, a well-implemented social media strategy can help you build a stronger relationship with your audience.