It’s getting so that the group of social media icons one can have on a website is just a bit unwieldy – having to size them all the same. Getting up the new one to see if it looks okay, etc.
For example, zencartdelia.com
There’s an easier way to do this work that I use on all the websites I work on. Instead of using the separate icon images, I create a background. The one to the left is 20 pixels high and 145 pixels wide.
After adding the Google+ button in, I decided this blog post was necessary because I ran into problems with that icon. Google+ says to use this for the icon:
<a href="https://plus.google.com/your number?prsrc=3" style="text-decoration: none;"><img src="https://ssl.gstatic.com/images/icons/gplus-16.png" width="16" height="16" style="border: 0;"/></a>
That rendered the icon the right height but for some unknown reason, the width was the entire width of the division. I don’t have a clue why but the easiest fix was to pull that image source out of the code – and then add the google+ button to the original background graphic. That worked.
One big advantage I’ve found doing this is that I get all my icons in a single file (I use Fireworks for web work so it’s a png file). If I need to alter the color/hues of the icons to make them work better together or with the website theme, then I can manipulate each one while being able to see them all at the same time. Having an image as a background always works well because the page doesn’t wait for it load – it loads behind the code instead.
So Step 1:
Create a background graphic with each icon spaced equidistant apart – 5 pixels works well.
Step 2:
Create a division such as socialMedia to put those icons into. It has to be the same width as the image plus those 5 pixels. In the example on the website, I have that division floated to the right.
#socialMedia {
background-image: url(../data/images/socialmedia.gif); background-repeat: no-repeat;width: 150px; float: right;
}
Step3:
Also, style the links for that division so that each a link is its own block the same size as each icon and with a margin to the right on each one.
#socialMedia a {
display:block; height: 20px; width: 20px; margin-right: 5px; float: left;
}
Step4:
The html then is just the division for socialMedia and the links without anything that is visible.
<div id="socialMedia">
<a href="https://plus.google.com/104193896260570553061?prsrc=3" target="_blank"></a>
<a href="http://twitter.com/deliawl" target="_blank"></a>
<a href="http://www.facebook.com/pages/Delia-Wilson-Design/92602374329" title="Delia Wilson Design" target="_blank"></a>
<a href="http://www.linkedin.com/company/delia-wilson-design-llc" title="Delia Wilson Design" target="_blank"></a> <a href="http://deliawilson.tumblr.com/" title="Tumblr Pictures" target="_blank"></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FromTheGuru&loc=en_US" title="Delia's Blog" target="_blank"></a>
</div>
That then reduces the amount of code in the source by using CSS instead of html for the images.
Don’t forget to add in the target=”_blank” as well on these. Any link that goes off your website should open in a new window.