How Do I Show Social Icons on Squarespace?

Integrating social media icons into your Squarespace website can help increase your social media visibility and offer an easy way for visitors to connect with your brand on various platforms. Here's a step-by-step guide to adding social media icons to your Squarespace site:

Step 1: Add Your Social Accounts

1. Access Website Settings:
2. Log in to your Squarespace account and choose the website you want to edit.

3. Navigate to the left-hand sidebar and click on the Settings gear icon.

4. Manage Account Connections:

5. In the Settings menu, select Social Links or Connected Accounts (the exact wording can vary depending on your template).

6. Click on Add an Account. A list of supported social platforms will appear. This can include Facebook, Instagram, Twitter, LinkedIn, Pinterest, and others.

7. Authorize and Connect:

8. Choose the social media platform you want to add and follow the on-screen prompts to authorize and connect your account.
9. Repeat this process for all social media platforms you wish to include.

Step 2: Display Social Icons

1. Access Site Design:
2. Once your social accounts are connected, go back to the main dashboard.

3. Click on Design from the left-hand sidebar.

4. Header Configuration:

5. In the Design menu, you may have options like Site Styles or Header. Depending on your template, look for the area where you can customize your website’s header or footer.

6. If you’re adding social icons to the header, click on Header, or if adding to the footer, look for Footer.

7. Toggle Social Icons:

8. In the configurations, you should find an option like Social Links or similar. Enable this option to display the social media icons.
9. Adjust the style, size, and alignment of the social icons to match your website’s design.

Step 3: Customization (Optional)

1. Style the Icons:
2. If you have a specific design in mind for these icons, you can further style them through custom CSS. This can be accessed by going to Design > Custom CSS.

3. Example of CSS for styling social icons: css .sqs-svg-icon--social { fill: #000; /* Changes the color of the social icons */ width: 30px; /* Adjusts the size */ height: 30px; margin: 0 10px; /* Adds spacing between icons */ }

4. Adding Social Icons in Blocks:

5. You can also add social icons in any content block by using Social Links block. Go to the page you want to edit, click on Edit, and add a Block by clicking on the + icon.
6. Choose Social Links from the list and configure your social media links.

Considerations

1. Visibility:

2. Ensure the icons are placed in a visible yet non-intrusive area of your site. The header and footer are common spots since they appear on every page.

3. Consistency:

4. Maintain a consistent design for the icons to match your site's overall aesthetic. Consider using custom icons if the default ones don't fit well with your theme.

5. Mobile Responsiveness:

6. Always check how your social media icons appear on mobile devices. Squarespace is generally responsive, but slight adjustments may be necessary.

7. Regular Updates:

8. Regularly check and update connected accounts, especially if you change your social media handles or rebrand any of your social profiles.

Limitations

1. Template Differences:

2. The ability to add and customize social icons can vary depending on the Squarespace template you are using. Some templates might have limited options compared to others.

3. Custom Icons:

4. If you want to use custom social icons, it might require a bit more technical know-how, particularly using the Code Block or Custom CSS.

By following these steps, you should be able to effectively display and manage social media icons on your Squarespace site. Regularly test the functionality of these icons to ensure they link correctly to your social profiles.