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:
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?
Download my 2 free e-books and 2 free MP3s on running an online business & getting clients
Plus a list of my 12 favorite resources for online business
First published: February 13, 2012. Last modified: April 3, 2014. Filed Under: Design, Social media Tagged With: buttons, css, html, positioning, sprites