How to add a floating share box to WordPress without Plugin

Although, you might find a few plugins which are nicely doing the work of adding a Floating Share Box to a WordPress blog. But, if you’re like me and don’t like to install all those plugins which push crap to your database or add some useless widgets to your Dashboard, you can follow this guide to insert one easily. You might also not be willing to add a plugin because it uses additional resources of the server.

The guide below will add add the four major sharing tools i.e Twitter, Facebook, StumbleUpon and Reddit. However, you can add/remove any service easily.

Step 1 – Adding the required CSS:

The first step is to add the required CSS to your CSS file. Just open up your theme editor by clicking on Editor under the Appearance tab in your WordPress Admin panel. It will directly open up your CSS file. If it doesn’t, click on style.css (or something similar) at the right. Now, enter the following CSS code at the end of your CSS file:

/* Floating Share Widget */
.post-share {
width : 80px;
padding : 10px 0;
padding-bottom : 0;
background : #ffffff;
border : 1px solid #d2d2d2;
border-radius : 8px;
text-align : center;
position : fixed;
top : 229px;
left : auto;
z-index : 15;
margin: 0 0px 0 -135px;
}
.share-widget {
margin-bottom : 10px;
}

After pasting the above code, click on Update File.

Step 2 – Adding the Share Box:

Now, open up your Single Post file (single.php) by clicking on single.php from the templates in the right to insert the required code to call the sharing buttons. Now, copy and paste the following code to your Single Post file after the post is called, but before the call to comments appear.

<!-- Sharing Box Starts -->
<div class='post-share'>
   <div class='twitter-share share-widget'>
	<a href="http://twitter.com/share" class="twitter-share-button" data-text='<?php the_title(); ?>' data-via="TechMestoz" data-count="vertical" data-related="TechMestoz:Tech Blog">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
   </div>
   <div class='facebook-share share-widget'>
	<iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&send=false&layout=box_count&width=46&show_faces=true&action=like&colorscheme=light&font=arial&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:46px; height:65px;" allowTransparency="true"></iframe>
   </div>

   <div class='stumbleupon-share share-widget'>
	<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
   </div>
   <div class='reddit-share share-widget'>
	<script type="text/javascript" src="http://www.reddit.com/static/button/button2.js"></script>
   </div>
</div>
<!-- Sharing Box End -->

Necessary Change: Please change the user in the data-via tag of the tweet button in the code to your twitter username or the user you wish to mention. Otherwise, we (TechMesto) will be @ mentioned in the share.

Why was it called after the post? The fact that it is called after post but before comments is because the first major thing of the page is the post. If we call the share buttons before the post, if somehow the social widget doesn’t responds correctly, it will pause the whole post from loading.

Showing the box on WordPress Pages:

If you want to show the widget on WordPress pages too, just add the code in the Step 2 to your Page Template (page.php)

If you experience any difficulty in adding the code or the code isn’t working for you, just leave a comment below.