# How to add Sticky Social Share Buttons **URL:** \ **Category:** Using Ghost\ **Created:** [May 11, 2020, 3:16pm UTC](https://forum.ghost.org/t/how-to-add-sticky-social-share-buttons/14253 "2020-05-11T15:16:14Z")\ **Posts on this page:** 1\ **Page:** 1

**Author:** ![giray1](https://avatars.discourse-cdn.com/v4/letter/g/3ab097/32.png) [@giray1](https://forum.ghost.org/u/giray1)\ **Post date:** [May 11, 2020, 3:16pm UTC](https://forum.ghost.org/t/how-to-add-sticky-social-share-buttons/14253/1 "2020-05-11T15:16:14Z")

Hi, this is how i add sticky social share buttons to my site: [https://thepublicbox.com/organising-content/](https://thepublicbox.com/organising-content/) add this to the _default.hbs_ ``` {{!-- Social share widget should be visible only on page and post --}} {{#is "post, page"}} {{> "social-share"}} {{/is}}

``` create new _social-share.hbs_ ``` {{#post}}

{{/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; } ```