Add Social Buttons Floating Sidebar Manually to WordPress

Sharing articles and content on the social networks is the prime method to boost your traffic and rankings.  A great way to do it is Floating Sharing Buttons. Floating buttons are always in focus of a reader and easy to click. There are many ways to implement this. You can either install plugin or do it manually. However, why to use a plugin when you can do this manually in just two easy steps?

It depends on you that on which pages you want floating share box. For Whole site, most preferable file to edit will be “Main Index” file of your theme and for just posts (articles)  “single post” file.

Note: This method is safe but codes can’t be expected to work every time.  Taking backup of the files is your responsibility. I completed mine by warning.

This floating share bar code is Responsive and I have included buttons for Facebook, Twitter, Google+, LinkedIn, PinInterest, StumbleUpon, and Digg. You just need to copy-paste. You can add more or remove buttons later on as per your wish. Remember that the first code is long, because seven social buttons are already included in it.

Add Social Buttons Floating Sidebar Manually

Step 1:

Login to your WordPress Dashboard and go to Appearance –> Editor. Find the file called ‘Single Post’ from list of your theme files at right hand side. Now, add following code at the end but before footer line (in some cases you will need to put it after footer line depending on your theme);

<div id="social-float">
	<div class="sf-facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp&send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=62&amp;appId=395070697179940" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:62px;" allowTransparency="true"></iframe>
</div>
	<div class="sf-twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-dnt="true">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
	</div> 
	<div class="sf-plusone">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
	</div>
	<div class="sf-linkedin">
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>
	</div>

<div class="sf-pinterest">
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='http://passets-cdn.pinterest.com/images/about/buttons/big-p-button.png' width='50' height='50' alt='Pin It'/></a>
	</div>

<div class="sf-stumble">
<!-- Place this tag where you want the su badge to render -->
<su:badge layout="2"></su:badge>
<!-- Place this snippet wherever appropriate -->
<script type="text/javascript">
  (function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = 'https://platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
</script>
</div>

<div class="sf-digg">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium">
href=<?php the_permalink(); ?></a>
</div>
</div><!-- /social-float -->
<script type="text/javascript">
	jQuery(document).ready(function($) {
		// Show social voter only if the browser is wide enough.
		if( $(window).width() >= 1030 )
			$('#social-float').show();
		// Update when user resizes browser.
		$(window).resize(function() {
			if( $(window).width() < 1030 ) {
				$('#social-float').hide();
			} else {
				$('#social-float').show();
			}
		});
	});
</script>

Save the file by cling Update button. Everything should be completed without an error.

Step 2:

Now select your theme’s ‘Stylesheet’ CSS file from right side list of files. Scroll down to end of file and paste this code;

#social-float {
	position: fixed;
	left: 20px;
	bottom: 80px;
	width: 75px;
	padding: 10px 1px;
	text-align: center;
	background-color: #fff;
	border: 4px solid rgba(180, 180, 180, .7);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	display: none;
}
.sf-facebook {
	margin-bottom: 5px;
}
.sf-linkedin {
	height: 60px;
	margin-bottom: 5px;
}
.sf-pinterest {
	margin-bottom: 5px;
}
.sf-digg {
	margin-bottom: 5px;
}
.sf-stumble {
	margin-bottom: 5px;
}
.sf-twitter {
	height: 62px;
	margin-bottom: 5px;
}
.sf-plusone {
	height: 60px;
	margin-bottom: 5px;
}

Save the file by clicking Update file. Make sure that no errors are returned. Now go to your webpage or article page and you should see something like this;

I hope it worked for you and you enjoyed this quick and easy method! If it didn’t work or you are having some issues, please let me know. I will try to solve issues or find and write new ways. 🙂