SocialSidebarLeft.gif

Left Social Sidebar

The Left Social Sidebar plugin adds a left-hand collapsible sidebar featuring your Social Media icons. Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.

 

 

Step 1: Add the Social Links

This plugin will requires a Social Links block to be placed anywhere in the footer area of your site.

Make sure you only have 1 Social Links block in your footer and the Social Links block can be styled however you want it - however, we would recommend the following settings:

 

 

Step 2: Insert the JavaScript

Insert the following code into the site wide 'Header Code Injection' area or in the 'Page Header Code Injection' area to implement this plugin on individual page(s) - more info below.

Copy & paste this code:

<ssb><ssbButton>◀</ssbButton></ssb>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script> $(document).ready(function(){$("footer .sqs-block-socialaccountlinks-v2").appendTo($("ssb")),$("ssb").toggleClass("ssbShow"),$("ssbButton").click(function(){$("ssb").toggleClass("ssbShow");var s=$(this).text();$(this).text("◀"==s?"▶":"◀")})});</script>
 

Site wide Code Injection:

 

Individual Page Header Code Injection:

 

 

Step 3: Insert the CSS

Insert the following code into your Squarespace site's Custom CSS editor or the Individual Page Header CSS injection (more info below) - the values in bold can be changed to suit your branding and site design. 

Where colour values are added, you can use either of the following:

  • Valid colour name e.g. 'red' or 'yellow'
  • Hex value e.g. #FECB2F
  • RGB(a) value e.g. rgb (255,255,255) or rgba (255,255,255,0.8)  - optional opacity value '0.8'
  • HSL(s) value e.g. hsl (0, 0%, 20%) or hsla (0, 0%, 20%, 0.8) optional opacity value '0.8'

If you need help finding colours and building colour palettes - coolors.io is an awesome resource!
 

Copy & paste this code:

/* LEFT SOCIAL SIDEBAR CSS */

@media all and (min-width: 1200px){
  ssb{
    position: fixed;
    z-index: 10001;
    top: 50%;
    left: -30px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .3s ease-in-out !important;
    -moz-transition: all .3s ease-in-out !important;
    -o-transition: all .3s ease-in-out !important;
    transition: all .3s ease-in-out !important;
    padding: 0px 10px !important;
    border-radius: 3px;
    background-color: transparent !important;
  }
  ssb .sqs-block-socialaccountlinks-v2{
    padding-bottom: 0px;
    padding-top: 0px;
  }
  ssb .sqs-block-socialaccountlinks-v2  a{
    display: block;
    margin: 6px 0px !important;
  }
  ssbButton{
    display: block;
    position: absolute;
    bottom: -10px;
    z-index: 1002;
    left: 65px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .3s ease-in-out !important;
    -moz-transition: all .3s ease-in-out !important;
    -o-transition: all .3s ease-in-out !important;
    transition: all .3s ease-in-out !important;
    width: 10px;
    height: 10px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    color: #AEAEAE;
  }
  .ssbShow{
    left: 20px !important;
  }
  .ssbShow  ssbButton{
    left: 22px;
  }
}
 

Finding your Custom CSS editor:

 

Individual Page Header CSS injection

 

⚡️Apply, Save & Refresh! ⚡️

 

Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.