Floating Share Buttons

This is one of the most common questions I get asked; how do you make a floating box with share links?

Today, we’re going to see just how simple it can be. We will:

  • Set up the current trinity of search (Facebook, Twitter, +1).
  • See how to make sure they share the right URL.
  • Align the box to the bottom left of the user’s browser.
  • Hide the box if the user’s browser is too small (So it never overlaps our content).

Update (1st March 2018): I’ve now taken the demo site offline. This post is very old now and the CSS would need some updating to work in current browsers with the current versions of each site’s share script. The screenshot above shows how it appeared at the time.

1 – The URL and Text to Share

The first step involves a little WordPress code. In footer.php in your theme, scroll down to the tag, and just before it, paste the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?php
// URL to share
if( is_singular() ) {
	$url = get_permalink();
	$text = the_title('', '', false);
} else if ( is_category() || is_tag() ) {
	if(is_category() ) {
		$cat = get_query_var('cat');
		$url = get_category_link($cat);
	} else {
		$tag = get_query_var('tag_id');
		$url = get_tag_link($tag);
	}
	$text = single_cat_title('', false) . ' on ' . get_bloginfo('name');
} else {
	$url = get_bloginfo('url');
	$text = get_bloginfo('name') . ' - ' . get_bloginfo('description');
}	
?>

The point of this code is to work out the right URL and title text to share, and save them in 2 PHP variables ($url and $text).

The way it works is to run through a “what page are we on?” check:

  • Single Post/Page – Then use the post’s URL and title.
  • Category/Tag – Then use the category/tag’s URL, and “Category on Site Name” as the text.
  • Default – Share the homepage URL, site title and description on any other page.

The reason we go to the trouble of making sure we have the right URL and text here is to ensure that the right details are shared, e.g. we don’t need any utm_source= etc. tracking tags after the address.

Get the Share Codes

The next step is to get the share code for each button, and put it in HTML that we can style.

You can either follow through the steps manually as I show you, or skip to the next block of code after this one, and copy it (But read the paragraph before it too).

Manual way:

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="social-float">
	<div class="sf-twitter">
		<!-- Twitter Code Goes Here -->
	</div>
 
	<div class="sf-facebook">
		<!-- Facebook Code Goes Here -->
	</div>
 
	<div class="sf-plusone">
		<!-- Google +1 Code Goes Here -->
	</div>
</div><!-- /social-float -->

You can see HTML comments for where each share code will go. Now, let’s get those codes (And tweak them as needed)

  • Twitter
    • Click here.
    • Choose “Vertical Count”, and enter your Twitter handle below.
    • Copy and paste the code.
    • Find the part that looks like: data-count=”vertical” data-via=”problogdesign”. Take a space after that and paste: data-url=”<?php echo $url; ?>” data-text=”<?php echo $text; ?>”
  • Facebook
    • Click here.
    • Enter http://google.com for “Address to Share”.
    • Deselect the “Send Button” option, choose “box_count” for layout, and set the width to 50.
    • Hit “Get Code” and copy and paste the iframe code (Or XFBML if you already use the FB JavaScript SDK. If you aren’t sure, just take the iframe code).
    • In the iframe code, search for http%3A%2F%2Fgoogle.com, and replace it with: <?php echo urlencode($url); ?>
    • Search for 80 in the code, and replace it with 62 (There are 2 places to change it, both to do with the height).
  • Google +1
    • Click here.
    • Select the “Tall” button, and then copy and paste the code.
    • Find where it says size=”tall” in the code, then take a space and paste: href=”<?php echo $url; ?>”

And that’s you done! Your code should look similar to what’s below.

Automatic Way:

Copy and paste the following, but on line 3, make sure you change the data-via=”problogdesign” part to use your Twitter username instead.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="social-float">
	<div class="sf-twitter">
		<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="problogdesign" data-url="<?php echo $url; ?>" data-text="<?php echo $text; ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
	</div>
 
	<div class="sf-facebook">
		<iframe src="http://www.facebook.com/plugins/like.php?app_id=186708408052490&amp;href=<?php echo urlencode($url); ?>&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" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:62px;" allowTransparency="true"></iframe>
	</div>
 
	<div class="sf-plusone">
		<!-- Place this tag in your head or just before your close body tag -->
		<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
 
		<!-- Place this tag where you want the +1 button to render -->
		<g:plusone size="tall" href="<?php echo $url; ?>"></g:plusone>
	</div>
</div><!-- /social-float -->

CSS Time

The majority of our effect is done with just a simple piece of CSS. By using fixed positioning, we can anchor our box to the corner of the screen (It won’t work in IE6, but that’s okay).

The following will put the box 10px from the bottom and left edges of their browser (Don’t copy this just yet).

1
2
3
4
5

#social-float {
	position: fixed;
	left: 10px;
	bottom: 10px;
}

If you try that, it works, but of course, we want to style it too. One of the annoyances of these share buttons is that each vendor has decided to vary their button’s size by 1 or 2 pixels.

The following CSS makes a good template to work from. I’ve measured the sizes so each button is 10px from the next, with a 10px padding around the whole thing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/**
 * Floating Social Buttons
 */
 
#social-float {
	position: fixed;
	left: 10px;
	bottom: 10px;
 
	width: 55px;
	padding: 10px 5px;
	text-align: center;
 
	background-color: #fff;
 
	border: 5px solid rgba(180, 180, 180, .7);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
 
	display: none;
}
 
.sf-twitter {
	height: 62px;
	margin-bottom: 10px;
}
 
.sf-facebook {
	height: 60px;
	margin-bottom: 10px;
}
 
.sf-plusone {
	height: 60px;
}

To tweak the style, change the background-color and border parts of #social-float (Right now, I’ve just used some CSS3 to quickly make a rounded, semi-transparent border).

Important: Don’t worry that it’s not showing up for you. The display: none; in there is hiding it. Read on!

Hide on Smaller Browsers

We don’t want to show the box on smaller browsers because it will obstruct the post content. To solve that, let’s use jQuery to check the browser size, and show the box only if it is wide enough.

First up, make sure you’ve loaded jQuery by adding the following to your functions.php file, or to header.php (Before the wp_head(); tag).

1

<?php wp_enqueue_script('jquery'); ?>

Now, go back to footer.php and after our button HTML, paste the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

Lines 4 and 5 run when the page is first loaded. They check the width, and show the box if it is wide enough.

Lines 8 is an event handler that runs when the user resizes their browser. When they do, we run the exact same check as above, and either hide/show the box as appropriate.

I’ve set the width to 1030px, which is 980px (A common page width), plus 150px (The width of our box) times 2 (The page is centered, so 150px on either side). Feel free to change this however you like, but make sure you update it in both locations.

Now save your code and check it out on site. With everything in place now, feel free to tweak the style and you’re good to go.

If you hit any issues, let me know in the comments! Good luck!

Enjoy this post? You should follow me on Twitter!