Add Floating Social Share Buttons in WordPress

If you want to add social share like Facebook, Twitter, Linkdin and other social share page in your wordpress site than here is solution. Add below line of code at the end of your theme’s functions.php file of your active child theme (or theme) and Save the file.

function wdo_wordpress_floating_social_shares() {

  /* Post ID */
  global $post;
  $id = $post->ID;

  $title = get_the_title($id);
  $permalink = get_permalink($id);
  $sitename = get_bloginfo();
  $excerpt = get_the_excerpt($id);
  $telephone = '1300235433';

  ?>

   <div class="floating-social-wrapper">
        <div class="wdo_social_shared sharetitle">
           <i class="fa fa-share-alt" aria-hidden="true"></i>
	    </div>
        <div class="wdo_social_share facebook">
            <a href="javascript:;" onClick="window.open('https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($permalink); ?>','Share <?php echo $sitename; ?> on Facebook','toolbar=1,location=1,directories=0,status=0,menubar=1,scrollbars=1,resizable=1,copyhistory=0,width=550,height=630,left=0,top=0')"><i class="fa fa-facebook" aria-hidden="true"></i></a>
        </div>
        <div class="wdo_social_share twitter">
            <a href="javascript:;" onClick="window.open('https://twitter.com/home?status=<?php echo $title . ': ' . $permalink; ?>','Share <?php echo $sitename; ?> on Twitter','toolbar=1,location=1,directories=0,status=0,menubar=1,scrollbars=1,resizable=1,copyhistory=0,width=550,height=630,left=0,top=0')"><i class="fa fa-twitter" aria-hidden="true"></i></a>
       </div>
        <div class="wdo_social_share google">
            <a href="javascript:;" onClick="window.open('https://plus.google.com/share?url=<?php echo urlencode($permalink); ?>','Share <?php echo $sitename; ?> on Google','toolbar=1,location=1,directories=0,status=0,menubar=1,scrollbars=1,resizable=1,copyhistory=0,width=430,height=610,left=0,top=0')"><i class="fa fa-google" aria-hidden="true"></i></a>
        </div>
        <div class="wdo_social_share linkedin">
            <a href="javascript:;" onClick="window.open('https://www.linkedin.com/shareArticle?mini=true&url=<?php echo urlencode($permalink); ?>&title=<?php echo $title; ?>&summary=<?php $excerpt; ?>&source=<?php echo $permalink; ?>','Share <?php echo $sitename; ?> on LinkedIn','toolbar=1,location=1,directories=0,status=0,menubar=1,scrollbars=1,resizable=1,copyhistory=0,width=550,height=630,left=0,top=0')"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
       </div>
        <div class="wdo_social_share wdophone">
            <a href="tel:<?php echo $telephone; ?>"><i class="fa fa-phone" aria-hidden="true"></i></a>
       </div>
       <div class="wdo_social_share wdocontact">
            <a href="<?php echo get_site_url(); ?>contact"><i class="fa fa-address-book" aria-hidden="true"></i></a>
       </div>
 
        <?php if (comments_open($id) !== false) { ?>
         <div class="wdo_social_share wdocomments">
    <a href="<?php echo $permalink; ?>#respond"><i class="fa fa-comments" aria-hidden="true"></i></a>
    </div>
        <?php } ?>

  </div>

<?php
}
add_action('wp_footer', 'wdo_wordpress_floating_social_shares', 99);

You can also add below css code in your style.css file of your active child theme (or theme) and Save the file.

.floating-social-wrapper {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}
.wdo_social_share {
  width: 50px;
  height: 50px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s linear;
}
 
.wdo_social_shared {
  width: 50px;
  height: 50px;
  position: relative;
  cursor: no-drop;
  transition: all 0.2s linear;
}
 
.wdo_social_share .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  font-size: 20px;
}
 
.wdo_social_shared .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #000;
  font-size: 20px;
}
 
.wdo_social_shared.sharetitle {
  background: #F0F0F0;
  color: #000000;
}
 
.wdo_social_share.facebook {
  background:#3b5998;
}
 
.wdo_social_share.twitter {
  background: #55acee;
}
 
.wdo_social_share.reddit {
  background: #ff4500;
}
 
.wdo_social_share.google {
  background: #dd4b39;
}
 
.wdo_social_share.linkedin {
  background: #0098B2;
}
 
.wdo_social_share.whatsapp {
  background: #4dc247;
}
 
.wdo_social_share.wdocontact {
  background: #FFB301;
}
 
.wdo_social_share.wdophone {
  background: #4dc247;
}
 
.wdo_social_share.wdocomments {
  background: #0073AA;
}
 
.wdo_social_share:hover {
  width: 70px;
}
 
@media only screen and (max-width : 1000px) {
 
  .wdo_social_share {
    width: 25px;
    height: 25px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s linear;
  }
 
  .wdo_social_shared {
    width: 25px;
    height: 25px;
    position: relative;
    cursor: no-drop;
    transition: all 0.2s linear;
  }
 
  .wdo_social_share .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 13px;
  }
 
  .wdo_social_shared .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #000;
    font-size: 10px;
  }
}
 
@media only screen and (max-width : 768px) {
  .floating-social-wrapper {
     display:none;
  }
}