Build an Online Business Brand with Personal Freedom | Rob Cubbon

How to grow an online business by communicating with an audience, selling products and earning passive income

Social Media Profile Links – HTML and CSS

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.

phrenology map social-media-mind

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.

social-media-header-buttons

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:

social media icons

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.

social-media-psd

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.

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

  • 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

two free books and two free mp3s and a list of favorite online tools

Filed Under: Design, Social media Tagged With: , , , ,

Comments

  1. Andrew Kelsall says

    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 🙂

  3. Sue Surdam says

    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.

    • Rob Cubbon says

      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!

    • Rob Cubbon says

      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.

      • Alex S says

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

            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?

            • Rob Cubbon says

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

  10. E.A. Clausen says

    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

  12. Charles says

    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

    • Rob Cubbon says

      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.

  13. Charles says

    thanks Rob,

    I found the issue, I had to add the CSS above all my other CSS. not sure why.

  14. John Broberg says

    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

    • Rob Cubbon says

      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 !important declaration #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.

  15. John Broberg says

    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

  16. James Simms says

    Hi, can this work without using WordPress? I would like to create a hand-coded website and add a social media section.

  17. Charly Rege-Turo says

    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

    • Rob Cubbon says

      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

    • Rob Cubbon says

      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.

  20. Dennis Crawford says

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

      • Dennis Crawford says

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

        • Rob Cubbon says

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

          • Dennis Crawford says

            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!

            • Rob Cubbon says

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

  21. Tylendis says

    Hi Rob,

    Tnx for this gr8 article! its working perfect. Had to put a z-index-1 on my banner div to work but not a big issue 🙂

    Was wondering if u were planning to expand your current social media icons with Instagram? Its pretty hot and lots of ppl asking for it.

    Cheers,
    Tyle

    • Rob Cubbon says

      Hi Tyle, thanks for the heads-up on the z-index. I am planning to extend it and turn it into a plugin for WordPress and, when I do, I’ll include Instagram – as you say, it’s very popular.

      🙂

  24. rhone says

    Hi there,
    Great content you made here. I added this to a site I was working on, but I wanted to make one of the buttons with a SoundCloud icon. Couldnt figure out how to edit the vector smart object. If you have time, could you perhaps explain how you made that Photoshop file?

    Thanks.

    • Rob Cubbon says

      Hi rhone. You don’t really need to edit a Vector Smart Object in order to add another icon. You just need to extend the PSD (Image > Canvas Size) and add a colour and black-and-white icon to it and then creates another list item and another bit of CSS for it. Please let me know how you get on.

      • rhone says

        Cool, Rob, I ended up just clicking edit and it opened in illustrator and was able to create a new one. Thanks for the reply and the tutorial, this is a really badass way to make social links!

        • Rob Cubbon says

          Yes, that’s the best way to do it. Create in Illustrator and then paste as Vector Smart Objects, that way they remain as vectors and can be edited in Illustrator by double clicking in the Layer’s palette.

    • Rob Cubbon says

      What do you see in the CSS when you test with Developer Tools, Liz? It’s most likely that the image path “images/social-media.gif” is wrong or the image has been put in the wrong place. But I can’t be sure without seeing it. Feel free to email me.

  26. Peter says

    I have decent comprehension of how CSS and HTML work, but generally work in a WYSIWYG program that avoids coding, but allows its use through the ability to add page and page element markup, but not CSS style sheet markup. In this context, I’m looking forward to getting this to work, then tweaking it a bit, and have two specific questions:
    – The CSS goes on each page this is used, between style tags, which in turn go between the head tags, right?
    – Probably a dumb question, as no one else has asked it, but: Where can I find the links and titles you stripped out of the HTML? I can see a bit of the Google link in the photo you show where you are entering data into your WordPress widget. I looked at your other linked article about social sharing buttons to pick up this code, but saw the Google + didn’t have an href so figured this must be different.

    • Rob Cubbon says

      Hello, Peter, yes you can put the CSS between style tags in the head of every HTML page if you wish. Alternatively you can add the CSS to your already-existing style.css or CSS file that is called in the head of every page already (assuming that it is). It will look something like this:

      <link rel='stylesheet' href='http://yoursite.com/path/to/style.css' type='text/css' media='all' />

      Secondly, where to find the social media profiles? You need to set up profiles at these various social media sites like Google+, Twitter and Facebook and then link through to your profile page.

      Does that answer your questions?

Recent articles

Recent articles

Download free stuff

Learn how to develop a successful website that brings customers to your business

2-e-books-sidebar

Sign up for my newsletter and get free How to Market Yourself Online and Starting An Online Business e-books, two MP3s on online business as well as a list of my favorite resources.

Your privacy is respected.

HELLO! WHAT'S YOUR EMAIL?X

It's nice to meet you! I'd love to send you exclusive content that you can't find anywhere else on the blog, and I'll send you free ebooks and MP3s to help you with your online business as well!

Enter your email below, and I'll see you on the inside!

Email is invalid! Please try again.
Sorry, you can not subscribe at this time.