Home »
Tips, Tricks & Resources »
Add Social Buttons Floating Sidebar Manually to WordPress

Add Social Buttons Floating Sidebar Manually to WordPress

Posted by Mrinal Buddekar On January 27, 2013 4 Comments

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.

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>

</div>

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-dnt="true">Tweet</a>

</div>

<g:plusone size="tall"></g:plusone>

(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>

</div>

<su:badge layout="2"></su:badge>

(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>

(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>

href=<?php the_permalink(); ?></a>

</div>

</div>

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;
}

#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;

manual float manual social button wordpress ijustutter

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. :-)

Add Social Buttons Floating Sidebar Manually to WordPress by Mrinal Buddekar is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Bio
Latest Posts

Mrinal Buddekar

A Research Professional, Doctor, Technology Blogger

Mrinal Buddekar is a founder of I Just Utter. He is a technology enthusiast and author of many guides and how-to. Mrinal likes web development, linux, server administration and programming.

Latest posts by Mrinal Buddekar (see all)

Free 50 GB Lifetime Box.com for Xperia Android Still Working - May 19, 2013
How to Setup and Configure TP-LINK TL-MR3020 - May 12, 2013
Complete Review of TP-LINK TL-MR3020 3G/4G Wireless N Router - May 4, 2013

TOPICS PHP social sharing web development website wordpress

I Just Utter

Mrinal Buddekar

Latest posts by Mrinal Buddekar (see all)

Quick Search

Subscribe

Readers Say