Creating a Floating WordPress Share Box

This is an intermediate level tutorial for WordPress developers interested in adding a floating vertical share box to their WordPress website. I spent the better part of a day trying to find the perfect share box for WordPress and found that most wouldn’t work in both Internet Explorer and Firefox. Well let’s just say they wouldn’t work in Internet Explorer. Most of them work find in Firefox from my experience. However, instead of using one of the ones already available on the internet, I decided to develop my own because the ones I found were too complex and therefore wouldn’t work as you would expect them to. So, if you want a simple share box that you can build on to later and that will actually work across all popular browsers, then you have found the tutorial that will get it done.

Why Not Use WordPress Share Box Plugins

The main argument against using a WordPress plugin for a floating vertical share box, or any share box for that matter, is that too many plugins slow down your site. This is a rather simple task, so why use a plugin? The answer is simple. Don’t. Follow this easy to read tutorial and I will have you up and running with a nice vertical floating share box in no time at all.

Prerequisites

There is not really a lot you need to know before attempting this tutorial. It will help to be familiar with the WordPress admin and HTML however. Other than that, just follow along and have fun!

Develop Your Floating Share box HTML

Open your favorite text editor for coding and start a new html file. You will be adding the HTML code first, then appending the CSS styles above it, so let’s start with the bare bones HTML containers as in the following example:

<div id="sharebar">
	<div class="share-twitter">
		<!-- Twitter: -->
 
		<!-- End Twitter: -->
	</div>
 
	<div class="share-facebook">
		<!-- Facebook: -->
 
		<!-- End Facebook: -->
	</div>
 
	<div class="share-plusone">
		<!-- Google +1: -->
 
		<!-- End Google +1: -->
	</div>
</div><!--end sharebar div -->

That’s your basic structure above. Now go to each respective website and grab your button code. Here are the simple instruction as I did mine:

  1. Go to https://twitter.com/about/resources/buttons#tweet and grab a twitter button. I used the “share a link” button because it fit so nice into the vertical side bar I created. If you select a different button, you may have to make your widget wider than I have.
  2. Go to https://developers.facebook.com/docs/reference/plugins/like/ and get a Facebook like button. I chose to leave the URL blank because it defaults to the page it is on. Then I deselected send button, set width to 50 and clicked get code. You will see there are two pieces of code in the window that pops up. Grab them both and paste them one after the other in between your Facebook comment tags in the above HTML example layout.
  3. Go to https://developers.google.com/+/plugins/+1button/ and get a Google, Plus 1 button. I scrolled down the page to where it said “a simple button” and used the simple short code snippet found there for my share box and it worked just fine. You may want to experiment with the options though for your own custom share box.

All you have to do with the above three steps is grab the code and past it in between the respective comment tags for each of the three share buttons. Once that is done, add your CSS style as I’ll explain next.

Adding CSS Styles to Your Floating Share Box HTML

Add the following style to the top of your HTML document and tweak as desired:

<style>
#sharebar {
	position: fixed;
	right: 10px;
	bottom: 45%;
	width: 85px;
	padding: 10px 5px;
	text-align: center;
	background-color: #dddddd;
	border: 5px solid #999999;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	z-index:9999999;
}
 
.share-twitter {
	height: 32px;
	margin-bottom: 3px;
}
 
.share-facebook {
	height: 32px;
	margin-bottom: 3px;
	margin-left:-12px;
}
 
.share-plusone {
	height: 20px;
	margin-left:4px;
}
</style>

Once you are done with copy and pasting the above style into the top of your HTML document, save it as sharebox.html or whatever file name you desire. Then follow the next section’s directions for uploading it into your WordPress blog.

Adding a Share Box Sidebar Widget in WordPress

The way I decided to tackle my vertical floating share box was to add it as a sidebar widget from my WordPress admin. Follow these three easy steps to get started:

  1. Login to your WordPress admin
  2. Click on Appearance and then Widgets
  3. Under the available widgets in the left column, click and drag a text widget over to the main sidebar area in the right column. Copy and paste the html from earlier into the main textarea and save.

That’s it! You’re done! That was easy wasn’t it? Go ahead and view your site and check out your sidebar widget with the floating share bar. It should work great if you followed along well enough. If not, go back and find your errors and try again. Here is what mine looked like when I was done:

floating share box

Of course, you can always add other share buttons to your own share box. These are just the ones I prefer.

Summary

Well, I hope you had fun with this tutorial on building and adding an HTML floating vertical share box to your WordPress blog or website. The instructions are fairly straight forward so I hope everyone could follow along and develop a working share box for their WordPress site. Have fun tweaking yours to fit your exact needs. This tutorial should definitely help you get the ball rolling.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>