How to Install Social Media Icons in Your Sidebar (on Blogger)

48 Replies

   I know what you’re thinking-where in the world did this come from? This doesn’t seem to fit the typical “healthy” or “new resolution” posts that you would expect. I know, I know, but stay with me for a minute. So many of my close friends have started blogs this past year, and I wanted to share something that really helped me-something that many of you may have on your to-do lists; a “how-to” on installing those cute little icons/buttons on your blog.

   As a disclaimer, while I am a total nerd/techy geek at heart, I am definitely not an expert by any means. I love this technologically-advanced age (parts of it), but I’m still somewhat in the dark and trying to catch up. That being said, when I created my blog, there were a few very specific elements that I wanted, so I researched and hunted until I found helpful links, blog posts, articles that could help me achieve what I was looking for. Installing social media icons on a blog really helps in many ways: they tidy up the sidebar and put all of the ways people can connect with you in one place, they look very professional, and they make it much easier for people to connect with you on facebook, twitter, pinterest, and many other social media sites.  I searched and searched for info on this subject for days and never could really find anything useful. Just when I was ready to pull my hair out and throw in the towel, I remembered that I have a brilliant friend, Jen, who is amazing at all things “techy,” so I begged asked her to please help me out! She came up with a great HTML code that saved my life worked like a charm!

   I am writing this post and sharing this code, just in case there are any others who are also having a difficult time figuring this stuff out. Hope it helps, and feel free to leave any comments or questions you might have! (Again, this code is only set up for blogs/websites hosted by Blogger.)

  I am going to try to do this step-by-step, so hopefully it won’t be too overwhelming or confusing.

Step 1. Choose your social media icons.
  You can find some here, here, or here. Icon Finder is a great resource as well. You can also google “social media icons” and it will pull up countless resources and sites to choose from.

*Note: Choose icons sets if possible, so that everything looks cohesive, and also pick icons that match or coordinate with the style and feel of your blog.

Step 2. Download the icons to your computer.

Step 3. Upload the icons/images to an image hosting site. (I used Photobucket, and that is the way this particular code is written, so you’ll have to use that site if you want the code to work.)

Step 4. Sign in to your Blogger account, select the blog that you will be working on, and go to the “Layout” tab on your left. Click, then look at the layout of your blog and find a little rectangle that says “Add a Gadget.” Click on that, and a new window will pop up. Scroll down until you see “HTML/JavaScript.” Clicking on that will open a new window that says “Configure HTML/JavaScript.” You are doing great!! Easy, right? :) In the “Title” bar, type in what you want your header to be. (Mine is “Connect & Socialize,” but feel free to personalize to your preferences.) After you’ve completed that, minimize that screen-we’ll come back to it later.

Step 5. Copy the code below (exactly), then reopen your “HTML/JavaScript” window, and paste into the space that says “Content.” (This code is designed for four icons.)



Step 6. Here’s where it gets a little tricky; stay with me. Choose which icon you want to appear first. Sign in to your Photobucket account and go to your album. Choose the icon that you want, click on it, then left-click on the image and choose “Open in a new window.” When that new window opens, the URL/web address at the top of the screen is the one that you want to copy and paste into your code. Leave that new window open, and go back to your “HTML/JavaScript Gadget window with your code, and delete what is written within the first set of parentheses: insert URL/web address of where you want to be directed to ONLY. Delete anything else, and the code will not work.

Step 7. (This is harder to explain/type than I originally thought!) Once you have deleted what is within the first set of parentheses, minimize the “HTML/JavaScript” Gadget window again, and go to the website that you want to be directed to (i.e. your facebook page, your twitter profile, etc.) Copy the URL/web address at the top of that screen. Reopen the window with your code, and insert that address within those parentheses. You are doing it! I promise, you’ll feel super smart when we’re done, and even more so when you realize that it actually works!

Step 8. You are going to do pretty much the same thing within the second set of parentheses. Delete everything that is written between them: insert URL/web address of the social media icon you want here 
Now, go to the new window that you opened for your social media icon, and copy that URL/web address. Return to your window with the code, and paste the new address within those parentheses. 

Step 9. Make sure that you save your work as you go-you definitely wouldn’t want to lose it!

Step 10. Repeat steps 5-7 for the remaining three icons. 

Step 11. Save, then go to your blog and check it out! You should see all icons in your sidebar (wherever you placed the gadget in your blog layout), and when you click on one of them, it should take you immediately where you want to go!

I know that this can be so daunting and frustrating if this is your first time trying anything like this, but I promise that you really can do it, and you’ll be so thrilled with the results (and yourself) when you’re finished! (If you are really comfortable with coding and web design, please disregard all of the step-by-step instructions, I just really wanted to explain it all in detail to make it easy for anyone to be able to do it.)

I hope that this helped a little. Forgive me if it didn’t all make sense-I’m still learning too. Please feel free to leave comments or questions, and I’ll try to reply as best as I can.

Post linked here: 


 I'm Lovin' It at TidyMom

48 thoughts on “How to Install Social Media Icons in Your Sidebar (on Blogger)”

  12. Anshul Pandey

    Thanks! Worked the first time I tried it. You just have to remember that the photo link that you insert should end with .png or .jpeg or whatever is the format of your image. I made the mistake of pasting the link of the image through Postimage which ended with postimge.com/something-something/

    Reply ↓
  14. Diah Didi

    Thank you very much! I was a bit afraid since I’m sooo new to this computer/blogging stuff. But it turned out your instructions were clear enough for me whose English is not my main language. So helpful!

    Reply ↓
    1. Rachel

      I am so happy that the post was helpful to you! I also need technical stuff written out in plain English! :) Hope you have great success with your new blog/website!

      Reply ↓
    1. Rachel

      They should work immediately. I actually had that happen at one point too. I just started over, double-checked that I had everything right, and it worked just fine! Do you have them hosted with Photobucket? Make sure the URL for the image/icon is correct. Try that and let me know if it works for you. Thanks for stopping by!

      Reply ↓
    1. Rachel

      Chane’, they look lovely! I’m so glad that you were able to make sense of my “techy” tutorial, and get your icons working properly! Great job and a lovely blog! Thanks for stopping by!

      Reply ↓
    1. Rachel

      I’m so sorry that it didn’t work properly for you. The same thing happened to me when I tried to do it the first time, so I started all over again, double-checking everything, and they ended up working perfectly! I hope that you are able to get your icons up and working successfully. Thank you for visiting!

      Reply ↓
    1. Rachel

      Hi, Kine! Thank you for checking out my website! I appreciate your comment; it’s super nice to know that my post was helpful. :) Have a great day!

      Reply ↓
    1. Rachel

      Awesome! I’m so glad to have been able to be of some help. :) I hope that you are able to get your icons just the way you want them! Thanks for stopping by, and thank you for the encouraging feedback! Have a great day!

      Reply ↓
  25. {Steph}

    Really great! Thanks for this tutorial! I have most of mine up & running, but wanted to add an email address to one. Do you know how to link that up instead of a webpage?

    Steph @ Silver Boxes

    Reply ↓
  26. Kimberly

    I’ve been trying to figure this out! I messed around with the different sites for buttons and I think its definitely best to pick buttons that are meant to go together because other wise the sizing is all off. I couldn’t find a package of buttons that I liked, so I ended up editing the buttons so that they were the same size. thanks for your help!!

    Reply ↓
    1. Rachel Plemmons

      Yay! I’m so glad that it worked for you! I’m sure you are not at all an idiot. :) There is so much to learn about blogging and setting up a website; I totally understand feeling lost and out of my element. Thank you for visiting, and for taking the time to share your positive experience! I hope you have a wonderful week!

      Reply ↓
    1. Rachel Plemmons

      Thank you, Kitty! I am so blown away by the positive response this tutorial has received! I am so glad that it helped you. Thanks for stopping by, and for the kind feedback. Hope you have a wonderful week!

      Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>