I am a fan of the Sociable plugin for WordPress. It's very effective and customizable however it's another plugin that must be installed and maintained. I love integrating functionality directly into the WordPress theme. One of my biggest gripes with sociable is the default image sprite. The default icons are small and ugly. You can choose not to use the image sprite and specify a directory that contains properly named PNG files, but each image is another HTTP request on your server. If your keen you can make your own image sprite and type in the new X and Y coordinates into the sociable.php file. Unfortunately you will have to keep maintaining the the file every time you upgrade Sociable or you could make your own version and integrate it into your theme.

1. Find your icon set

   Smashing Magazine have a terrific article: 50 Beautiful, Free and High-Quality Icon Sets. For this article I am going to reference the Handycons which I am currently already using on this site.

2. Create your social media sprite

   

   Handycons by Janko (Click for full size)

   If your not sure how to create image sprites, I suggest you have a look here. I find creating sprites with Adobe Fireworks to be the easiest because you can calculate the X and Y coordinates much easier using the Properties panel. For an effect I have selected all the icons in the first X coordinate and chosen and opacity of 70%. This is so I can easily create a hover effect for my icons. I have also used PNGCrush to reduce the size of the PNG file.

3. The CSS

   Here is an example of the CSS code used currently in this site:
   

   .rss, .rss:hover, .twitter, .twitter:hover, .facebook, .facebook:hover,
   .linkedin, .linkedin:hover, .flickr, .flickr:hover, .email,
   .email:hover, .delicious, .delicious:hover, .google, .google:hover,
   .reddit, .reddit:hover, .digg, .digg:hover, youtube, youtube:hover {
   background:url('images/social.png') no-repeat;
   display:block;
   width:48px;
   height:48px;
   cursor:pointer;
   border:0
   }
   .rss {
   background-position:0 0
   }
   .rss:hover {
   background-position:-48px 0
   }
   .twitter {
   background-position:0 -48px
   }
   .twitter:hover {
   background-position:-48px -48px
   }
   .facebook {
   background-position:0 -96px
   }
   .facebook:hover {
   background-position:-48px -96px
   }
   .linkedin {
   background-position:0 -144px
   }
   .linkedin:hover {
   background-position:-48px -144px
   }
   .flickr {
   background-position:0 -192px
   }
   .flickr:hover {
   background-position:-48px -192px
   }
   .email {
   background-position:0 -240px
   }
   .email:hover {
   background-position:-48px -240px
   }
   .delicious {
   background-position:0 -288px
   }
   .delicious:hover {
   background-position:-48px -288px
   }
   .google {
   background-position:0 -336px
   }
   .google:hover {
   background-position:-48px -336px
   }
   .reddit {
   background-position:0 -384px
   }
   .reddit:hover {
   background-position:-48px -384px
   }
   .digg {
   background-position:0 -432px
   }
   .digg:hover {
   background-position:-48px -432px
   }
   .youtube {
   background-position:0 -480px
   }
   .youtube:hover {
   background-position:-48px -480px
   }
   

4. The HTML

   Style it as a horizontal list. I am using it in single.php before the comments section.

   RSS

   <a class="rss" title="Subscribe to RSS feed" rel="nofollow" href="&lt;?php bloginfo('rss2_url'); ?&gt;" target="_blank"> </a>

   Email

   <a class="email" title="Email Article" href="mailto:?subject=&lt;?php the_title(); ?&gt;&amp;body=&lt;?php the_permalink() ?&gt;"></a>

   Facebook

   <a class="facebook" title="Facebook" rel="nofollow" href="http://www.facebook.com/sharer.php?u=&lt;?php the_permalink() ?&gt;&amp;t=&lt;?php the_title() ?&gt;" target="_blank"> </a>

   Delicious

   <a class="delicious" title="Delicious" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url='+encodeURIComponent('&lt;?php the_permalink() ?&gt;')+'&amp;title='+encodeURIComponent('&lt;?php the_title() ?&gt;'),'delicious', 'toolbar=no,width=550,height=550'); return false;" rel="nofollow" href="http://delicious.com/save"> </a>

   Google Bookmarks

   <a class="google" title="Google Bookmarks" rel="nofollow" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&lt;?php the_permalink(); ?&gt;&amp;title=&lt;?php the_title(); ?&gt;&amp;annotation=&lt;?php the_excerpt(); ?&gt;" target="_blank"> </a>

   Reddit

   <a class="reddit" title="Reddit" rel="nofollow" href="http://reddit.com/submit?url=&lt;?php the_permalink(); ?&gt;&amp;title=&lt;?php the_title(); ?&gt;" target="_blank"> </a>

   Digg

   <a class="digg" title="Digg" rel="nofollow" href="http://digg.com/submit?phase=2&amp;amp;url=&lt;?php the_permalink(); ?&gt;&amp;amp;title=&lt;?php the_title(); ?&gt;" target="blank"> </a>

There are obviously many more sites that can be possibly be added. WPBeginner has started a cheat sheet. This strategy will save on HTTP requests and optionally add a hover effect without JavaScript Pre loading. Perfect for optimising your site for speed

Tags: Information, SMO, Tutorial