How to Install Social Media Icons on Blogger – No Coding Needed

How to install social media icons on Blogger the easy wayToday I am going to show you how to install social media icons on Blogger – the easy way! You will not have to directly edit the code and you will not need a 3rd party source like Photobucket or Flickr to host the images for your social media icons. Social media icons are one of the most valuable ways to get readers to connect with us on other areas of the internet.  Installing social media icons allows an easy way for blog visitors to follow us on our social sites and connect with us  in a way that is convenient for them.

Would you rather watch our YouTube video on this tutorial? Click here to watch “How to Install Social Media Icons on Blogger” via YouTube

The first thing you will need in order to install social media icons on Blogger is to find a set of social media icons that will compliment your current blog design! You can check out our Etsy store for some really cute social media icons but the internet also has tons of free social media icons as well! Once you find icons you like follow the directions below to install your social media icons on Blogger in your sidebar. It looks like a lot of steps but this shouldn’t take more than 10 minutes as long as you have your social icons downloaded to your computer and your social sites open and ready to grab the url!

To start: log into Blogger and create a new post. This post is where you will store your social media icon images.

//////////// IMPORTANT: This post should never be published! Click “save” after editing as this will store the post as a draft so that it does not appear on your blog with your other posts.////////////

When you are done with the post and you have saved it simply exit out of the window or navigate to any other page on your blog. If you accidentally click “publish” you should start again.

Give your post a title that will remind you what it is and remind you not to publish it. I usually put “IMAGES: DO NOT PUBLISH OR DELETE” but you can name it whatever you would like.

Next it is very important that you make sure that you are in the “HTML” preview window. There are 2 tabs at the top of your editing box one says “Compose” the other says “HTML”. Click so that you are on “HTML”. The difference is the compose window will show you the actual images whereas the HTML window will show you the code. If you upload via “compose” it will create spaces and those spaces will be placed into the code which will pretty much make everything a huge mess.

How to install social media iocns on Blogger steps 1-4
How to add social media iocns to Blogger step 5

You should now see all the social media icon images you just uploaded (shown below). If you don’t see them click on “Compose” again.

We are now going to add links to our social media icons!

////////Help with image URL’s for linking your social media icons///////

You will need the url (web address – http://……) for each social site you are linking to. Make sure it is the address of your profile page and not the social sites home address. You will want to use the url of the page you want others to land on when they click that button. You don’t want to install social media icons on Blogger or any site unless they can click the icon and land on your actual social page – this is again the purpose for installing icons.
For example when readers click on my Facebook icon I want them to end up on:

https://www.facebook.com/BlogaholicDesigns not just facebook.com

So this is the url I will use in step 7!

How to add social media iocns to Blogger step 6
How to add social media iocns to Blogger step 7
IMPORTANT: Sometimes you may click on an image and it will turn blue but then when you click “Link” the box will not pop up. Just repeat the process – so click the image again so that it’s blue and then click “link” again.


Next we need to center our icons:

How to add social media iocns to Blogger step 8
After the icons are centered and linked switch back to “HTML” mode (where you can see all the code).
How to add social media iocns to Blogger steps 9-10
Now we need to place the code we just copied into our sidebar through an HTML/JavaScript gadget on our “Layout” page.
If you are not sure how to do this here is a quick overview: From your Blogger dashboard click on “Layout”, next click “Add a Gadget” a box will pop up – scroll down until you see “HTML/JavaScript” and click the “+” sign. This is where we install social media icons on Blogger for them to show up in the sidebar of our blog.

How to add social media iocns to Blogger steps 11
A box will pop up. Enter the code you copied from step 10 into the box and click “Save”.
If you want a title (“Connect” “Stay Connected”, etc…) you can enter one into the “Title” box – I usually just leave it empty.

How to add social media iocns to Blogger steps 12
Here is how to paste the code you copied: If you copied the code using your mouse just click inside the box and then right click on your mouse and hit “paste”. If you used your keyboard click “ctrl-V” (for Mac “Command-V”).

After saving the above code be sure to hit “Save arrangement” on the main layout page in the upper right hand corner as shown below and then then click “View blog” to see your new icons! How to add social media iocns to Blogger last steps
Check your links by clicking on each social media icon! If they all link to the correct spot then you are all set! Congratulations – you successfully installed your social media icons! See it wasn’t so bad, right? Now you know how to install social media icons on Blogger – pretty awesome!  If you did encounter any problems feel free to contact us!

Like this post? Tell your friends that they can also learn to install social media icons on Blogger by sharing the post below!

Comments

  1. Thank you so much!
    I was searching the internet for something this simple :)

  2. Thank you so so so much, I was going crazy traying this , so simple, very good explain :D

  3. Thank you for this awesome tutorial! Very easy to follow!

  4. Hi Emily, I just wanted you to know that I was able to add the images using compose, then I changed the html. I got it all to work. Thanks for the tutorial.

  5. No problem Beth! I’m glad it worked it!

Speak Your Mind

*