Adding social media icons using the code for clickable image

Including social icons or follow buttons on your blog is pretty much standard these days and you can find a lot of free social media icons sets on the net.

In this post, I'll just share with you a few quick and easy steps on how to add your own social media icons on your blog.

How to add social media icons

1. Find a free social media icon set that you like. Simply type in "free social media icons set" or "free social media buttons" in Google and you'll find tons of options. You can choose to download a set or you can pick and choose from several styles. Download the set/icons that you like and save it/them in your computer.

If you like the dark round icons I posted above, you can download them by right-clicking on the icon and selecting Save image as.

2. Upload your social media icons into an image hosting site (e.g., photobucket, tinyurl) and copy down the image url of each icon.

An alternative to using an image hosting site is uploading them into your blog by creating a new post, inserting (or uploading) the images into the post, and saving the post as a draft. You can then copy the image url of each icon by right-clicking on the image and selecting Copy image url. Save the image url's in a text file so you can retrieve them later. Click on Close to keep your post as a draft.

3. Go to Layout and click Add a Gadget. Select HTML/Javascript. Copy the code below for each social media icon, replacing the text in RED with your own url and custom text.

You'll need this code for each social media icon, so if, say, you want to put your Facebook, Twitter, and Pinterest links, your code will look something like this:

To adjust the space between each icon, you can experiment with the margin measurements (blue text).

To adjust the size of your icon, edit the width (pink text).

If you want the icons aligned a certain way, simply add <p align="center"> before the code, and </p> after the code. You can replace center with left or right, depending on what you want. See example below:

4. When you're done adding the code and tweaking it, click Save and you're done! :)

Other uses for this code

Clickable images - This is basically the code for clickable images. If you want to maybe add a photo or badge that would redirect to a specific link, you can use this code. If you want an image in your post to go to a specific link instead of the image url, just go to the HTML option and edit the link right after href.

<a href="EDIT THIS URL"><img src="IMAGE URL" /></a>

Text on hover - You can use the alt and title code you see here if you want to show a line of text when you hover over an image. The difference between alt and title code can be a bit confusing. Here's a link that can explain it better than I can. :P

<a href="MY SPECIFIC URL"><img src="IMAGE URL" alt="TEXT" title="TEXT" /></a>

And there you have it. I use this code A LOT because it's pretty basic and simple. I use it for the header, the page tabs, and for the badges on my sidebar on White Sky Project. ;)

Got any tips or questions? :)