Hello I am here again and I am going to teach how to create a sticky share button without a plugin this is easy you just need a basic html, simple wordpress function, css and javascript to do this. Also you need the icoomon icons well this is pretty indeed when you done applied it.

First you need this code and put it in the footer.php of your wordpress themes.

Here is HTML Code with get_permalink(); coming from the wordpress function this is to get the proper link when you’re in a different pages.

<div class="tools">
        <div class="social-media-share" data-module="SocialSharing" data-social-links-data="{&quot;facebook&quot;:{&quot;Title&quot;:&quot;Facebook&quot;},&quot;twitter&quot;:{&quot;Title&quot;:&quot;Twitter&quot;},&quot;pinterest&quot;:{&quot;Title&quot;:&quot;Pinterest&quot;}}">
            <div class="shariff" data-url="http://www.dedon.de/en" data-services="['facebook','twitter','pinterest']">
                <ul class="theme-color orientation-horizontal button-style-standard shariff-col-34">
                    <li class="shariff-button facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink(); ?>" data-rel="popup" rel="nofollow" title="Bei Facebook teilen" role="button" aria-label="Bei Facebook teilen"><span class="share_text">Facebook</span></a></li>
                    <li class="shariff-button twitter"><a href="https://twitter.com/intent/tweet?text=Welcome%20to%20OHMM&url=<?php echo get_permalink(); ?>&hashtags=ohmm" data-rel="popup" rel="nofollow" title="OHMM" role="button" aria-label="OHMM"><span class="share_text">Twitter</span></a></li>
                    <li class="shariff-button pinterest"><a href="https://www.pinterest.com/pin/create/link/?url=<?php echo get_permalink(); ?>&amp;media=https://www.dedon.de/-/media/product-catalog/products/furnitures/mbrace/mbrace-CINNABAR/DEDON_MBRACE_Starter.jpg?mw=1920&amp;description=DEDON%20%7C%20Welcome%20to%20DEDON - http://www.dedon.de/en" data-rel="popup" rel="nofollow" title="Bei Pinterest pinnen" role="button" aria-label="Bei Pinterest pinnen"><span class="share_text">Pinterest</span></a></li>
            <span class="icon icon-share"></span>

Next is the CSS code here

@font-face {
    font-family: 'Laurince Icons';
    src: url('fonts/icomoon_new.eot?l220tm');
  src: url('fonts/icomoon_new.eot?l220tm#iefix') format('embedded-opentype'), 
  url('fonts/icomoon_new.ttf?l220tm') format('truetype'), 
  url('fonts/icomoon_new.woff?l220tm') format('woff'), 
  url('fonts/icomoon_new.svg?l220tm#icomoon') format('svg');
    font-weight: normal;
    font-style: normal

.icon-share:before {
    content: "\e617";
.tools {
  bottom: 16px;
  position: fixed;
  right: 22px;
  text-align: right;
  z-index: 60;

.tools .social-media-share, .tools .icon {
  -webkit-border-radius: 3rem;
  -moz-border-radius: 3rem;
  border-radius: 3rem;
  background: rgba(39,39,39,0.4);
  height: 4.5rem;

.tools .social-media-share, .tools .icon {
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  margin-left: auto;
  margin-right: 0;
  max-width: 4.5rem;
  overflow: hidden;
  position: relative;

.tools .social-media-share .shariff-button {
  float: left;
  list-style: none;

.tools .downloads .shariff ul li:first-child a, .tools .social-media-share .shariff ul li:first-child a {
  margin-left: 0;

.tools .downloads a, .tools .social-media-share a {
  font-size: 1rem;
  letter-spacing: .05rem;
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  color: white;
  line-height: 4.9rem;;
  margin-left: 2.2rem;
  text-transform: uppercase;

.tools .social-media-share .share_text {
  font-size: 1.5rem;

.tools .icon {
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.5rem;

.tools .social-media-share .icon:before {
  font-family: 'Laurince Icons';
  font-size: 2.1rem;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  left: 50%;
  top: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -moz-transition: color .3s ease-in-out;
  -o-transition: color .3s ease-in-out;
  -webkit-transition: color .3s ease-in-out;
  transition: color .3s ease-in-out;
  color: white;
  display: inline-block;
  margin-top: -0.1rem;
  position: absolute;

.social-media-share ul {
  margin: 0;

.tools .social-media-share.hover {
  max-width: 80vw;
  padding-right: 5.9rem;

.tools .social-media-share.hover a {
  opacity: 1;
  filter: alpha(opacity=100);

.tools .social-media-share.hover .icon {
  background: rgba(39,39,39,0.5);

.tools .social-media-share.hover .icon:before {
  color: #f1b123;

and here is the Javascript


   jQuery('body').on('click','.social-media-share', function(){
      } else {

  jQuery('body').on('click','.social-media-share li a', function(e){
    var getUrl = jQuery(this).attr('href');
    window.open(getUrl, 'Laurince POP WINDOW', 'width=555,height=641');


If you put it together it will be look like this, you can see live here at the bottom right

This will be great to apply in your wordpress website, because it was light weight, simple and no plugin used so the resource will not be greater impact in your website. You can customise the code that was a free share and improve it 🙂 bonus hereare the icoomon icons if you want it to be the icons in your share button.