Ridgeway Cottage Anyhow - How to add social media buttons to your blog

I know not everyone is excited by learning code and techie stuff but in my quest for website geekiness, this post is just one step closer. For all my lovely friends and family who do not care one hoot about what goes on behind the scenes of Ridgeway Cottage, here are some lovely photos of October life. (Those who do want to know about the buttons, social media and coding, please read on.)

Social Media Buttons Anyhow

You will need.

• Your blog open in layout 
• The URL of your social media places you want to link to
• Some lovely pictures of social media icons that you would like to use as your buttons
• A photobucket account which you can easily open here
• A small understanding of how the coding works 
• A rather large smattering of patience unless you are super clever at all techie stuff

 What social media icons are you going to use?

You can find some very lovely ones by searching on the internet or there are some here, here,  or here.

I liked these one because I do rather like colour and the design is simple, but you really do have the choice of hundreds. (These are from here ).

What's next?
Now you need to do all the downloading and uploading of the images. This is where you are going to need some patience because each icon needs to be downloaded from the website, saved to your pictures and then uploaded to photobucket. With the icons I used there was a very handy link on the website that read

Download Icons from Google Docs 

When I clicked on it, the page that opened looked like this and I choose the colour and icons I wanted. In this case I went for Rose Smoke Inspired but I have dreams of making my own icons.

Once you have saved each icon you want to use, you can upload them to photobucket.

Now for the coding

In simplest terms coding tells you computer what to do and where to go. In this case you want a button on your blog to take you to a social media link. You need to take the HTML code from Photobucket

and the HTML code for your social media link (I'm using Followgram for my Instagram link in this case)

http://followgram.me/ridgewaycottageanyhow

then you very carefully remove some of the code from the Photobucket (highlighted in pink) one and replace it with your social media link (highlighted in blue)

I did all my cutting and pasting and mixing and matching in a word document so I could see exactly where I was making mistakes when it didn't work. You need to do this for each and every icon and link....that's a lot of code!

So how do you put it all together and onto your blog?

Once you've gathered together all of your code you need to edit the layout of your blog and add a gadget.

When you click on add a gadget you need to find the option for adding HTML because you have got a whole load of that to add.

The HTML gadget opens in a pop up box (see above) and you can fill it full of the code you created with links to icons and social media sights and then as if by magic, there appear looking beautiful on your blog. Depending on your layout, you can drag the HTML box to where ever you think it looks best.

I would love it if you could leave a comment. Please give it a go, I'm working on making it easier