TUTORIAL: How to add social media chicklets (icons) to your blog

This week for Work Wednesday I am going to share a tutorial on how to add social media chicklets to your blog. These are also sometimes called icons, buttons, and numerous other things. The gist is they are the small images with the different social network logos on them that you put on your blog and link to your accounts on those networks. This makes it easy for your readers to find you everywhere!

You can see my chicklets on the upper left side of my blog (and below is a screen shot of that). Having them all together in a very visible part of your blog makes it much easier for not only your readers, but also for brands who may be interested, to find you.

TUTORIAL: How to add social media chicklets to your blog

  1. Make or download a set of social media chicklets you like. You can search for them and easily find many. DeviantArt has a nice selection available. If you can make your own graphics just take a look at the others to get an idea. You want the set to be cohesive. If you have a blog designer ask how much they would charge to create a unique set that matches your theme.
  2. You need a chicklet for each network you want to connect to. Make it the ones you really use. I include Facebook, Twitter, Instagram, Pinterest, Google+, Foursquare, FoodSotting, YouTube, LinkedIn, and also chicklets for my RSS feed/subscription and email.
  3. Gather your personalized links to your account for all the networks you are going to include. For example, on Twitter my link is: http://twitter.com/RobynsWorld I just open notepad and make a list of all of them.
  4. Upload the chicklet images to your server just like you do other images. Make note of the file location on your server – you will need this for the easy HTML code. To make your life easy, add these links to the same notepad of your links from step #3.
  5. Now you are going to do some simple HTML coding. You have probably already learned how to make an image link to a url. That is exactly what you will be doing here, but multiple times. For each chicklet you will do this
  6. Repeat this until you have it done for all of your social networks you want to add. Save the file.
  7. Now you are going to put the code on your blog. For most of you this will probably be in your sidebar. Just add a widget of plain text where you want it. Now copy and paste all the code you have from the previous step into that plain text widget and save.
  8. Take a look at your update blog to see how it looks. You can add <br> tags to break a link to move down. Rearrange the chicklets in the order you want, just make sure to get the complete code for each. If you want them all centered use the <center> and </center> tags at the beginning and end of the block of code. Save again and view again until you have them looking like what you want.
  9. Open in new pages – I have just about all of my external links opening in a new page. This is easy to do by adding target=”_blank” in the href tag
  10. Adding alt text – Another easy step, in the img tag you will include alt=”your text here”
  11. Restricting size – If need be you can restrict the size by adding that in the img tag also such as width=”25”. This measurement is in pixels.
  12. Border Size or No Border – another tag to add in the img area. border=”0” is no border, border=”1” (or any other digit) will make a progressively larger border around your chicklet.
  13. Here is a bit of my actual code. I highlighted one chicklet coding in yellow – it is for my RSS feed.

chicklet coding


That really is all there is to it! I promise it really is not that hard to do at all.

Feel free to ask me questions!