If you are reading this on my blog you’ll notice 7 beautiful grayed out social media icons on the right side of the header which turn into color when hovered over. This article explains how to create them. However, if you’re looking for an article about how to create social media share buttons (Tweet, Like, etc.) in HTML and CSS – click here.
I seem to be getting more and more traffic from these various social media avenues so it makes sense to fill up that empty space with them – even though I’ve always had them in the sidebar.
Think speed!
As you will already know, Google takes loading speeds into account when ranking pages. Also, I hate waiting for sites to load. So I wanted to create these header buttons with a minimum amount of HTML, CSS and, more importantly, HTTP requests.
Here I have 7 social media icon images and all of them have rollover states. That means there could potentially be 14 HTTP requests for images just for these little buttons. The images themselves maybe small but it’s the separate requests to get the images that can severely increase page load.
So how do we cut down those image requests? Simple, by creating one big image.
Say hello to my best friend – the image sprite
Here is the image sprite I used to create the social media buttons and their hover states:
As you can see a sprite is one big image that can be shifted around to only display parts of it at particular times. Here each button is 32 pixels by 32 pixels. They are put right next to each other so that there is no space in between – this makes it easier later on when you do the CSS positioning.
And you can click here to download the PSD so you can rearrange the icons and add more yourself!
HTML for the social media buttons
As I’m using the Genesis theme for WordPress (that’s an affiliate link), I enter the HTML into a text header widget.
Here is the HTML:
<div id="head-soc">
<ul>
<li id="g"><a href="">Google+</a></li>
<li id="rss"><a href="">RSS Feed</a> </li>
<li id="sub"><a href="">Subscribe</a></li>
<li id="fb"><a href="">Facebook</a></li>
<li id="twit"><a href="">Twitter</a></li>
<li id="li"><a href="">LinkedIn</a></li>
<li id="youtube"><a href="">YouTube</a></li>
</ul>
</div>
As you can see that is just a simple HTML list for each social media item and each list element has it’s own ID (this is for the CSS positioning). I’ve taken the links and the titles out so you can see what’s going on.
CSS for the social media buttons
And now here comes the clever bit.
#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(images/social-media.gif) no-repeat; display: block;}#head-soc li#g a {background-position: 0px 0px;}
#head-soc li#g a:hover {background-position: 0px -32px;}#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}
As you can see, the CSS imports the image “social-media.gif” just the once and then alters the position of the image within the 32 pixel square space to show the correct button.
Social media buttons in the header
So why am I putting them in the header when they’ve always been in the sidebar? I’ve learned through testing websites over the last few years that being obvious works: a big button is much more likely to be clicked than a small one.
When I find a good website, I usually look for the Twitter link. If I really like what they’re doing I’ll sign up for newsletters. If I can’t see where to do this within one second, I’ll leave, maybe never to return!
So, I’ll hopefully get more followers on these social sites – I’ll let you know if I do or I don’t.
Finally here is the list of buttons. Why don’t you join me in one of these places? 
- Google+ This is the social network which has the greatest trajectory for improvement. Google rules the search engines so it’s going to try to push this social network as far as it can. I write quite a lot here, contribute to discussions, arrange hangouts and post my latest blog posts
- RSS Feed You can subscribe to all my blog posts by a feed-reader such as Google Reader
- Subscribe Here you can subscribe to my newsletter and get a free copy of my e-book “How to Market Yourself Online”
- Facebook This is really coming along, we’re having great discussions and I post my latest posts here as well
- Twitter Here I tweet out my latest stuff plus all the stuff I read everywhere. I can tweet up to 10 times a day!
- LinkedIn This is my LinkedIn profile. But I love LinkedIn Groups and I have one called Niche Site Marketing
- YouTube This contains about 50 tutorial videos about web design and internet marketing – more to come here soon!
What do you think?
Do you have social media links in your sidebar or header? How did you create them? What do you think of mine? Are they the right shape and in the best position?
Thanks for the resource Rob; the buttons look quite good up there in the corner. I’ve used this method before on a previous blog template, and the method works really well. Having only one image to load is a big bonus in regards to page loading time as you know
Thanks Andrew! We’ll see if it makes any difference. At the very least it’s filled the space up there!
Rob,
How do I get these to work on my website?
Upload the image and add the code, Alex.
Pretty nice. I also used Digg-Digg
BufferApp just aquired that plugin, hope they’ll keep it free…
We shall see, Bill, thank you.
Love this idea. Reducing the load by having one image is great. I have been looking for a solution to get rid of all those sidebar buttons. Social media networking is important, but using that sidebar for a call to action is where I want to move to. Thanks for the tutorial.
Thanks, Sue, yes I think a lead capture / newsletter signup should be most prominent in the sidebar.
Thanks for the inspiration Rob. I’m going to implement this right away. Love the brain image too!
That’s great, Chris. You’ve got to be pixel perfect for this one! Drop me a line if you want the PSD or vectors I used to recreate it.
The brain image is a phrenological map. I used it in a client job and adapted it for social media – so not my original idea, more’s the pity!
thanks, exactly what i needed!
Glad it helped!
thankss
pleasure!
If only I could get this for my blogger website! I am in love with those social media buttons in the header!
If I were you, Vidya, I would move to a self-hosted WordPress.org blog.
Rob, I did.
(I heard you say “about time..”)
I’ve been enjoying the great conversation here.
Cheers!
Oh, so pleased to hear you’ve gone over to WordPress, Vidya. Yes, there are some great people here that help me out with the comments. I can’t thank them enough.
Hi Vidya, I too have a Blogger blog and have found a way to add personalised icons. Please see via the link at the bottom of my comment. It worked quickly and easily for me, hope it does the same for you.
Rob, Thanks for your post. Unfortunately I’m not with WordPress, so I hope you don’t mind my giving advice to Vidya (albeit 7 months later
Happy blogging
B
http://www.adventuresasasmalltownmom.com/2011/03/how-to-add-social-media-icons-in.html
Thanks for this, Bisera. I hope Vidya sees the link. Much better advice than I gave!
Glad the Blogger tutorial worked well for you, Bisera!
Meg
I use these (they also have a pinterest icon)
Its a simple plugin and they look ok ..also free
http://wordpress.org/extend/plugins/floating-social-media-icon/
That’s great Dave, this method would involve less calls to the database and therefore make your site load faster rather than using a plugin.
How do I get these icons to work on my website? I typed in the HTML code and it worked, hoewever, I cannot seem to get the CSS to work for the buttons. Is there a specific place the code needs to be placed?
Alex, use Firebug for Firefox or Chrome Developer Tools to trouble shoot the issue. Maybe you didn’t source the image correctly?
I’m using wordpress for my site. So i was entering it as a footer widget.. Is there any way to do it like that?
Yes, enter the HTML in a text widget (obviously you have to amend it to include your links). Paste the CSS into your theme’s style.css and put the image into your themes /images/ folder. Let me know if you don’t know how to do any of that.
why right to left?
I’m a lefty. We’re like that.
This is a really great tutorial, but the theme I am currently using doesn’t support widgets in the header. Is there another place, like a certain file in the theme, where I can insert the html?
Thanks!
EA
Oh! I figured it out. I put the html code in my header.php file and it worked like a charm! Thanks so much!
I would have said that, Buddy, but you beat me to it! Glad it worked for you.
Many thanks for posting this, great resource!
No problem.
Hi,
Many thanks for your great tutorial, its so much better than adding a plugin
Just wondering if you cuold push me in the right direction. I am using headway framework and ive added the raw HTML and added the CSS. But the CSS does not seem to working.
thanks in advance
Hi Charles, glad you found it useful. I’m afraid it’s really hard to say why your CSS isn’t working without seeing the site. Do you have a URL? Otherwise, view the page source and see if the CSS file that is being called in the head has the relevant declarations. It’s possible that you pasted the CSS into the wrong CSS file.
thanks Rob,
I found the issue, I had to add the CSS above all my other CSS. not sure why.
Glad you got it sorted, Charles.
Ron,
I’m on board with your philosophy of reducing the server burden. People don’t realize that such a tiny change has big effects when repeated thousands of times a month.
However, I’m having a problem with using your gif file:
I did it exactly as in your tutorial here, but I keep getting bullet points showing up next to the icons when I try to re-position them in the style sheet or widget. At first, the icons are flush with the top of the page, and I want to move them down and to the left. I’m using a Genesis theme, and it supports widgets in the header. So, how can I position the icons and get rid of the bullets?
John
Hello, John, thanks. I don’t know why you’re getting bullet points as
#head-soc ul li { list-style: none; }should take care of them.Also, I’ve noticed that
#head-soc ul li { padding: 23px 0 0 23px; }isn’t taking effect and does if you add an!importantdeclaration#head-soc ul li { padding: 23px 0 0 23px!important; }that puts them down a little bit and spaces them out more.#head-soc ul { margin: 20px 20px 0 0 ; }should move them down and to the left. As would#head-soc { margin: 20px 20px 0 0 ; }I think.Anyway, play around with the CSS a bit. The problem’s not with the GIF file.
Very Nice, Ron.
The !important declaration did the trick and got rid of the bullet points. Just one little change in the css style sheet fixed it.
Here’s exactly what worked to remove bullet points:
In the very top line of CSS code above,
Instead of this:
#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
I did this:
#head-soc ul li {list-style :none !important; padding: 0 0 0 12px; float: right;}
By adding the !important declaration, it took effect. Now, the social icons are working the way I want.
Thanks for the help, Ron.
John
Thank you, John. My name is “Rob”.
Sorry… Too many lines of code
Thank you, Rob.
John
Hi, can this work without using WordPress? I would like to create a hand-coded website and add a social media section.
Hello, James, yes, absolutely this will work without using WordPress. It’ll work on any website.
Hi Rob,
Thanks a lot for this full explanation. However, the icons don’t appear on my website’s header (as you can see on craime.com). I followed step by step your directions but I think the problem is related to my style sheet.
If you had a moment to take a look at this, I can’t doubt it would be helpful.
Thank you once again,
Charly
Hello Charly, this is actually my fault for not putting the code into a proper code style – which I have now corrected. The double quotes in the HTML (“) haven’t copied properly and are curly. You need to put them through TextEdit (Mac) or Notepad (PC) to turn them into plain text quote – straight not curly. http://dan.hersam.com/tools/smart-quotes.html
OK, it works! I though I had checked this point…
Thanks a lot Rob for your quick answer.
Charly
Tried everything as above but my image does not show up
You need to use Chrome Developer Tools or Firefox Firebug to troubleshoot the issue and come back to say specifically why it isn’t working. I can’t help you with the minimal information that you’ve given. Or send a link of the site.
Love it! Although I would like to add Pinterest, and maybe a custom button for a blog or otherwise…. I’ll probably just end up doing it myself, but great job!!!!
I did some more of these, Dennis, but I added a podcast icon and a Skype one but not Pinterest. Sorry!
That’s too bad…. If you had the ambition (since you’ve done it before) i’d be forever in your debt if you wanted to make a Pinterest one. I could start a chant and get people on the blog to join in!
I’m sure other people would love it as well….. The code you created is awesome — never would have thought of doing it that way – but you’re a genius. Mad props! (i dont think i’ve ever said mad props before!)
Thanks for your “mad props”, Dennis
If I do it again, I’ll include a Pinterest icon, I promise. And I’ll come back here and tell you. 
Thank you! I’ll paypal you money for a beer!
Also – maybe make one or two options blank so someone could just edit the PSD (or png, …) and write in what they want. For example I need one for a specific website that does have an icon – it’s just not a popular website. I’m thinking of taking your image and dropping the ones I don’t use by super-imposing one that I need….. I’m not the best with CSS (i know enough to be dangerous) and i just don’t want to hose everything up!
Hi, Dennis, you can open up the PSD and go Image > Canvas Size… to create a larger image to incorporate more icons. I’ve send you the new version by email.