How to Add Social Media Icons in Blogger

Blue Jelly Social Media Icons
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?




132 comments:

  4. 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

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

    ReplyDelete

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

    ReplyDelete

  8. 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

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

    ReplyDelete

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

    ReplyDelete

  11. 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

  12. 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

  13. 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

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

    Kim

    ReplyDelete

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

    ReplyDelete

  16. 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

  17. 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

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

    ReplyDelete

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

    ReplyDelete

  20. 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

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

    ReplyDelete

  22. 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

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

    ReplyDelete

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

    ReplyDelete

  25. 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

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

    ReplyDelete

  27. 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

  28. Your instructions were great!! Thanks so much.

    ReplyDelete

  29. 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

  30. 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

  31. 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

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

    ReplyDelete

  33. 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

  34. 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

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

    ReplyDelete

  36. thanks so much. im truly grateful girl :)

    ReplyDelete

  37. 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

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

    ReplyDelete

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

    ReplyDelete

  40. Worked perfect! Thanks so much for your help.

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  45. 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

  46. 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

  47. Such a useful tutorial, thank you so much!

    ReplyDelete

  48. 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

  49. 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

  50. 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

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

    ReplyDelete

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

    ReplyDelete

  53. 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

  54. 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

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

    ReplyDelete

  56. 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

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  60. 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

  61. 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

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

    ReplyDelete

  63. 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

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

    ReplyDelete

  65. thank you so much! Helped immensely!!! :)

    ReplyDelete

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

    ReplyDelete

  67. 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

  68. 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

  69. 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

  70. 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

  71. 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

  72. 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

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

    ReplyDelete

  74. 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

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  81. 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

  83. 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

  84. 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

  85. THANK YOU THANK YOU THANK YOU! this was incredibly helpful :)

    ReplyDelete

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

    ReplyDelete

  88. 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

  89. 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

  90. 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

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

    ReplyDelete

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

    ReplyDelete

  93. 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

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

    ReplyDelete

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

    Thank you!

    suddslove.blogspot.com

    ReplyDelete

  98. 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

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

    ReplyDelete

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

    ~ Sophie
    http://www.lifebetweenpages.net

    ReplyDelete

  101. 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

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

    ReplyDelete

  103. thank you for this very helpful tutorial!!!

    ReplyDelete

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

    ReplyDelete

  105. 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

  106. That worked perfectly! Thank you so very much.

    ReplyDelete

  107. This comment has been removed by a blog administrator.

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  112. This comment has been removed by a blog administrator.

    ReplyDelete

  113. 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

  115. Thank you! Finally!!! I have icons.

    ReplyDelete

  116. 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

  117. 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

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

    ReplyDelete

  119. 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

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

    ReplyDelete

  122. 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

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

    ReplyDelete

  124. 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

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

    ReplyDelete

  129. 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

  130. 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

  132. 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

Subscribe to: Post Comments (Atom)