Blog Design 101: Clickable Social Media Icons

It's that time of the week again dudes! That time for another installment in the "Blog Design 101" series. This week we're talkin' clickable social media icons! Yay! Let's just jump right into this then!

There's so many different ways to make social media icons and so many different and fun ways for them to look. I've found that my personal favorite style for my social media icons is just to have them in a nice rectangular shape, with a fun/soft color palette, and a nice font. Doing them that way takes a little more work, though, so today we're just going to be sticking with whats popular right now, the little circular icons!

The first step in creating our clickable social media icons is to pick the images for them. Icons DB is the best place I've found to get social media icons. They have all sorts of adorable little sets like weathered wood, sandstone, vintage paper, etc. If you just want to do a nice solid color you can do that too! There's a nice little option on the top left for you to enter in the hex color code of the color you're wanting and Icons DB will generate your icons in that exact color. Don't know the hex color code of the color you want? Easy solution! Head over to Encycolorpedia, and you can get the hex color code for virtually any color! All you need to do is select the tab bar at the center of their homepage and a color bar will show up for you to select the color that you want. Once you're in the general area of the color you're looking for a new page will open up for you with the color's hex code and further details about the color and similar colors.

Once you've selected the icon that you want and entered in it's hex code for the exact color you want, you'll need to download the icon. Now, the icons are downloadable in a few different sizes. The size that I've found that works the best without being too big or too small is the 48x48. You'll want to download it as a PNG as it works the best for quality purposes. To download it just hit on the 48x48 link underneath the PNG column and save the file. After that, the image should be saved in your "recent downloads" folder. To access it you'll want to move it from your "recent downloads" folder to your "photos" folder. You'll want to repeat this step for each of the icons that you want.

For my faux blog, The Princess and the Pea, I'm just going to stick with an Instagram, Pinterest, and bloglovin'. Now, Icons DB doesn't technically offer a bloglovin' icon currently so I just made my own in photoshop, just as an FYI so you all don't wonder why you can't find one. Anyway, once you've got all the social media icons you want downloaded you'll want to line them all up in one image. Doing that is fairly easy. All you need to do is open up a new document in your paint program and paste in your icons side by side. After you've done that be sure to size down your canvas so that it's just big enough to fit your icons. Next, you'll want to save your newly lined up icons as a PNG image. Then, upload your photo to an image hosting site, I like to use photobucket.

All right, now that we've got our image of our icons uploaded to photobucket, we need to make them clickable. To do that we're going to be using Image Maps. To begin, open up your icon's image file from your computer and select "start mapping". Now, the VERY first thing you'll want to do is change the image source. The reason you'll want to do this is because Image Maps doesn't host images so if you don't change this your image will be taken down within 24 hours and if  you install it on your blog the only thing that will show up will be the Image Maps logo. Alright, to change the image source just right click anywhere on your Image Maps screen and a dialogue box will open up, you'll want to choose the "options" tab. That will open up another dialogue box for you that has three different fields listed below the "Image Map" tab. The fields should be, Image Source, Base URL, and Image Map Name. We're going to be changing the image source and base URL. For the Image Source you'll want to enter in the direct link for your photo from photobucket (this is found on photobucket next your image under "Links to Share Your Photo"). Next, change the Base URL to http://photobucket.com Hit save and Image Maps will tell you that to you need to create an account with them to save a map. Just ignore it, the message will disappear and your changes will be saved.

Now you'll want to right click over your first icon. Click on "create rect" and then click and drag your arrow to create a square over your icon. Next, in the dialogue box that opened up you're going to want to enter in the link you want your icon to go to under "Map URL". For instance, if I were doing my instagram icon, under the Map URL I would enter in the link to my insta account, instagram.com/lifeofacoyfish. Repeat this step for each of your icons to make them clickable.

To finish up you'll want to right click anywhere on your page again and select the "get code" option. A dialogue box with three different tab options will open up. Under the first tab, Map Info, make sure that the Image Source is the link to your photo on photobucket (like we changed it to). Then hit the HTML Code tab and scroll all the way to the bottom and copy the "HTML Image Map Code".

To install it just head over to Blogger, go to layout, and hit "add a gadget" on your sidebar. Select the "HTML/JavaScript" option and paste in the code  you got from Image Maps. Hit save, drag your gadget around to wherever you want them to be on your sidebar, I put mine on top of my "about me" photo but you can put them virtually anywhere on your blog, and boom-shack-a-lacka you have fully functioning clickable social media icons!

I hope this was helpful, and if you have any questions at all just comment below and I'll do my best to answer! Next week will be our last installment of the "Blog Design 101" series and we'll be going over how to make small adjustments to in post photos that will make a lifetime of difference to the quality of your posts!

Much love!