How to add Sticky Social Share Buttons

Using Ghost
1

Hi, this is how i add sticky social share buttons to my site: https://thepublicbox.com/organising-content/

add this to the default.hbs

    <body class="{{body_class}}">

    {{!-- Social share widget should be visible only on page and post --}}

    {{#is "post, page"}}

    {{> "social-share"}}

    {{/is}}

    <div class="site-wrapper">

create new social-share.hbs

{{#post}}

<div id="icon-bar">

    <a class="a facebook" href="https://facebook.com/sharer/sharer.php?u={{url absolute="true"}}" target="_blank" rel="noopener"

    title="Share on Facebook"><i class="fa fa-facebook"></i></a>

    <a class="a twitter" href="https://twitter.com/intent/tweet/?text={{title}}{{#if @site.twitter}} via {{@site.twitter}}{{/if}}&url={{url absolute="true"}}" target="_blank" rel="noopener"

    title="Share on Twitter"><i class="fa fa-twitter"></i></a> 

    <a class="a linkedin" href="https://www.linkedin.com/sharing/share-offsite/?url={{url absolute="true"}}" target="_blank" rel="noopener"

    title="Share on LinkedIn"><i class="fa fa-linkedin"></i></a>

</div>

{{/post}}

add this to the screen.css

#icon-bar {

  position: fixed;

  top: 50%;

  -webkit-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

  margin:0;

  left:0;

  z-index:999

}

#icon-bar .a {

  display: block;

  text-align: center;

  padding: 16px 22px;

  transition: all 0.3s ease;

  color: white;

  font-size: 20px;

  width: 20px;

}

#icon-bar .a:hover {

    padding: 16px 30px;

}

#icon-bar .a.facebook {

  background: #3B5998;

  color: white;

}

#icon-bar .a.twitter {

  background: #55ACEE;

  color: white;

}

#icon-bar .a.linkedin {

  background: #007bb5;

  color: white;

}
3 Likes