How To Add Social Media Icons Onto Your Blog (Blogger)

Image showing lots of social media icons in different colours
Image Source

Uploading social media icons onto Blogger seems so much daunting than it really is. There is some HTML involved but it is so easy. It is essentially copying and pasting code and changing some words around.

1) First of all download some social media icons. There are loads around, flaticon is a good site that has been used in my workplace. This site is good too.

2) Once you have downloaded them, upload them into Photobucket or Flickr. I use Photobucket.

3) On Blogger go onto layout, on your sidebar click ‘Add a gadget’ then click add HTML/ JavaScript.

Screenshot of the layout section on blogger
Gadget box displaying where the HTML & JavaScript box is

4) Open up the HTML/ JavaScript and copy and paste this code:

<a href=”Your custom link”><img src=”Your Image URL” alt=”Twitter” /></a>

5) On the ”Your custom link” add in the link you want readers to click on. In this case I will add my Twitter link: and in ”Your Image URL” add in the URL of the image so for me it’s this:

To add other links just copy and paste the HTML but change the ”Your custom link” and ”Your Image URL”and alt=”Twitter” to whatever social network you want and corresponding image url. So see below in pink:

<a href=””><img src=”” alt=”Pinterest” /></a>

Here is a screenshot of what it looks like all together:

There you go, it is a really easy way to make your blog look professional.


By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.