Ask Candy: Adding Social Media Icons to Your Sidebar

Hey there, it's Candy! I've got another web design question from Lindy of Crafted by Lindy.

I found this website, I want to use some of the icons on my blog but I'd like to know how to add them to my blog in a horizontal line. The site says to right click and save each one...okay but how do I then add them to my blog so that each will have it's own link and on a horizontal line so that they'll look all cool (like on the A La Mode Stuff blog). : )

I tried to find the answer on my own but I don't know what lingo to use in order to find an answer. I hope you're not sick of me yet! Thanks for all your help.

Lindy, I totally get where you are coming from. Often times, web stuff is written by people who know so much more, they leave out the most simple bits that would make everything clear to folks like us. :-) Anyway, the answer to this one is quite easy...the hardest part is choosing the icons! That site you were so interested the icons is just the tip of the iceberg - take a look at some of these. There's nothing magical about these icons, they're all just pictures. You could even make your own if you like. What you need to do is put them in sidebar gadget/widget that allows you to include html and link them to what you want to link them to (your facebook page, twitter profile etc...). These icons usually comes in many sizes, you may need to resize them, this can either be done with a photo editing program, or you can tweak the sizes within the widget itself. The icons I use were 50 pixels wide, and my sidebar is 180 pixels wide, so I kept decreasing the size of the icons in the html until they all fit in one line!

Here's the code from my social media widget (showing the code for only the 1st two icons):

[note from Linda:  for Blogger users, you'd 'add a gadget' to your sidebar or wherever you want to place your buttons.  The code above (with your specific info) would be placed in the 'HTML/javascript gadget' box.] 

 In between the first < > is the code you need to link to your twitter profile (for example). I've explained each bit below

• a href ="http://yourlink.com" -> this is the link
• title="Tweet me!" -> this is the text that will appear whenever someone mouses over the icon
• target="_blank" -> this makes your link open in a new tab
  

In between the 2nd pair of < > is the code for the image itself. You have to upload the picture itself first, and get the location of it.  [note from Linda:  you can host your photos on Photobucket if you don't have another place for them.  They offer a free account].

• img src="http://youriconuploaded.jpg" -> the location of your social media icon
• width="42px" -> the size I ended up needing to make all four fit in one line
  

And then at the end of it, a final (/a in between < >) (sorry, that's the only way to write that particular thing without resorting to wizardry to end the link.)

So, although they make it all confusing, it's really not! At least, I hope so! I find that in the beginning, HTML looks like so much gobbledy gook, but know that each bit of gobbledy gook has it's own purpose, and you have to string them all together in order to get the meaning you want (kind of like German!)

[Candy lives in California with her husband, 2 boys, and dog. Aside from being wife, mom, teacher, crafter, web guru and all around doer extraordinaire she manages her own business, Candied Fabrics. You can read her blog here.]