Saturday, 1 February 2014

How To: Add Social Media Buttons On 'Blogger'

So this post is going to be a little different to my usual, but no one should have to spend as long as I just did trying to figure out how to add social media icons to a blog. I've tried to explain it in simple steps so you should be able to follow along if you're a technophobe in a pickle. As I only use Blogger, this will only show you how to add social media buttons on this site and it'll be a little different if you're a WordPress user etc.

1) Find and download a set of social media icons you like, there are loads of free sites on Google offering these. I got mine from I'd recommend you just use these to start with as they have transparent backgrounds and come in lots of colours so they blend better with your blog. Download the full set of your chosen colour and copy the individuals icons you need in the size 48x48 into 'my pictures'.

2) Log into Blogger and open up a new post.

3) Insert the first icon you want to use as an image. Once it appears in your post, highlight it and click 'link' in the toolbar (you might have to click a couple of times for it to open). Paste the URL of the site you want the button to go to in the link box e.g your Bloglovin' page. 

4) Make sure 'open this link in a new window' is ticked and click 'ok'.

5) Repeat steps 3 and 4 until you've linked all the icons you want to use to your sites. Drag the images into the order you want them to appear in your sidebar, you can also do this by highlighting the images and clicking 'left', 'right' or 'center'. Tip: rows of 3 are the easiest as you can have one left, one center and one right then repeat the next row underneath.

6) In the top left corner of the screen, change from 'compose' to 'html' view. Highlight and copy the code, being careful not to miss any of it out. It's also a good idea to regularly do this and save the text in a word document, so you can easily replace any content if you mess it up editing (we've all been there).

7) Return to the Blogger homepage for your blog and click 'layout'.

8) In the sidebar of your blog layout click 'add a gadget'. Scroll down until you see 'html/JavaScript' and click that. Paste your code into the content box and save. It will then show up as a 'html/JavaScript' box in your sidebar, drag it up or down to wherever you want your icons displayed. You should now be able to view your blog with functioning icons!

I hope this post helped you to add buttons a lot quicker than I managed it and was easy enough for you to follow.

Love, Anna x