How to Add a Row of Social Media Icons in Blogger (and possibly other platforms)

Last week I promised I'd share how I added those coffee (or hot beverage for the non-coffee drinkers) cup social icons to my sidebar. No one should have to spend the amount of time I did (searching for directions and subsequently screwing them up a hundred times) to do this on her own blog. It sucked.

So anyway, before I get started, I need to let you know some basic things I'm assuming:

• You aren't terrified of HTML. You don't have to know how to write code, but if you need a muscle relaxer and a brown paper bag to breathe into just looking at code, you should probably avoid this like the plague take a pass.
• You've found and downloaded to your computer the social icons that you'll be using. If you haven't, I'd start by googling "social media icons". There are hundreds of free ones out there, in every shape, size and design. They're simply image files that you'll later be adding links to. I got my coffee cups here.
• You know the URLs of the social media accounts you'll be linking to. (Hover over my coffee cups and you'll see example URLs.) If you don't have an RSS URL for your blog feed, you'll need to go to feedburner.com and create (burn) one.
• You know how to add a gadget to your blog.
• You have room on your blog to add a row of social icons. Hint: My coffee cups would be too large in a more narrow sidebar.

Before you start, open (in two separate windows):

Note: This procedure is written for Blogger; however, the basic mechanics might be adaptable to other blogging platforms.

• A new post in Blogger (the screen where you type your post). Open the Compose (not HTML) editor. 
• The Layout editor in Blogger (the screen where you can add gadgets and move things around). (Design > Layout)

In a nutshell: You will be creating a "dummy" post in Blogger, in which you'll insert your icon images and then link them to their corresponding URLs. Once that's done, you'll copy and paste all the HTML into a blog gadget, and then you'll have social icons on your blog. Yay! 

Unfortunately, it took me several hours to get my images to line up correctly. Don't be like me. 

From the New Post editor:

1. Insert your first icon image (original size, left justified*, make sure the "open link in new window" box is checked).
   Note: Use left if you're adding icons to a right sidebar (like mine). Use right if your sidebar is on the left.
2. Highlight the image and add a link. (You might need to click the Link button twice to trigger the add link pop-up box.)
3. Add the URL that matches the icon. (Ex: If the icon is for Facebook, add your Facebook URL.)
4. Without spacing, insert your next icon image.
5. Repeat Steps 2-3.
6. Repeat Steps 4-5 for each additional icon you are adding in the same row.
   Result: You should see all your icons (however, they will most likely not be lined up correctly - don't worry about this yet!).
7. Switch to the HTML editor. (You will need to move/delete some code to get the icons to line up in a flush horizontal line.)
   
   You need to get your code to look like this (click to enlarge):
   
   
   
   
   There should only be one set of justification tags (the code circled in blue) around all three images. Your top and bottom tags should look exactly like my example here. (To make the code easier to see, I inserted white space around the three different image examples.)
   Reminder: In the top tag, "left" can be changed to "right" or "center," depending on how you want the row justified.
   
   DELETE ALL THE EXTRA JUSTIFICATION TAGS (in between individual image code). Hint: Use Ctrl + F keys to search for the extra code. (Copy the code below when searching, if needed.)
   
   <div class="separator" style="clear: both; text-align: left;">
   
   YOUR IMAGE CODE GOES HERE
   
   </div>
   
   The only code (hyperlink tags) that should enclose each of your images is highlighted in yellow in the screen shot above. 
8. Switch out of the HTML editor (back to Compose) to check your image spacing.
   Result: Your icons should be flush horizontally, like this.
   
   
   
   
   If they are not, go back to Step 7 and recheck your code against my example.
9. Switch back to the HTML editor and copy all of the code.
10. Paste the code into a new HTML/JavaScript gadget window (click Add a Gadget from the Layout screen).
    Note: You can add a title if you like.
    
    
    
    
    Click SAVE.
    Click Preview, and hopefully, your new icons will show up beautifully on your blog!
    Drag your gadget to where you want it (hopefully, at the top of the sidebar).
    Click Save arrangement and you're all done!

~~~~~

This process really isn't complicated, but until you've had practice getting images to line up in a row using an HTML editor, the trial and error can make you want to pull your hair out!

For those who've stuck around to the end, I hope this helps! And if you wind up adding icons to your own blog once you leave here, please come back and say so in the comments so I can go look!

~~~~~

Coming soon (because this post is quite long enough): How to add a Pin it button to individual posts in Blogger and why I decided to join Pinterest!