Putting social media icons on your blog

blogging basics how tos and adviceSo you’ve created a page on Facebook, signed up for Twitter, navigated the minefield that is creating a G+ profile and business page and opened a Pinterest account as well as spent hours and hours looking at everything on there and now you want to let people know where you can be found so you can start building your blogging community.

social media icons for your blogPutting social media icons into blogger

These will need to go into a gadget on your sidebar or other location on your blog. First off you need to add a gadget – we’re going to choose the HTML/Java Script gadget and open it up.

html text gadget in bloggerTo get you started we are providing a free set of icons for you to you. There is a Twitter, Facebook, Pinterest and G+ Icon.

free basic social media iconsInto the box that appears you will need to copy the code below to use the icons – the portions of text highlighted are areas where you need to insert your own URL’s for the different social media.

<a href="your facebook page URL">
<img src="http://kidbloggernetwork.com/wp-content/uploads/2012/07/facebook.gif"
height="50px"/></a><a href="your pinterest account URL">
<img src="http://kidbloggernetwork.com/wp-content/uploads/2012/07/pinterest.gif"
height="50px"/></a><a href="your google+ page URL">
<img src="http://kidbloggernetwork.com/wp-content/uploads/2012/07/g+.gif"
height="50px"/></a>
<a href="your twitter account URL"><img src="http://kidbloggernetwork.com/wp-content/uploads/2012/07/twitter.gif"
height="50px"/></a>

If you title your gadget something like Come Follow us it will appear on your blogger blog like below

social media iconsUsing your own Icons

If you want to create your own icons or use some that you have found on the web you will first need to upload the images into your Picasa or other online image storing area and then change the red parts of the code below to the image URL that you want to use

<a href="your facebook page URL">
<img src="http://kidbloggernetwork.com/wp-content/uploads/2012/07/facebook.gif"
height="50px"/></a><a href="your pinterest account URL">
<img src="http://kidbloggernetwork.com/wp-content/uploads/2012/07/pinterest.gif"
height="50px"/></a><a href="your google+ page URL">
<img src="http://kidbloggernetwork.com/wp-content/uploads/2012/07/g+.gif"
height="50px"/></a>
<a href="your twitter account URL"><img src="http://kidbloggernetwork.com/wp-content/uploads/2012/07/twitter.gif"
height="50px"/></a>

Remember to test your icons that you have them linked to the correct URL

Troubleshooting social media icons

There are a few common problems with putting in social media icons

I want all my media icons to appear on 1 line

Using the code above they should if you sidebar is 250 px or wider fit on a single line – if you have a smaller sidebar then one of the icons will appear on the line below – in the template option in your blogger dashboard you can change these dimension – at Blogging with Kids we recommend using a sidebar of 350px+ as this will allow you to place the large ad units from Google Ad Sense.

My social media icons are all over the place some higher up than others

If you are using your own images this can be a very common problem – part of the issue is the way that the images are designed, some designers may have added extra blank space around the icons in our code above we have added the instruction height ="50px" this gives the instruction to make each icon 50px high – by changing the 50px you can alter the height of the image and make it fit with the other images- using icons from the same set shouldn’t produce this problem.

I want to add more social media icons

To add more copy the code

<a href="your social media URL">
<img src="http://kidbloggernetwork.com/wp-content/uploads/2012/07/facebook.gif"
height="50px"/></a>

and add in your social media URL (highlighted in yellow) and change the image URL (in red) to the icon that you want to use. You may find that you need to add in a line break so that your icons split between 2 lines in which case add the code br before the <a href="..... and this will put in a line break.

If you have any problems please let us know in the comments

About Cerys @ Rainy Day Mum

Cerys is a SAHM to J-3 years old and T-1 year old and is the owner and writer at Rainy Day Mum. A former computer science teacher and marine biologist she also does some blog design work using blogger and wordpress.

Comments

  1. Thanks for this, Cerys! So simple, yet it took me 1.5+ years to do :-) My site looks MUCH better now!

  2. Just added it to my site and I am so happy! Thanks for sharing! Of course now the rest of my blog looks shabby by comparison…I really need a revamp, I think.

  3. how to add it to wordpress?

Trackbacks

  1. [...] you followed our tutorial on how to add social media buttons to your blog you will now have a way for you readers to connect with you on social media. However, [...]

Speak Your Mind

*