How to Make a Floating Share Box
134This 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&href=<?php echo urlencode($url); ?>&send=false&layout=box_count&width=50&show_faces=false&action=like&colorscheme=light&font&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!
Awesome Michael. I love how you’ve set up the link / name variables, and making the float disappear on smaller browsers is an excellent touch!
Thanks Pippin! I think it makes a good addition. I haven’t tried it out on a mobile browser yet, but there in particular, this would be a pain in the neck for users otherwise I think!
Beside using it on Share-Boxes, this could be handy for another great ideas, mixing it with Fitext (the jQuery plugin), getting it to be resized for any type of mobile/small screen, that way you involve this great plugin, for mobile websites as well.
I think it’s much easier to make a floating share box with VB. It has lesser lines of coding.
Yeah! This info is super helpful.
Would be great if all of this was made into a plugin.
I thought about making it a plugin tutorial like my last 2 tuts have been, but starting to wonder if the parts that make it a plugin are a little offputting to people.
Saying “go to this file, look for this” is much simpler to understand than hooks are. Not sure what the best approach is yet!
I agree, but for now the Digg Digg and Sharebar plugins will have to do.
Actually I have been using the ShareBar plugin and so far have not been happy with it. I think I may kill it and try the above solution. Besides, its one less plugin to worry about!
Nice tut, but i ruined my blog twice, trying to set popular post on sidebar by my own. I guess i’m not good enough on it, but i’m ready to ruining my blog one more time for this.
Its very useful :)
This is great. Well thought out.
I am trying to figure out why you are not using it. A live example would be awesome or at least a full sized image.
There’s a demo site here: http://www.problogdesign.com/demo/floating-share/
I don’t use it on PBD because I think they can be distracting and I’d rather keep PBD a little cleaner. I know huge numbers of bloggers love them though, hence the tutorial :)
Aloha! hup
I was curious as to how a couple of flogs had done this, and suddenly you have a tutorial. Uncanny.
Haha, I’m glad my mind reading powers are coming along well Matt! ;)
How many fingers am I holding up?
Oh, and that should have been “blogs” in the last comment. iOS auto-incorrect…
Aloha! dke
So great. I love Pro Blog Design
Thanks
Haha, me too Mike! ;)
have you ever think to make them all into a plugin??
I think it will be much helpfull for a new blogger like me….
thanks
Thanks Aming. I think there are a few plugins out there that already create effects like this. They can be fiddly, but they do work, e.g. http://wordpress.org/extend/plugins/digg-digg/
For the tutorial, I wanted to make it clearer to users how they could make the effect themselves (Because you might think of other things this is useful for, e.g. links to a feedback form)
This is exactly what I was looking for yesterday! But i have something coming up today that this tut would be perfect for! Thank you!
Glad to hear I’m not *too* late altogether at least :D
i agree with aming, a nice plugin would have been great!
Sorry, might look into that next time! Or depending on how articles go down; go back and create a plugin for popular ones :)
Great tips here. Looks easy but need to follow the steps closely. Floating share box is good to allow readers to share content more easily.
Is there a plugin which can get this done?
Most likely, yep! This one makes a similar effect at least: http://wordpress.org/extend/plugins/digg-digg/
Worth looking for more though, I haven’t used any myself so I’m not sure what’s best!
Great tutorial! I’m trying to find a way to keep this contained inside a div that sits directly below a site navigation (vertical nav) and have it float down as a user scrolls down the page, but not sure how to preventing it from floating overtop of the site footer.
I was easily able to have the element disappear behind my footer, but would like to have it stop when it gets down that low and remain visible to visitors.
Got any suggestions? Greatly appreciated!
Hi Troy,
Sure thing, I know the sort of effect you mean. I toyed with making this post a tutorial for that effect instead, but it takes a lot more jQuery and I was worried I’ve been doing a little too much jQuery here lately!
Are you confident with tweaking jQuery yourself? If you are, check out the contact form on our services section: http://www.problogdesign.com/services/
It scrolls with that exact same effect (Never overlaps the header or footer). You’re more than welcome to take the JavaScript I wrote for that and tweak it to your needs:
http://cdn.problogdesign.com/wp-content/themes/pro-blog-design-4/scripts/pbd-js.js?ver=1.01
I comment all of my code, so it should be clear enough what each part is doing, but if you haven’t used jQuery much before, you may be better off hunting for a plugin?
i would just add it to single.php so you can have it for each post.
That would work, yep! If all you need it on is your inner posts, that’s a good way to do it :)
Excellent. I’d add a z-index:1000 to the #social-float so it does not get hidden when resizing the page.
That’s not a bad point Claudio. Because it is using fixed position, it will sit on top of regular elements of the page already. But if you have anything else that is absolutely positioned etc. then it would be well worth adding a z-index like you said.
Thanks for the suggestion! :)
Perfect timing! I’m always looking for ways to make social media integration more seamless, thanks!
Excellent! I’ve added it to my site. Thank you very much :)
Thanks for the help. We are looking to add the +1 button, since learning about it. Looks like internet searching it turning the corner.
This tut is really helpful for me, I’m gonna try this in one of my blog, thanks Michael.
Personally I use some WordPress plugins to achieve this effect, but I might DIY it using this guide, as some features I want isn’t possible using those plugins…
Hi Michael! Perfect tutorial. This is a very useful feature for some of my blogs. Thanks for sharing with us!
I am facing problem on my blog. Plz check below link :
http://blog.manuinfo.co.in
I have done my job as u told but the box is in left bottom corner.
Thx for this article. I am going to try this one in our new project.
I’m going to *attempt* to integrate a floating share box on my website. Thank you for the mark up, Michael.
i will try this one.. i am pretty noob when it comes to wordpress and more fond of plugins since they make my life so easier but i have heard that plugins slow the load timings so i may consider using these if cn figure out :-)
Excellent article. I have social icons on my site that are currently static and I haven’t had a chance to look into making them float and resize to the browser windows size. Now I have to give it a try. Thanks very much.
You know what you could do, if the page is too small insert it into another location on the page. Like under the post or something rather then removing things entirely.
I never understood how to do a floating share box. Thanks!
It looks pretty simple and effective. I wonder can this code be used on free wordpress.com platform too? Can i put it in one of the widgets or what?
I have seen a massive increase in shares since I installed a floating box. Thanks for the code.
genius!
what if i want to put some other css elements to hide on smaller browsers? how to add it?
.. sorry, noob question. i know.
Hi there,
This is a great post that helped me set up a nice social side bar for my site (www.subs4free.com).
I got a problem that I cannot fix and I was wondering whether you have an answer…
How can I define the picture FB like will use without using the FB SDK??
I tried using {<meta property="og:image" content="…} and {<link rel="image_src"…} but nothing seems to do the job consistently…
Any ideas / suggestions???
…!!!…
I just found the solution to that issue..!
I quote:
“You have done it correct. But the Facebook scrapes pages every 24 hours, so the results may not display immediately. Although you can use the “Facebook url linter” http://developers.facebook.com/tools/lint/ to get your page scraped immediately.”
[source: http://www.theitechblog.com/1403/solution-to-facebook-like-button-thumbnail-problem/%5D
There’s a plugin available, too: http://wordpress.org/extend/plugins/facebook-like-thumbnail/
I really love this blog post, this is something that I definitely be looking at using with my clients projects. So easy to add into my site and easy use for the visitor to the website. I think that social media is such a big thing now, especially to companies on their websites that I will be using this quite a bit in the future!
Thanks a lot for this article! I still consider WordPress a blog only system and I got a lot to learn about WordPress.
this is a very nice tutorial but isn’t this just an other thing to clutter up a site, its nice to see that you’re not actually using it!
This is great. Well thought out.
But why not just use a plug-in? Especially since there are plenty to choose from!
Your method should be used when there is a need to adjust the panel under the design!
I also use WordPress on my site, social bookmark before i use with plugin but now i can manipulate on that share plugin thanks from you, this is very helpful for me..
Excellent Tut, I am going to try this out
Really exelent! Try it!
This is a great one..nice article, thanks for share with us… I learn a lot with your words.. thank for the post.
Great article!!! Thank you.
Awsome web site.Your all the post is so interesting so when is the next post coming?
Web Design
This is such a nice tip! Definently something I’m going to use on my site :-)
Thanks a million!
So great. I love Pro Blog Design
Thanks
Hi, wonderful tutorial…
I have a problem: I’ve tried multiple facebook plugins and every one retrieved the number of “likes”. I’ve just put the vertical buttons before deactivating the old like buttons to check if it showed the right number of LIKES, but it doesn’t…
can u help us?
Thanx!
Just a quick tip: you can use media queries for this, too. I was playing around with it and did something along the lines of this…
@media screen and (min-width:1030px) {
#social-float {
display: block;
}
}
It will show the box if the browser viewport is wide enough, and functions as well as the jQuery snippet does as far as I can tell. Internet Explorer (of course) doesn’t understand media queries, with the exception of IE9. The box just won’t show up for IE users, which may or may not fit your views of progressive enhancement.
Hi Michael
Almost forgot how good your new site looks – took me by surprise.
Floating share box – nice one.
Starting to see them all over the place.
I just implement the Social Float on my site and love it. Thanks for the article and thanks for helping me get rid of a plugin.
One Note: If you have ShareBar Enabled, the Social Float jQuery code will not work.
I love it ,Thank you
Nice post. it help me alot on my wordpress blog and i also have a similar script to include this sharebutton on blogger blog here http://bloggersfaq.blogspot.com/2011/08/how-to-add-multiple-facebook-twitter.html
that is good,thanks
Thanks for a nice guide. The information is very essential and you presented it very clearly. I try to optimize my work as well as it is possible, that is why I follow all such posts. That is why thanks a lot for a nice explanation
Great guide, thanks for sharing!
Great tutorial. Only issue I’m having now is that the floating like box shows up on some of my wp-admin pages. Is there any way to prevent this?
I have the same problem as Dusty – the box is floating in the admin-area :S
Very Nice Tutorial.
I have remove floating share plugin and use your Tutorial.
This is great.
Good Luck Michael
How do I make it float on the right?
I just implement the Social Float on my site and love it. Thanks for the article and thanks for helping me to make beautiful share button :)
It seems that social media is getting more and more important… as a webdesigner, i really need to find some good ways to implement social sharing buttons.
I was looking for something like this, thanks!
I just implement the Social Float on my site and love it,you can have many beauty MLB jersey
Your explanation on “How to Make a Floating Share Box” is very detail. I am not a technical person so it’s help me a lot with your step by step guide. Thank you
My site: Wisdom tooth extraction recovery
I too, not a technical person but the tutorial makes it easier for me to follow the steps and have that floating share box in an easy way.
I have sort of left the social media thing out on my websites, looks like I really need to use them to increase traffic and popularity, thanks for the post!
Excellent as Always Michael, i implemented the hidding function on my site for 1 id and 1 class, thank you.
I will try copy and paste to see if is working. My site needs that, I am looking for more visitors.
I really like your tutorial. I learned a lot from you and this is really good. Thanks a lot for your efforts man, I really appreciate all you do.
This is exactly what I needed for my new website.Really big thanks for sharing.
Thanks for the code…very nice.
I should also share some code I added for SU and Digg:
‘
‘
‘.sf-su { height: 60px; margin-bottom: 10px;}
.sf-digg { height: 60px; width:48px;}’
Also added the margin to gplus
http://pastebin.com/qJweR1k9
Though Floating share box looks good, it irritates some users who are reading our articles. I’d rather choose to put the share buttons at the end of the article so the readers can easily share it if they’ve really enjoyed reading.
look so complicated but I know it’s a great idea for the sake of my website…
Great tutorial now i can use for my blog
wow…It looks awesome on my blog thanks for the great article
Hi,
This is a simple tutorial but I’m having a hard time understanding the first part.
How do you do a “what page are we on?” check?
Did you mean replace “URL to share” on the code with the post’s URL and title for Single Post/Page, etc?
If so, then what am I supposed to see?
I also don’t understand
– 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.
Thanks for your help.
Can you make it a little bit beginner friendly please?
Or email me. I appreciate the help. Thanks.
Awesome-o! Thanks for the guide!
Awesome, i’m searching the way to make floating share, and this is the best way :D
Bravo! I want use this en one porject.
Thanks for post it
nice sharing its amazing to share here. thanks!
Thanks for sharing this tutorial. It is very helpful.
Very detail information on. “How to make a Floating Share Box”. It not difficult to understand even for non techy person like me. Thanks
Awesome! works perfect, but does anyone could post something like these social media counts will reflect the same count on other post or page? I am using wordpress and I really having a hard time to do that.
Thanks! I need your help asap..
useful tutorial, thanks for sharing !
You know when I wanted to do this on my site I can’t find this tutorial. Very nice post!!!
Maybe someone can help with multilingual WP?
:) Great, very useful for me.
Tahnks for the work
I am using this on a client’s site to float an opt-in box down the side of interior pages. It looks amazing in FF. But when I view the site in IE9 or Chrome it shows up unformatted above the content.
What can I change to make this work across browsers?
I fixed my issue by simply adding the following line to my CSS:
float: right;
Now it is displayed properly in all browsers.
thanks for ur tutorial. that is very useful for CSS beginner like me.
Great tips…
can we add more social media and/or other thing (digg, feed, text, etc) in the floating bar?
thanks for ur tutorial. that is very useful for CSS beginner like me.
its a nice tutorial,especially the mobile browser hide part is very useful.
For now i am using sharebar plugin,i may switch to manual code.
I love the simplicity of this, but would love to update it with code for Stumble Upon and Pinterest as well … I’m not as worried about StumbleUpon, but for Pinterest you need to add the image URL. What is the best way to code that? I added the default to my single post/page above my content for now and while I like it, I was thinking if I used this I could tweak it to make it possible to use for the floating share-box, and also for above the posts.
While I am using sociable for now, I would also like to eventually get rid of that plug in and code my underneath sharing using my own social media icon set. I am thinking I should be able to expand on this and utilize the script for it all, maybe. I’m a newbie to coding. ;-)
I am very interested in how you would figure Pinterest’s image URL into this tutorial, though. I’d love to see!
Very nice tutorial that have in here. This is a great websites that I found today! Nicely presented information in this post, I prefer to read this kind of stuff. The quality of content is fine and the conclusion is good. I want to share my views to you about this site that it is awesome & very well built, please keep us updated. Thanks for Sharing. Great Websites!
Hi there just wanted to thank you because i was trying to build it and got stuck with some of the php stuff, but your tutorial was neat enough for me to get it working :o)
really nice post, thanks again for sharing your blog information is ace as always.
Socialble has this option with their plugin but it seems to get lost on a square monitor?
Great Information! I am using Pinterest as well and would also like to know the best way to code that? Thanks for sharing.
hy Michael Martin, you done the good work for this,t not difficult to understand even for non techy person like me. Thanks
Oh really this one is so simple to make a floating shre box… Thanks for sharing it..
Thank you for sharing this trick, simple yet elegant and very useful
Hehehe, after all this plugins and problems with them, this seems soo easy now. I will make my customized float box!! Thaaaanks! :)
some truly cool information on this site , also I think the layout contains great features. very altruistic and nice :)
Great function for webmasters. Not so great for me and other users. If I want to share something, I will copy the URL to my social network of choice, or click the NON FLOATING share button.
Can anyone help me to block floating share buttons? They are driving me crazy!
Awesome. I added it. Gave me little hard time as I totally missed the part which tells where to put the code. I was putting it in Functions.php and it was not working.
I put it in Header.php instead of Footer.php. Working great. However, I have a question. In Firefox it is not showing properly. It is messing up with Menu. You can go and check my blog in Firefox and comment back. I have subscribed to this thread.
Thanks. :-D
Yes, Excellent article. I also want to create floating share box in my website and after adding the code which Michael has given, I can create this feature very easily in my website.
some truly cool information on this site , also I think the layout contains great features. very altruistic and nice :)
Thanks for the guide, used floating share bar to replace the bloated addthis I had been using previously. Nice one!
Why did I not find this blog earlier? Tried to do the same thing and almost threw my computer out of the window. Now everything is clear! Thanks
I have tried in my blog, but not running well, Why?.
Hi. Really nice post. There’s lots of these social sharing tuts FLOATING around :) But your one is definitely one of the best I’ve seen. Thanks for sharing :)
Works. Stumbled upon using display:block to get box to position itself alongside content without scrolling. Thanks.