Social Links Sidebar

What does this code do?

This code snippet will allow you to a secondary navigation to your website that contains your social links.

Note 1: To help your site stay mobile friendly, the sidebar will turn into a regular social block when on mobile.

Note 2: The background colour of the sidebar will be the body colour of your website.

Video Tutorial

Prepare Your Social Links

Go to Font Awesome and find the class names of the icons you want to use. For example, the Etsy icon is class =” fa fa-etsy”

Then make a list of where you would like the icons to take your visitors. For example, if they click on the Etsy icon, what is the link to your Etsy Shop?

Code Snippets

This code snippet uses Font Awesome for the arrow. To use Font Awesome, you will need to copy and paste your personal Font Awesome Kit Code into Settings > Advanced > Code Injection > Header. You only need this script once per site, so if you are already using Font Awesome Icons on this site, you can skip to the next code snippet.

To learn how to get your own Font Awesome Kit Code, click here. It will look something like the following.

<script src="https://kit.fontawesome.com/12345abcde.js" crossorigin="anonymous"></script>

Copy and paste the following into a Code Block in your footer. This is where your social links will be when viewed from a mobile device.

<div id = "social-sidebar">
  <div id="social-sidebar-content">
  <p>
    Our Socials
  </p>
  <div id="social-sidebar-line"></div>
  <ul>
    <li>
      <a target = "_blank" href="#">
        <i class="fab fa-facebook"></i>
      </a>
    </li>
     <li>
      <a target = "_blank" href="#">
        <i class="fab fa-instagram"></i>
      </a>
    </li>
    <li>
      <a target = "_blank" href="#">
        <i class="fab fa-twitter"></i>
      </a>
    </li>
     <li>
      <a target = "_blank" href="#">
        <i class="fab fa-youtube"></i>
      </a>
    </li>
     <li>
      <a target = "_blank" href="#">
        <i class="fab fa-pinterest"></i>
      </a>
    </li>
  </ul>
  </div>
</div>

Replace “Our Socials” with the words you would like to be displayed. Then replace all the hashtags in href= “#” with the links to your social profiles.

To delete a social icon out, delete from the <li> tag to the following </li> tag.

To add more social links, copy and paste the following before the </ul> tag.

     <li>
      <a target = "_blank" href="#">
        <i class="fab fa-pinterest"></i>
      </a>
    </li>

Squarespace 7.0

Copy and paste the following into Design > Custom CSS to put the sidebar on the left.

/* Social Link Side Bar */
#social-sidebar-line {
  background: #555; /* colour of the line */
}
#social-sidebar p {
  color: #555; /* Colour of the text */
}
#social-sidebar ul {
  color: #555; /* Colour of the icons */
}
#social-sidebar ul {
  list-style-type: none;
  padding: 0px;
}

@media only screen and (min-width: 640px) {
  .Content-outer {
    margin-left: 8vw; /* pushes content out from under sidebar */
  }
  #social-sidebar {
    position: fixed;
    text-align: center;
    width: 8vw; /* width of the sidebar */
    height: 100vh;
    z-index: 99999 !important;
    left: 0px; 
    bottom: 0px;
    display: table;
  }
  #social-sidebar-content {
    display: table-cell;
    vertical-align: middle;
  }

  #social-sidebar-line {
    width: 2px;
    min-height: 40px;
    margin: 10px auto;
    border-radius: 10px;
  }

  #social-sidebar p {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-right: auto;
    margin-left: auto;
  }

  #social-sidebar ul {
    margin: 0px;
  }
}

@media only screen and (max-width: 640px) {
  #social-sidebar {
    text-align: center;
  }
  #social-sidebar ul {
    text-align: center;
    margin: 0 auto;
  }
  #social-sidebar li {
    display: inline;
    padding: 5px;
  }
}

Copy and paste the following into Design > Custom CSS to put the sidebar on the right.

/* Social Link Side Bar */
#social-sidebar-line {
  background: #555; /* colour of the line */
}
#social-sidebar p {
  color: #555; /* Colour of the text */
}
#social-sidebar ul {
  color: #555; /* Colour of the icons */
}
#social-sidebar ul {
  list-style-type: none;
  padding: 0px;
}

@media only screen and (min-width: 640px) {
  .Content-outer {
    margin-right: 8vw; /* pushes content out from under sidebar */
  }
  #social-sidebar {
    position: fixed;
    text-align: center;
    width: 8vw; /* width of the sidebar */
    height: 100vh;
    z-index: 99999 !important;
    right: 0px; 
    bottom: 0px;
    display: table;
  }
  #social-sidebar-content {
    display: table-cell;
    vertical-align: middle;
  }

  #social-sidebar-line {
    width: 2px;
    min-height: 40px;
    margin: 10px auto;
    border-radius: 10px;
  }

  #social-sidebar p {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-right: auto;
    margin-left: auto;
  }

  #social-sidebar ul {
    margin: 0px;
  }
}

@media only screen and (max-width: 640px) {
  #social-sidebar {
    text-align: center;
  }
  #social-sidebar ul {
    text-align: center;
    margin: 0 auto;
  }
  #social-sidebar li {
    display: inline;
    padding: 5px;
  }
}

Squarespace 7.1

Copy and paste the following into Design > Custom CSS to put the sidebar on the left.

/* Social Link Side Bar */
#social-sidebar-line {
  background: #555; /* colour of the line */
}
#social-sidebar p {
  color: #555; /* Colour of the text */
}
#social-sidebar ul {
  color: #555; /* Colour of the icons */
}
#social-sidebar ul {
  list-style-type: none;
  padding: 0px;
}

@media only screen and (min-width: 640px) {
  #siteWrapper {
    margin-left: 8vw; /* pushes content out from under sidebar */
  }
  #social-sidebar {
    position: fixed;
    text-align: center;
    width: 8vw; /* width of the sidebar */
    height: 100vh;
    z-index: 99999 !important;
    left: 0px;
    bottom: 0px;
    display: table;
  }
  #social-sidebar-content {
    display: table-cell;
    vertical-align: middle;
  }

  #social-sidebar-line {
    width: 2px;
    min-height: 40px;
    margin: 10px auto;
    border-radius: 10px;
  }

  #social-sidebar p {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-right: auto;
    margin-left: auto;
  }

  #social-sidebar ul {
    margin: 0px;
  }
}

@media only screen and (max-width: 640px) {
  #social-sidebar {
    text-align: center;
  }
  #social-sidebar ul {
    text-align: center;
    margin: 0 auto;
  }
  #social-sidebar li {
    display: inline;
    padding: 5px;
  }
}

Copy and paste the following into Design > Custom CSS to put the sidebar on the right.

/* Social Link Side Bar */
#social-sidebar-line {
  background: #555; /* colour of the line */
}
#social-sidebar p {
  color: #555; /* Colour of the text */
}
#social-sidebar ul {
  color: #555; /* Colour of the icons */
}
#social-sidebar ul {
  list-style-type: none;
  padding: 0px;
}

@media only screen and (min-width: 640px) {
  #siteWrapper{
    margin-right: 8vw; /* pushes content out from under sidebar */
  }
  #social-sidebar {
    position: fixed;
    text-align: center;
    width: 8vw; /* width of the sidebar */
    height: 100vh;
    z-index: 99999 !important;
    right: 0px; 
    bottom: 0px;
    display: table;
  }
  #social-sidebar-content {
    display: table-cell;
    vertical-align: middle;
  }

  #social-sidebar-line {
    width: 2px;
    min-height: 40px;
    margin: 10px auto;
    border-radius: 10px;
  }

  #social-sidebar p {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-right: auto;
    margin-left: auto;
  }

  #social-sidebar ul {
    margin: 0px;
  }
}

@media only screen and (max-width: 640px) {
  #social-sidebar {
    text-align: center;
  }
  #social-sidebar ul {
    text-align: center;
    margin: 0 auto;
  }
  #social-sidebar li {
    display: inline;
    padding: 5px;
  }
}

Customize the Icons

Animate the Icon

To learn how to animate the icon, click here.

Resize the Icon

Go to the Font Awesome Size Guide to see your size options.

Troubleshooting

I am using Squarespace 7.1 and my Social Sidebar isn’t showing up.

If you are using a Site Wide Animation in Design > Animations, the animation will conflict with the positioning of your sidebar.

To correct this, copy the code for the animation you are using into Design > CSS. Then customize for your block id.

Fade or Flex

#BLOCKID .preFade, #BLOCKID .fadeIn {
  transform: none !important;
  opacity: 1 !important;
}

Slide

#BLOCKID .preSlide, #BLOCKID .slideIn {
  transform: none !important;
  opacity: 1 !important;
}

Scale

#BLOCKID .preScale,  #BLOCKID .scaleIn  {
  transform: none !important;
  opacity: 1 !important;
}

Clip

#BLOCKID .preClip, #BLOCKID .clipIn {
  transform: none !important;
  animation: none;
  clip-path: none;
  -webkit-clip-path: none;
}

I want my social icon to have a transparent background.

In order to do this, you just need to remove the following code from the CSS. Just be sure to check that it doesn’t overlap any text or images on your site.

Squarespace 7.0

.Content-outer {
    margin-right: 8vw; /* pushes content out from under sidebar */
  }

Squarespace 7.1

#siteWrapper{
    margin-right: 8vw; /* pushes content out from under sidebar */
  }

How To Use It

1. Copy and paste the code as indicated above.

2. Edit the Code Block to contain the social icons you would like.

3. Edit the Custom CSS to style the size and colour of the sidebar. Note that the background colour of the sidebar will be the body colour of your website.