Skip to main content

Adding social icons

John

Add social links to display social icons to your visitors, helping them find you wherever you maintain a presence on the web. Icons include logos for many common platforms, like Facebook, Instagram, and Twitter. You can also add link or mail icons that lead to any website or email address.

In this guide, you’ll learn how to add, style, and manage your social icons. You can add icons to:

  • Built-in social icon areas (all version 7.1 sites, and some version 7.0 templates)
  • Social Links Blocks
  • Cover Pages (version 7.0)

See a list of supported platform logos.

Tip: To authorize an account for sharing content, like pushing to Facebook or displaying your Instagram posts, follow the steps in Connecting social accounts instead.

Here’s an example of social icons:

built-in social icons

Add social icon links

Add links to the Social Links panel to display social icons across your site.

  • If we recognize the platform based on the URL, we’ll display an icon with the platform’s logo.
  • If the link is from a page or service we don’t recognize, it’ll be represented by a link icon.
  • If the link is an email address, it’ll be represented by a mail icon.

To add a link:

  1. In the Home Menu, click Settings.
  2. Click Social Links.
  3. Scroll down to the Add a social link or email field.
  4. Copy and paste a URL for a profile page or an email address into the field. For example, for Instagram, copy and paste the full URL for your Instagram profile, like http://instagram.com/yourhandle.
  5. Press Enter on your keyboard.
  6. Repeat this step for each icon you want to add.
  7. To change the icon order, drag and drop the accounts in the panel. In most templates, the social icons appear in the same order from left to right. In Flatiron, they appear from right to left.

Manage icons

All links in your Social Links panel appear as built-in social icons and in the Social Links Block. You can open the Social Links panel to add or edit your icons from either area. Any changes you make to either area are reflected across your site.

Built-in social icons

Where built-in social icons appear depends on your site's version:

You can style these social icons in the Design panel. To edit your icons, hover over them and click Edit. To learn more, visit Built-in social icons.

Social Links Blocks

Social Links Blocks are available anywhere that you can add a block. You can change the look of this block in its settings.

To edit your icons from here, open any page with a Social Links Block and click the block, then click Edit or the pencil icon. To learn more, visit Social Links Blocks.

Cover Pages (version 7.0)

All Cover Pages can display social icons. The placement varies by layout.

To edit the icons, open the Cover Page, hover over the social icons, and click Edit Social Icons. To learn more, visit Cover Pages.

Set icon visibility

After adding a link, decide whether you want the icon to be visible or hidden:

  1. Open the Social Links panel.
  2. Click the account you’d like to edit.
  3. Check or un-check Show Social Icon.
  4. Click Save.

You’ll now see a Hidden or Visible label under that service’s name in the panel. This applies to all icons site-wide.

Remove an icon

To remove an icon site-wide:

  1. In the Home Menu, click Settings.
  2. Click Social Links.
  3. Click the icon you’d like to remove.
  4. Click Remove, then click Confirm.
Tip: To only remove icons from a certain area, you can hide built-in social icons or delete the Social Links Block.

Available platform logos

These logos automatically display when you add a URL from that platform in Social Links. All other links show as generic link icons:

  • Apple Podcasts (To learn more about integrating with Apple Podcasts, visit Podcasting with Squarespace overview.)
  • Bandsintown
  • Behance
  • CodePen
  • Dribbble
  • Facebook
  • Flickr
  • Foursquare
  • GitHub (If you're using the Squarespace Developer Platform and are looking for more help with Git, visit our Developer Documentation.)
  • Goodreads
  • Google Play
  • Houzz
  • IMDb
  • Instagram
  • iTunes (For help finding a link to a podcast or other page on iTunes visit iTunes Link Maker.)
  • LinkedIn
  • Medium
  • Meetup
  • Pinterest
  • Reddit
  • SmugMug
  • Snapchat
  • SoundCloud
  • Spotify
  • Stitcher
  • The Dots
  • Tidal
  • TripAdvisor
  • Tumblr
  • Twitch
  • Twitter
  • Vevo
  • Vimeo
  • VSCO
  • Yelp
  • YouTube

My social link doesn’t have a “Show Social Icon” setting

If you authorized social accounts in your Connected Accounts panel before March 21, 2019, we automatically duplicated them in your Social Links panel. However, you’ll still control the visibility for that icon in the Connected Accounts panel.

To control the icon’s visibility in Social Links instead, remove it from the Social Links panel, then add it again using the profile URL link.

Comments

0 comments

Article is closed for comments.

Powered by Zendesk