How to Add Social Media Icons to Squarespace

• Squarespace Plan: Business plan or higher (required for Code Blocks)
• Access Level: Admin access to your Squarespace site
• Generated Code: NiftyButtons HTML/CSS code from our generator

Note: Code Blocks are not available on Personal plans. You'll need to upgrade to Business or higher.

1. Generate Your Social Media Icons

1. Go to the NiftyButtons Generator
2. Select your social media platforms
3. Enter your profile URLs
4. Choose size, colors, and style
5. Click "Generate Buttons"
6. Copy the generated HTML/CSS code

2. Access Your Squarespace Editor

1. Log in to your Squarespace account
2. Go to your website dashboard
3. Click "Edit" to open the page editor
4. Navigate to the page where you want to add icons

3. Add a Code Block

1. Click the "+" button where you want to add icons
2. Search for "Code" in the block menu
3. Select the "Code" block
4. The code editor will open

4. Paste Your NiftyButtons Code

1. Paste your copied NiftyButtons code into the editor
2. Make sure "Display Source" is turned OFF
3. Click "Apply" to save the code
4. Your social media icons should now appear!

5. Position and Save

1. Drag the code block to your desired location
2. Adjust spacing and alignment as needed
3. Click "Save" in the top left
4. View your published site to see the icons live

Footer Area (Most Common):

• Go to Design → Website Tools → Footer
• Add a Code Block in the footer area
• Icons appear on all pages automatically

Header Area:

• Edit your header in Design → Site Styles
• Add Code Block in available header space

Contact Page:

• Perfect for encouraging social connections
• Place below contact form or information

About Page:

• Great for personal branding
• Add after your bio or story section

Homepage:

• Hero section for immediate visibility
• Bottom of page before footer

Center Your Icons:

Add Spacing:

Match Template Colors:

• Use your site's accent colors in the generator
• Check how icons look with your template's background
• Consider your template's overall design style

Mobile Optimization:

• Choose medium or large sizes for better mobile visibility
• Test on mobile preview in Squarespace editor
• Ensure icons stack properly on smaller screens

Icons Don't Appear:

• Ensure "Display Source" is turned OFF
• Check that you're on a Business plan or higher
• Verify the code was pasted completely
• Try refreshing the page or clearing browser cache

Icons Look Wrong:

• Check for conflicting template CSS
• Try different icon sizes in the generator
• Test different color options

Links Don't Work:

• Double-check your social media URLs
• Ensure URLs include https://
• Test links in a private browser window

Code Block Not Available:

Code Blocks require a Business plan or higher. Consider upgrading or using Squarespace's built-in social media features as an alternative.

If you're on a Personal plan and can't use Code Blocks, consider these alternatives:

Built-in Social Links:

• Go to Design → Site Styles → Social Links
• Add your social media URLs
• Use Squarespace's default social icons

Upgrade Benefits:

• Custom social icons with NiftyButtons
• Better design control and branding
• Additional business features
• No Squarespace branding

• Use the same Code Block across multiple pages by copying and pasting
• Preview your site on mobile before publishing
• Keep your generated code saved for future updates
• Consider your template's color scheme when choosing icon colors
• Test icon visibility against different section backgrounds
• Update all instances if you change your social media URLs