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

1. Log on to your Squarespace website and go to the main navigation panel on the left-hand side of your screen.

2. Click on ‘Settings’, then 

3. Click on ‘Social links’ 

4. Start adding your social media by typing in the address for the social media account you want to add

   1. (e.g. https://instagram.com/youraccount, https://facebook.com/youraccount, etc.)

   2. For email, type in the email address

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

1. Go to any page of your website

2. Click Edit and scroll down to the footer area

3. Click ‘Edit Footer’ when it appears

4. Click ‘Add Block’

5. Select ‘Social Links’

6. If you are using Fluid Engine, place the block where you’d like it in your footer

Format the social links/icons block

1. Click the edit pencil for the block

2. Select which icons you want to show

3. Drag and drop them to change the order if you like

4.  Click on the ‘Design’ tab to style your icons

   1. Choose your border style.

   2. Adjust the size of the icons

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

1. Select ‘Edit’ for the page, then

2. Click ‘Edit Site Header’ 

3. Click on ‘Elements’ 

4. Toggle on ‘Social Links’

5. Format the shape and size of the icons as you desire

   1. The color of the icons is determined by the colors set for your header.

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

1. Go to the page and section where you want to add the icon(s)

2. Add a social links block.

3. 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!

You may also find these articles helpful: