How to Link Social Media and Add Icons in Your Squarespace Website
Squarespace makes it easy to connect your social media accounts and add links or icons to your website.
In this article, I’ll walk you through step-by-step how to do this.
Prefer to watch and learn? Then, please feel free to watch the companion video on YouTube.
Otherwise, keep reading for the written instructions.
A couple of important notes:
This tutorial is in Squarespace 7.1 with Fluid Engine enabled. The steps are the same with Classic Editor, but you may notice slight differences, such as where to click to ‘add a block’.
I’ve included some screenshots below for major steps along the way, but not for every step. You can refer to the video to see every step in action if needed!
How To Connect your social media
Log on to your Squarespace website and go to the main navigation panel on the left-hand side of your screen.
Click on ‘Settings’, then
Click on ‘Social links’
Start adding your social media by typing in the address for the social media account you want to add
(e.g. https://instagram.com/youraccount, https://facebook.com/youraccount, etc.)
For email, type in the email address
Add as many as you like
As you add each account you’ll notice an icon appears next to each one.
You can also change the order by clicking to the left of each entry and dragging and dropping them up or down.
This will come into play when you add them onto a page on your website as it dictates which icon will appear first, but keep in mind that you can change that later and you don’t have to come all the way back here to do that!
You can also click on them in this window and it will open a pop-up with all the details and give you some more options such as toggling on/off showing the icon.
Again, you always have the ability to change this when you add the social links to a page so don’t worry too much about doing all that here.
The most important thing to have here is the correct account address entered.
Adding social links/icons to your footer
Add the Social Links Block
Go to any page of your website
Click Edit and scroll down to the footer area
Click ‘Edit Footer’ when it appears
Click ‘Add Block’
Select ‘Social Links’
If you are using Fluid Engine, place the block where you’d like it in your footer
Format the social links/icons block
Click the edit pencil for the block
Select which icons you want to show
Drag and drop them to change the order if you like
Click on the ‘Design’ tab to style your icons
Choose your border style.
Adjust the size of the icons
Once you have them formatted to your liking you can close out of the editing box and click ‘Save’ on your page!
Adding social links/icons to the header section
The process for adding the links/icons to your header is nearly identical to adding them to the footer. With only a few key differences.
Select ‘Edit’ for the page, then
Click ‘Edit Site Header’
Click on ‘Elements’
Toggle on ‘Social Links’
Format the shape and size of the icons as you desire
The color of the icons is determined by the colors set for your header.
The icons will appear in line with your navigation items.
Note: Where the icons show up in your header section (to the left or right of the page) is determined by the header/logo layout style you’ve chosen for your site. So you can try out different layout styles for your header and logo, but note that you have less control over the placement of the icons in the header than you do anywhere else.
Where else can you add social icons?
You can add a social link/icon almost anywhere you want to on your website. The process is exactly like adding them to the footer.
Go to the page and section where you want to add the icon(s)
Add a social links block.
Format as desired.
Wrap-Up
I hope you found this tutorial helpful and that you can now go forward with adding your social media links to your website with confidence and ease!
