How to Add Social Media Icons in Blogger

First off let me say that I am not an expert on Blogger. In fact I am quite the opposite - I am new to the blogging scene. For the past month I have been trying to figure out how to add Social Media icons to my blog. I would visit other blogs and be in awe of their cool social media icons. How did they do it?

It finally dawned on me that I could use similar steps that are based off a post I found from @moneysavingmom's site about creating your own blog header.

Hope this helps any other new bloggers out there!

1.Open a Photobucket account if you don't already have one. (Make sure your account is set to Public).

2. Download the social media icons you would like on your blog. Here a couple articles with really nice icons/icon packages that you can download for free:

                      33 Beautiful Social Media Sets for Designers and Bloggers
                      The Best Social Media Icons All in One Place

3. Upload the icons to your Photobucket account.

4. Open up a blank text file or word document. Note: You don't have to do this step, but I did it to help me through the process.

5.In Photobutcket, navigate to one of the icons you want to use. Click in the box next to HTML code and paste it into a word or text document. (See image below - It's Slater from Saved by the Bell. Yummy!)


6. For each HTML code you pasted in your text or word document, update href with your direct url for that respective icon. For example, for the Twitter icon update href with your twitter url (http://www.twitter.com/(insert your twitter @name). (See Image below - Sorry no Zack or Slater pics on this one.)

7. Go to Design in Blogger and click Add Gadget.

8. Select the HTML/JAVA SCRIPT gadget.

9. Copy and paste in your HTML code from your word or tect doc of the icon(s) you want to display on your blog in the Content section. For the title, be creative - put 'Stalk Me' or 'Follow Me' or whatever you want (maybe just leave it blank).

10.Click Save and ta da! You should now have social media icon(s).


For resident experts, did I do it the hard way? Do you have any tips about adding social media icons?

If you like this post, you might also like How to Make a Contact Me Form in Blogger.




134 comments:

  1. This was incredibly helpful!! I love all the cute Twitter icons out there and wanted one for my blogs and couldn't quite figure out how to make that happen. Thank you!! :)

    ReplyDelete
  2. Great tutorial! I stopped over from the FTLOB blog hop. Have a great one!
    http://texagermanadian.blogspot.com/

    ReplyDelete
  3. Following from the blog hop. Please follow back :)
    http://slepperymind.blogspot.com

    ReplyDelete
  4. Thanks a bunch! I've been wanting to do this and just hadn't gotten around to figuring it out!
    You made it so easy! :-)

    http://childrenchoresandchocolate.blogspot.com/

    ReplyDelete
  5. Oh, and I voted for your baby in the contest. ;-)

    ReplyDelete
  6. New follower. When you get the chance please follow me back.. http://realadventuresfromamomof3.blogspot.com/

    ReplyDelete
  7. Thanks so much Mama Chocolate! I'm glad the post makes it easy.

    Thanks for the follow, Megan. I will check out your blog and follow back!

    ReplyDelete
  8. Thank you so much for posting this. I am new to the blogging scene as well and this really helps!!

    Found you on the March Blog Hop. I'm your newest follower. If you are interested in some good product reviews feel free to stop by my blog and follow back.

    Bimini West
    http://gloriousbimini.blogspot.com

    ReplyDelete
  9. Great Blog! I'm responding to your request on your "About."

    It's very well-written and to the point. Two thumbs up!

    I'm now a new follower =)

    Sandie lee

    ReplyDelete
  10. Thanks so much for stopping by! I'm following you back! :)

    Kim

    ReplyDelete
  11. Thanks for those icon links. I'm off to check them out. Always looking for ways to spruce up the blogs!

    ReplyDelete
  12. thanks so much for this, I've been wanting to do this and just haven't got around to finding out how. it was really easy to understand and worked fine. neither size of icon works right so I will have to custom size them soon but now that I know how to do it, I shouldn't have a problem.
    Voted for your cutie!

    ReplyDelete
  13. So glad it could help - I had done google searches on this, but did have much luck finding anything that really walked you through it in this much detail.

    And thanks for voting for my doll baby!

    ReplyDelete
  14. stopping by from Find Friends Friday
    Thank you for joining
    jamiebartley(at)aol.com

    ReplyDelete
  15. Thanks! Everyone else made this WAY too complicated, and it still didn't work! Thanks for keeping it simple.

    ReplyDelete
  16. I want to add these to my blog but I am having a hard time getting them side by side like yours. Help me please!
    :)

    ReplyDelete
  17. Thanks for the tip! I really appreciate it-been trying to tackle this problem for a while now :)

    ReplyDelete
  18. Thank you so much for sharing. This post was easy to follow for a newbie like me. Once I got the buttons to work, I took a tour of your blog and I love it. Thank you once again for your help.

    ReplyDelete
  19. Thank you, I have been wanting to fix my icons and you made it super simple!

    ReplyDelete
  20. Thank you! I've been trying to do this over a month now and nobodys made it as simple!

    ReplyDelete
  21. I have been trying to do this forever and nothing made sense before your simple directions. Worked like a charm. THANK YOU!

    Cheers!
    Vinobaby

    ReplyDelete
  22. thanks so much...worked like a charm! :)
    Missy

    ReplyDelete
  23. Thanks so much. I recently bought my own domain name and wanted to give my blog a little facelift. A friend made my icons for me and I used your tutorial to get them up on my blog.

    ReplyDelete
  24. Your instructions were great!! Thanks so much.

    ReplyDelete
  25. Thank you for such wonderful instructions, these were perfect!!! I have been stumbling for days how to do this. I have 2 11 month old twins so I have been trying to create these while being with them. After days of looking and looking and striking out, your very informative instructions were exactly what I needed. THANK YOU SOOOO MUCH! I am @ www.frugalandlovingit.com. I used the heart social icons and they look so cute :)

    ReplyDelete
  26. Thank you for your fabulous instructions - I now have funky social network buttons (and I think I have overcome my aversion to tinkering with HTML code). I could kiss you!

    ReplyDelete
  27. This was sooo helpful, as I am a brand new blogger. Thank you. Any suggestions on how to get people to follow my blog? So far it's just my husband and mother in law...lol

    ReplyDelete
  28. Do exactly what you just did! Leave comments on other other blogs. Get out there and start talking :)

    ReplyDelete
  29. Thank you so much for this tip! I have been searching for help topics on this and this is the only article about social media icons that did it for me! I love it!

    ReplyDelete
  30. u are awesome , u are the best. i was banging my IT illiterate head for long against the goog search walls.. m glad i visited ur site!! thanks so so so so so much.

    one thing how doe sthe RSS feed thing work .. what do i replace the html code with thr??

    ReplyDelete
  31. Lovee to Cook - your RSS feed would be http://loveetocook.blogspot.com/feeds/posts/default. I'll email you the html code.

    ReplyDelete
  32. thanks so much. im truly grateful girl :)

    ReplyDelete
  33. Thank you so very much for this post!!! I have been trying for weeks to put social media icons on my blog. I finally was able to do it with your help... XoXo

    ReplyDelete
  34. This post helped even a computer illiterate like me! Much appreciated!

    ReplyDelete
  35. Thanks for help with this! Didn't think to put them in Photobucket first :)

    ReplyDelete
  36. Worked perfect! Thanks so much for your help.

    ReplyDelete
  37. Thank you so much! That was really easy to do with your instructions!

    ReplyDelete
  38. thank you so much for this! i googled and your blog was shown first or 2nd!

    ReplyDelete
  39. Great post and thank you for sharing. I just added two new follow icons to my blogger page. I am a new fan of your blog from Bloggy Moms.

    http://www.ourbananamoments.com
    http://ourbananamoments.blogspot.com
    http://www.facebook.com/ourbananamoments

    ReplyDelete
  40. Thank you so much for this. I've been googling it for DAYS and you're the only one gave a simple answer! Let me know what you think of my buttons: http://31datesin31days.com

    ReplyDelete
  41. Such a useful tutorial, thank you so much!

    ReplyDelete
  42. This is perfect, thank you! It's sooooo late tonight but I've been needing to do this for a long time. Check it out at www.come-savewithme.com!

    ReplyDelete
  43. This was simple. You totally saved us :D Our blog makeover is set for a few days from now and buttons were the only thing holding us back.

    You rock!

    ReplyDelete
  44. Thanks for the great tutorial! Thanks to you my blog has some lovely new social media buttons, and it was so easy to do!

    ReplyDelete
  45. Thank you so much for this fab tutorial, I did it!

    ReplyDelete
  46. This was fantastic! Easy as pie, I got all mine up in no time with your directions, thanks!

    ReplyDelete
  47. Very grateful and thankful or your post. i was able to get these icons added to my page! THANK YOU doens't seem to be enough!

    ReplyDelete
  48. Thank you so much! I just spent an hour looking for something this! It was so easy, took 5mins! I really appreciate it!

    http://hellohungry.blogspot.com/

    ReplyDelete
  49. Seriously... this was the easiest ever! I wish I found your blog sooner.

    ReplyDelete
  50. Meg - do you have a post that shows us how to put the icons at the bottom of posts (like yours?) Or is it done the same way? Thanks in advance, Jenny

    ReplyDelete
  51. Hi Jenny, this is what you are looking for: http://sharethis.com/publishers/get-sharing-button

    ReplyDelete
  52. Thank you for this excellent tutorial. It worked and now my blog has those professional looking social buttons. :)

    ReplyDelete
  53. Thank you So much! Your tutorial made it easy peasy! :>

    ReplyDelete
  54. Thank you SO much for this tutorial! After much googling I finally found this page with your very clear and concise instructions, and I was able to put social media buttons on my blog in no time. You are awesome!

    ReplyDelete
  55. SSSSoooooo helpful!! I was frustrated to the point of tears and pulling out hair trying to do this. Your help was the easiest to follow. THANK YOU SOOOO MUCH!

    ReplyDelete
  56. ridiculously good directions - thank you so much for helping a fellow blogger out!

    ReplyDelete
  57. You are amazing! I had each button in a separate widget or gadget and it drove me crazy and looked really ghetto :) These directions were perfect, thank you!

    ReplyDelete
  58. This was so helpful that I tagged you in my blog post today :) Thanks again for the easy directions!

    ReplyDelete
  59. thank you so much! Helped immensely!!! :)

    ReplyDelete
  60. Thank you so much for this!! It is fantastic and so easy to follow. Thank you, thank you, thank you!! : )

    ReplyDelete
  61. Thanks to your tutorial I finally managed to add Social Media icons to my blog!

    It was well written and easy to follow.

    Thanks so much!

    ReplyDelete
  62. This may be a very stupid question, but I'm going to ask it anyway. I found the icons that I want to use, and since I have a blogger profile, I just added them as a picture, with a link to the corresponding icon. How do I get the icons on the same line?? It's driving me crazy.

    ReplyDelete
  63. I found this post very helpful and I wanted to let you know that I linked it up on my blog. Thanks for sharing great information!

    ReplyDelete
  64. Thank you for sharing this! One of my blogs has a custom template and I have not been able to add G+ button to it anywhere-driving me crazy! Some of my blogs with the blogger templates allow me to add the share buttons at the end of each posts, but for some reason it is not so easy with custom templates.

    ReplyDelete
  65. Wow, thank you so much! I was Googling and Googling trying to figure this out. Your instructions are so easy to follow.
    Following your blog now :)

    ReplyDelete
  66. Thank you sooo much! I've been trying to figure this out for weeks and with your directions it took just a few minutes!

    ReplyDelete
  67. You just made my day! Thank you so much for this!

    ReplyDelete
  68. Thank you sooo much for this - I struggled and struggled - in my sleep-deprived-baby-barfed-is-it-really-3-am state of mind. That is until I literally followed your step by step instructions. You totally made my day - and my blog!

    ReplyDelete
  69. This was PERFECT!!! Thanks so very much ... my blog is more functional because of you! :) Christy

    ReplyDelete
  70. This tutorial has opened up a whole new world for me on my blog! Thanks so much for your help. :)

    ReplyDelete
  71. Terrific post...I had downloaded social icons of my choice but was confused about their code...Your post is simple yet fabulous...Thanks...

    ReplyDelete
  72. You are fantastic! Thanks so much! I had no idea where to start. :)

    ReplyDelete
  73. WOW!! It worked. I have been trying for at least 2 days to do this exactly how I wanted. I tried following others "expert" instructions and had errors or problems and was frustrated sitting here for hours. I finally came across your blog. And viola! It worked and looks great. Thanks so much!!

    Lorena
    http://lorenaloveslearning.blogspot.com/

    ReplyDelete
  74. Thank you SOOOO much for this, I've just spent hours trying to figure out how to do this and you have the best instructions yet! Thank you thank you thank you!

    ReplyDelete
  75. I SO appreciate the clarity of this step-by-step process. This was wonderful and worked like magic. Plus, I felt super smart and nerdy in the best way. :) Thank you.

    ReplyDelete
  76. THANK YOU THANK YOU THANK YOU! this was incredibly helpful :)

    ReplyDelete
  77. You really simplified the process quite well for us newbies :)...Thank You!!!

    ReplyDelete
  78. Thank you so much! I spend a couple hours this morning trying to load social media icons to my sidebar. A few blogs recommended to me made it so complicated. Then I found yours and your directions made it so easy to do, it took me m10 minutes! Thank you so much!! You made this process so simple!!

    Have a wonderful Sunday!

    ReplyDelete
  79. Thank you so much for posting this! I finally got up the courage to add the icons to my blog & this made it so easy!

    Have a great day!

    ReplyDelete
  80. wow! super easy and it works! thanks a bunch...i've been going in circles trying to add icons. then, i found your post.

    oh, and i love your blog!

    melissa
    www.deliciouswife.com

    ReplyDelete
  81. This is great! thanks for the easy tutorial!!! :)

    ReplyDelete
  82. Thankyou so much for this! So simple to do.
    I used it for my blog :) http://situonglovestea.wordpress.com/

    ReplyDelete
  83. Very easy to do! Thank you. Question though... how do you make the one for e-mail? Just put your e-maill address in where you alter the URL?

    ReplyDelete
  84. Thank you very much for your instructions. Helped me tremendously and easy to do!

    ReplyDelete
  85. Saw this on pinterest-repinned-added the pinterest icon to my blog!

    Thank you!

    suddslove.blogspot.com

    ReplyDelete
  86. Thank you so much for this SIMPLE explanation. I had given up on adding my own buttons, then decided to give it one more try. I found your post and was finished in no time. Awesome. Thanks!

    ReplyDelete
  87. so desperate with edit HTML..thanks for the detail steps..like it !! thanks :)

    ReplyDelete
  88. Thank you so much for this post! You've really helped me out. :D

    ~ Sophie
    http://www.lifebetweenpages.net

    ReplyDelete
  89. I'm going to join the 101 other people in saying you did a fantastic job in explaining this process. I have been frustrated for a few weeks now trying to figure it all out and you simplified it beautifully.
    Thanks a million!

    ReplyDelete
  90. Wow! Thank you SO MUCH! I could never figure it out before. THANKS!!!
    Amanda
    the-cadence.com

    ReplyDelete
  91. thank you for this very helpful tutorial!!!

    ReplyDelete
  92. Thanks for this! Just added some cute icons to my blog!

    ReplyDelete
  93. This is awesome and so simple, I have read a lot of tutorials about adding social media button and found this one so simple.

    http://www.bloggingxray.com

    ReplyDelete
  94. That worked perfectly! Thank you so very much.

    ReplyDelete
  95. This comment has been removed by a blog administrator.

    ReplyDelete
  96. Thank you so much!! I've been trying to figure this out for hours and your post broke it down so simply! Thanks!

    ReplyDelete
  97. Thanks for the tutorial. Putting the icons on my first blog:)

    ReplyDelete
  98. This is so easy!! Thanks a HUGE bunch of bananas! You are amazing..
    thanks again!

    ReplyDelete
  99. This comment has been removed by a blog administrator.

    ReplyDelete
  100. hello there!

    Thanks for the very clear instructions!! :) I thought I would give it one more go and I'm glad I did! I even added the share links too (although at the moment they seem to appear and disappear like the wind). After a bit more tweaking it should be fine :)

    Best wishes
    Asha

    ReplyDelete
  101. Thank you! Finally!!! I have icons.

    ReplyDelete
  102. Wow! you are absolutely brilliant! Thank you for taking the time to publish this. I've spent waaaaaay too many hours trying to figure it out myself. If you get a chance I'd love for you to join my network. http://dogtime2shine.blogspot.co.uk/

    Thanks again. Look forward to more of your pearls of wisedom :o)

    ReplyDelete
  103. Great information. Thanks for sharing. I am following you on GFC would love for you to come visit and follow back!
    Thanks again,
    Marcie @ www.IGottaTryThat.com

    ReplyDelete
  104. I just stumbled upon this. Awesome! Thanks so much for your help! http://www.toddlertrails.com

    ReplyDelete
  105. THANK YOU THANK YOU THANK YOU for this post. I was literally about to throw my laptop across the room trying to get those widgets all in a row. Now for a G&T and a lie down.

    ReplyDelete
  106. Thank you so much for sharing - this was very helpful.

    ReplyDelete
  107. I'm trying to get through the process of adding my icons, can you tell me how you linked your email icon up to the form where readers can email you? I don't know what to put int he 'url' section. Thanks for the help!!!

    ReplyDelete
  108. Jenna - URL section for email should be 'mailto:INSERTYOUREMAIL'

    ReplyDelete
  109. Thank you so much for this information! I had to add social media links for a school project and I had no idea how to do it; this worked like a charm. "A" here I come...Lol

    ReplyDelete
  110. WOW, thank you! I've been searching for several days now, your advice is the first to bring love to my blogger blog :)

    ReplyDelete
  111. Thank you so much for this!! I have asked, searched, been given advice and you have been the ONLY one to make sense of this. Thank you thank you thank you! You are an angel!!

    ReplyDelete
  112. Thanks for posting this! I just started my blog a few months ago and you're direction helped me personalize it more. Thanks!
    Erica

    ReplyDelete
  113. For the life of me I could NOT figure out how to put social media icons on my blog...until I found this post! Now I did it! Thank you for making it so easy. :)

    ReplyDelete