Social Media CSS Sprite Tutorial

I'd like to thank Amy Vitale for making these nice Social Media icons!

This is going to give you sweet Social Media Icons for your links to them.

Step 1:

In order to implement these on your website you will need a few things first. 

Go to http://www.amyvitale.com/ and download the Social Media Icons.  We are going to use the SocialIcons.gif file that is found in the SocialIconCartoons folder (you will see this when you unzip the downloaded file).

Step 2:

Set up your folder hierarchy so the image (SocialIcons.gif) sits inside a folder called "images."  If you understand basic CSS, I'm sure you realize you can place the image where ever you want essentially.

Step 3:

Copy this code to your css file or the head of your html file. 

#socialicons li {
    margin: 0;
    padding: 0;
    list-style: none;
    background-image: url(images/SocialIcons.gif);
    background-repeat: no-repeat;
}
    
#socialicons li, #socialicons a {
    width: 40px;
    height: 90px;
    display: block;
    float: left;
}

.bebo {              background-position: -18px  -21px;}
.deviantart {        background-position: -85px  -21px;}
.mobileme {         background-position: -148px -21px;}
.designfloat {         background-position: -219px -21px;}
.reddit {             background-position: -284px -21px;}
.stumbleupon {        background-position: -351px -21px;}
.yahoo {             background-position: -416px -21px;}
.flickr {             background-position: -482px -21px;}
.google {            background-position: -549px -21px;}
.mixx {             background-position: -622px -21px;}
.myspace {            background-position: -680px -21px;}
.delicious {         background-position: -747px -21px;}

.viddler {          background-position: -18px  -140px;}
.qik {                background-position: -85px  -140px;}
.netvibes {         background-position: -148px -140px;}
.aol {                 background-position: -219px -140px;}
.linkedin {         background-position: -284px -140px;}
.blogger {            background-position: -351px -140px;}
.twitter {             background-position: -416px -140px;}
.digg {             background-position: -482px -140px;}
.designbump {        background-position: -549px -140px;}
.squidoo {             background-position: -622px -140px;}
.microsoft {        background-position: -680px -140px;}
.apple {             background-position: -747px -140px;}

.slideshare {          background-position: -18px  -262px;}
.misterwong {        background-position: -85px  -262px;}
.amazon {             background-position: -148px -262px;}
.appstore {         background-position: -219px -262px;}
.lastfm {             background-position: -284px -262px;}
.msn {                background-position: -351px -262px;}
.wordpress {         background-position: -416px -262px;}
.tumblr {             background-position: -482px -262px;}
.vimeo {            background-position: -549px -262px;}
.googletalk {         background-position: -622px -262px;}
.facebook {            background-position: -680px -262px;}
.retweet {             background-position: -747px -262px;}

.yelp {              background-position: -18px  -380px;}
.slashdot {            background-position: -85px  -380px;}
.virb {             background-position: -148px -380px;}
.yahoobuzz {         background-position: -219px -380px;}
.posterous {         background-position: -284px -380px;}
.friendfeed {        background-position: -351px -380px;}
.behance {             background-position: -416px -380px;}
.youtube {             background-position: -482px -380px;}
.skype {            background-position: -549px -380px;}
.email {             background-position: -622px -380px;}
.rss {                background-position: -680px -380px;}
.sharethis {         background-position: -747px -380px;}

.technorati {          background-position: -18px  -501px;}
.podcast {            background-position: -85px  -501px;}
.picasa {             background-position: -148px -501px;}
.paypal {             background-position: -219px -501px;}
.friendster {         background-position: -284px -501px;}
.bing {                background-position: -351px -501px;}
.googlebuzz {         background-position: -416px -501px;}
.newsvine {         background-position: -482px -501px;}
.ebay {                background-position: -549px -501px;}
.feedburner {         background-position: -622px -501px;}
.metacafe {            background-position: -680px -501px;}
.drupal {             background-position: -747px -501px;}

Step 4:

Implement this css file into your html by calling it's class.

<ul id="socialicons">
        <li class="slashdot"> <a href=YOUR_LINK_HERE"></a> </li>
        <li class="facebook"> <a href=YOUR_LINK_HERE"></a> </li>
</ul>

Because this is using one big image (SocialIcons.gif) as a CSS sprite, you will save on loading time and http requests for your user.  And being this file is only 78kb, it's going to load in a flash.  :)

Using this method will give you links like the one in the footer of my site (other than the drop shadow).