How to Add Social Media Icons to your Blog

As I mentioned in the previous post, I was inspired and energized by the most recent Blog Podium.  I am not quite ready to rush out and book advertisers, but I am making some changes with that possibility in mind.  One of the points made at Saturday's session that stuck with me was the importance of having a professional-looking blog.  I have started compiling a list of blogs that I feel strike the right balance between personality and professionalism for inspiration.  For me, this means above all clean, un-cluttered, organized, and easy to navigate.

Another important piece of advice was to stay well-connected to the community you are in and be able to demonstrate that you have your own little niche of expertise.  Blogger makes it easy to link up to your other social networking profiles with widgets and gadgets in your blog's sidebar, and I already had many of them in place.  However, I love the look of a simple self-explanatory row of icons, so over the past couple of days I added this at the top of my sidebar:

It connects readers directly to a whole bunch of my other profiles but uses a minimum of real estate.  Win-win!  It was easy enough to do, but I ran into a few snags, so I thought I would outline the process here in case anyone else wanted to do this as well.  (There are many other tutorials out there if mine is confusing!)

1.  Find your favourite icons, or make some yourself in Photoshop and save as a .png file.  I got mine from the lovely Carrie Loves blog, where she has a ton of colours.  Isa Maria of The Academy also did a lovely series based on the Pantone colours of the year.  For MANY more options, you can google "Social Media Icons."  Once you find the ones you want, save them to your computer.

2.  Upload your png files to Flickr or Photobucket.  I didn't want these to show up in my Flickr stream, so I signed up for Photobucket and highly recommend it!  To get the URL for each image, which you will need later, you just need to hover over the image and then click on "Direct Link" which makes it super easy.  I will definitely be using Photobucket again!

I ended up uploading my icons three times, because the size I downloaded from Carrie was much too big and it took me a couple of resizes in Photoshop to get the size I liked!  You may want to start with one to see how big it is and then adjust them.  In the end mine were 28 pixels x 28 pixels.

3.  Add HTML gadget to your layout.  To do this, look up to the right hand corner on your Blogger dashboard and go to Design, and on the screen below click Layout, then Add a Gadget.

Scroll down the provided list until you find the HTML/JavaScript widget.

4.  Once you have the gadget open you can add the following code for each icon:

[a href="YOURSITEURL" target="_blank"][img src="YOURIMAGEURL"][/a]

If you copy and paste the above code, you will have to change the brackets:
replace [ with < and ] with >
(I couldn't figure out how to type code into my post without it turning into a broken link!)

(It would probably be helpful to actually write all the code in Text Edit and copy it into the content section of the HTML gadget instead of flipping back and forth to the different sites and the gadget window like I did!)

Now when I did this, everything looked fine in the code, but when I tried to click the link it added www.wickedandweird.com to the beginning of the address and wouldn't work.  I could not figure out why it was doing this. Drove. Me. Batty. After much searching online, I discovered that it was because the quotation marks I had copied in the code were curly quotes and not straight quotes. Go figure.  So make sure you have straight quotes in your code!

5. Repeat the above code for each site and each matching image until you have them all.

6. Remove all the other social-media-linking gadgets you had cluttering up your sidebar and admire your new streamlined blog.

7. Pour yourself a drink.

I hope that makes sense - leave me a comment if I have left something unclear!

FYI - the target="_blank" part means the link opens in a new window or tab.  I was going to go back and add this to all my links, since the all seem to drive traffic away from Wicked & Weird - and I have a lot of links!  Then I noticed in writing this post that there is a little box you can check when adding a link that says "open in a new window"...  duhhhhhhhhhh!!! Better late than never I guess. :)