Ever wonder how to get those clickable social media icons for your blog? I figured it out and I want to show you how you can do it too.
I'm a do-it-yourselfer when it comes to most things in my life including my blog.
So when I was updating the look of my blog this weekend, I also changed up my social media icons that you see on right hand side of your screen.
It's actually pretty easy. So I thought I'd put together a tutorial for you.
Step 1 - Create your Social Media icons in PicMonkey.
Here's the one I used for my blog. I've only included the ones that I actively use... for now.
By the way if you want to try the free update of PicMonkey for a day, here's my referral link. :)
Let me know if you would like a tutorial on creating the social icons in PicMonkey and I will put one together too!
Step 2 - Upload to a Image Hosting site.
I use "Photo bucket".
This is very important to host your image somewhere because Image Maps will delete your non hosted images off their site after 24 hours.
Step 3 - Upload your Image to Image Maps.
Go to www.image-maps.com. You can create a free account, so that you can save each image "map". However, I realized afterwards that that this not necessary. I tried it while I was logged out of my account, and it worked as well, so it's up to you. You do not need to have them host your mapped image because it is already being hosted somewhere else.
Upload your file either from your computer or from the image hosting site... once you see your image displayed...Then click "Click to Continue"
You will then be re-directed to a screen where your Icons show up. Put your cursor directly over the icon that you want to "map" and right-click your mouse. The pop-up will show as below. I chose to create a rectangle over my icon, because the circle was a little weird for me to work through.
The screen below will pop up. In the box "Map URL" enter where you want your icon to end up. You can see I mapped mine to end up at www.facebook.com/somersetlane.
So the same thing for each icon and hit save after each one.
Once each icon has been mapped, you will have a red box over the icon (like below). In my image below, I have only mapped "Facebook", but you get the idea.
If you have created an account... Right - click your mouse and choose "Options" and make sure that you have the address of the site that is hosting your image (ex. Photobucket). Hit save. This part will only work if you initially created an account.
Like I said before you do not need to create an account to get your html code.
Next, right-click your mouse and choose " Get Code". Verify under the tab "Map Info" that your "image source" is the correct address of where your image is being hosted (ie. Photobucket). Image -maps gives it a generic address.
***WARNING - if you originally uploaded your image, you must change the image source. All non-hosted images will be removed within 24 hours *** You will see the warning above your code too.
Then you can click on tab for tab for "html Code", scroll to bottom and you will see the code at the bottom.
You can now insert your html code wherever you want you mapped image to be used.
See, easy-peasy lemon-queezy! (yes, that's a techinical term)
I hope that was helpful. Is anyone interested in a tutorial to create the Social Media Icons? Let me know, if you have any questions.
Shared at: Whimsy Wednesday, Weekend Re-treat, Strut your Stuff