How to add social media icons on Blogger

Wednesday, 19 February 2014
When I started blogging, I was utterly clueless when it came to HTML, blog design or anything related. Over the past year, I've spent a lot of time googling 'how to', and finally feel like I know the basics. One thing that I struggled with was adding my own social media icons. After reading and trying a few different ways, I found what I think is the easiest. So today I thought I'd do my own attempt at a 'how to add social media icons' tutorial - using Photobucket. This tutorial is based on Blogger, which is what I use, but it should still be helpful when it comes to getting your code. It's a long post, but it's really not difficult I promise!


1. Pick your social media icons! There are so many sites that offer free downloadable icons. Just do a simple search on Google images for 'free social media icons'. Once you see ones that you like, click the link and if they're free, you should be able to save them. Here's some I found:

Free Social Media Icons - Simply Brenna)
Free Social Media Icons (huge selection!) - Geek Fairy

2. Save them to Photobucket! This website makes this whole thing so easy! It's totally free, and there's so many things it can be helpful with. Once you've signed up, you need to upload your icons to the site. Click 'upload', find the folder you saved them to and upload each one individually. 


3. Edit your icons! You can now resize your icons if you want to. Have a think about how you want your icons to show (eg. two in a row) and how big they'll need to be. Once you've uploaded your image, scroll down and click your icon. Then click 'Edit', 'Resize', pick your size then save!


4. Get your code! Now this is the best thing about the site. Photobucket prepare your HTML code for you, all you have to do is click on the HTML box below and it'll copy the code. Easy!


5. Add your link! The code you've copied will show your image when pasted onto blogger. But first, you need to change what'll happen when your reader clicks the image. It's easy to do that, you just need to change the code slightly. Paste the code onto a word/notepad so you can see the full thing. The first URL in the code should be replaced with your own personal link (at the moment, it'll just link back to the Photobucket website). Highlight the URL (between the speech marks), and copy in your own personal link depending on what icon you're working on.


If you're linking your Twitter, Facebook, Pinterest or Bloglovin' then just replace it with your own personal link for the icon. If you're adding an email icon (like the one above), replace the link with 'mailto:(your email address)'. For example:


This means that if your reader clicks the mail icon, it'll open up a new email draft with your email address already input in the 'to' section. 

Add each social media icon to Photobucket and edit the code individually. I recommmend saving all your codes in their own notepad, in case you ever need to change them!

6. Paste your code onto blogger! Now that you have your new codes, you can paste them onto Blogger. 

1. In your blog homepage, click 'Layout'
2. In layout, select 'Add a gadget' on your sidebar or footer (depending where you want your icons!)
3. This will bring up a pop-up, scroll down and select 'HTML/Javascript'.
4. Paste your codes! You can paste each icons code one after another, you don't need to add a space or do it on the next line or anything. To check your code, click 'Rich Text' in the corner and it'll show a little preview of your image! 

7. And you're done! Once you've hit save, you can preview your new layout and move about your gadgets to get them where you want. If you want them in a row but they don't fit, you can widen your sidebar in the 'Template section' to fit. 

Let me know in the comments if you have any questions and I'll do my best to help!

 photo postsignature_zps9b5d7dad.png

6 comments on "
How to add social media icons on Blogger
  1. Aww love this post!
    I'm so rubbish with this stuff so I will be using this!
    Thank you!


  2. Nice advices!

  3. This was useful! I am definitely going to refer back to this when I get some time to edit my blog :) thanks for the advice x

    Georgina | headintheclouds

  4. This is really useful xx

  5. This is going to be so helpful thanks for sharing ! X


Why not leave a comment and tell me what you think? Tweet me @MaisyMeowBlog if you have a question :) xx

Auto Post Signature

Auto Post  Signature