Freebie Social Media Icon Menu

There are a few blogs I follow pretty closely, and one of them predictably is Brian Gardner’s (predictably because he’s behind Genesis and I’m a bit of a fan). A while back Brian put together a tutorial about making a social media icon menu – I took it on board, I like rolling my own social icon displays and didn’t want to load up my site with plugins that always seem to miss that one social network I want people be able to get to.

So, given that I’m putting together a new ‘site image’ for rolling out new sites quickly and easily (that’s a post for another day) I thought I’d make up the CSS that will put a whole lot of social media icons at my finger tips for making out social icon menus/links for my clients.

There are any number of free social icons sets out there and I found that this one that was pretty comprehensive… Thanks to Orman Clark from PremiumPixels.com for making them so freely available! I’ve added in a couple of my own in his style as well (pinterest, getglue, and viggle) just because there’s ALWAYS one you want that isn’t there!!

I don’t really want to go too deep into the nuts and bolts of how to do this, it’s more of a giveaway than a tutorial… but you can get the gist of the tut if you like from Brian. However, the method briefly is as follows …

1. Create a Menu called Social Menu (in Appearance >> Menus) (if you don’t call it this the css won’t be accurate… if you do call it something else, change the css id selectors accordingly).
2. Create External links in your menu for the social sites/profiles you want to link to.
3. Add a class to each link in the menu (Here’s a how to, just in case you’re unsure). For ease of use the classes are all the names of the social sites… facebook, twitter, linkedin – all lower case, all conjoined words… no spaces.
4. Add the Custom Menu to a widget area.

Now, I’m presuming at this point you’re using Genesis… if you’re not then you may need to tweak some of the selectors in the CSS to suit how your theme is structured. In my version I’ve tweaked the CSS that Brian provided so that you could put this Custom Menu in any widget area, Brian’s was focused on the header.

The other thing I’ve done is created a sprite of the icons, rather than having a whole lot of individual images slowing down your site with erroneous http requests… this is a.good.thing to do, you should do this with all the repeating images you use on your sites. (If you don’t mind me saying so, it’s quite pretty isn’t it (in an early 90’s webdesign kind of way)!!)

Here’s the CSS code for your stylesheet. Yes, it is very long.. there are a lot of icons to account for (actually there are two or three on that image that I don’t have css for (email, share this, add this) you can write CSS for those if you think you need it. You don’t have to use all of them, and if there are ones you definitely don’t need you can take out the relevant lines of css to no ill effect.

Get Straight to the Good Stuff

Finally, below is a zip file of all the above PLUS the PSD file for the sprite, just in case you need to add others images.

EDITED::

Following on from the above I was approached by Peter Wilson with an offer of alternate code that reduces the volume of CSS required to pull off exactly the same results.

I was floored.

I’ve heard Pete talk about CSS specificity before and he makes me acutely aware of a huge gap in my knowledge in the area, so I’m prevailing on him to write up a blog post about it for everyone’s benefit (I’ll let you know when it’s done). In the meantime I’m posting his revised code below, I’m sure you can see just how much cleaner and easier it will be to manage the code when this is what you’re looking at instead of the code above (I’ve left it up there for reference).

Get the Totally Revised Good Stuff

By the way, the basics of this will work on any site with custom menus even though the css in this is a bit genesis specific. You’ll just have to edit some of the code to reflect the ids in your theme.