Left Social Sidebar

SocialSidebarLeft.gif

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 block

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 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:

sitewide-1.png
sitewide-2.png
sitewide-3.png

Individual Page Header Code Injection:

download.png
header-2.png
header-3.png
header-4.png

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 (optional opacity values '0.8') 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;
  }
}

Site wide CSS Injection:

sitewide-1.png
sitewide-2.png
sitewide-3.png
sitewide-4.png
 

Individual Page Header CSS Injection:

If using this method, be sure to wrap your CSS in <style></style> tags as shown in image 4!

header-2.png
header-3.png
header-4.png
 

Step 4: 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.

Noughts & Ones