A Beginner’s Guide to Squarespace Social Links
Use Squarespace social links to connect your website with your fans and followers.
Make it easy for visitors to find you on all your online hangouts with social link blocks. These handy blocks display cool icons for popular platforms like Facebook, Instagram, and even the Platform Formerly Known as Twitter.
Social link blocks are super versatile – you can add them to almost any page of your site. They're especially popular in footers, so your social info is always a click away. Plus, if you have a version 7.1 site, you can even show them off in your site header!
By adding social links, you're making it easier than ever for people to connect with you and stay in the loop.
How to add a social links to Squarespace
Social links can be content blocks inside page or footer sections and they can also be displayed in the header of your website.
To add social media links to your Squarespace header, click edit on the top left hand side of your website preview from any active page in your pages menu that has the header enabled.
Hover over your website header until you see edit site header.
Click on edit site header and then click on the add elements button that appears on the left hand side of the screen.
Toggle on your social links. When they appear in your website header, you can click on them, and then the pencil icon to open the social link editor. Follow steps 6 & 7 of the add social links information on this page, and check out the design option examples below.
How to add a social link content block to a page section or footer section
Select edit on the top left-hand side of your website preview.
Click the add block option on a fluid engine page section on the page, or click on edit footer to add one to a footer page section. If you are using a classic editor section, click the blue plus sign to add content block.*
Select the social option form the list of content blocks.
Double click on the social block, or click once and select the pencil icon to open the content block edit options.
Select the ADD SOCIAL LINKS option on the bottom of the social link list to add your own. Don’t forget to delete the Squarespace links by clicking on the link and then clicking on DELETE SOCIAL LINK.
To rearrange the link order, click edit on the right hand side of the content menu. You can now drag and drop the links into the order you want to see, or easily remove links you don’t want to have in the block
On the design tab, you’ll find settings for border, fill, alignment, and size. You’ll find more design details and examples below.
*Classic editor is used by blog posts, additional product details, individual events, and sites built on version 7.0 Learn more inside Squarespace Made Simple*
Squarespace social link design settings
large 90 degree corner knockout
small circle outline
Border: your border selection also controls the shape and fill of the social links. You can choose no border (only icons) or select 90 degree corners, rounded corners, or completely round.
The selections for borders are knockout (solid color background, transparent icon) , outline (border only) and solid (solid color)
Alignment options move the icons to be aligned to the left, center, or right of the content block. In Fluid Engine sections, you’ll be able to edit the vertical alignment too! If you click on the content block once, the vertical option will be displayed next to the edit icon
Size of the social icon links is limited to 5 presets: extra small, small, medium, large, and extra large
Colors are set in the color theme using your site style menu
extra large rounded solid
How to customize the Squarespace social links with CSS
If you are finding the design options a little limiting, custom CSS can help! These tutorials will teach you how to use custom code to modify the style of your social links.
Where you can learn more about adding social links to your Squarespace website
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.
Squarespace Support Article
Learn more from the official Squarespace support blog
Squarespace
made simple
Get all the info you need to confidently
launch your Squarespace website ASAP.
This tutorial will show you how to change the color of your social media icons inthe header of your Squarespace website.