Image Map

Facebook Pinterest Twitter Instagram Email Family Home Crafty Recipes Goals Blog Roll PR

Thursday, January 3, 2013

DIY: Mapped Social Media Buttons

There are a lot of tutorials out there on how to design your own blog social media buttons, but I found that tutorials on how to actually link and map them were seriously lacking. If you make them as individually linked images side by side, than its as easy as a short HTML code telling each picture where to send the person clicking.

If you want to create a picture with various embedded links, like I have on my side bar, its not as easy. Well, its still pretty easy, but done in a different way. Here's a quick tutorial on image mapping to create hyperlinks for your social media buttons!

During my blog design redo, I stumbled upon a fantastic website, called Image-Maps.com, that made my social media buttons a breeze. Its literally draw a shape, assign a link, and save.

First, upload the image you want to use for your social media buttons. Again, there are lots of tutorials on how to get to this point so I won't be redundant. I used Photoshop to make mine, but you can use a number of other programs. Be creative! Find components of your blog that coordinate.

Once you have an image, upload it to Image-Maps.com to start mapping it. For this tutorial, I'm going to use a sample image I found while looking for social media icons.

When you upload your image, this is the screen you will see at first. There are several options on the right side bar - be sure to unclick "Show Text Links." All this does is put ugly text at the bottom of your pretty picture.


From here, you have two options for creating links - using a rectangle shape or creating a custom shape. For the triangle shaped pennants on my original picture, I used a custom shape, but for these buttons a simple rectangle is fine. Make sure the shape is over the particular area you want to use as a link.


In the picture above, the square is over the second box - Twitter. Once highlighted with a link box, input the URL for your Twitter account. You can test the link before saving to make sure it directs to the correct place. Once you're happy with it, hit save on the right side bar. Continue linking all of the areas within your picture until you're happy with everything.

Once done, click "Get Your Code" on the right side bar to see the HTML code for your linked image.


Next, you'll go to a page with lots of information on it and if you're like me, you'll say, "wait....where is my code?!" There are tabs at the very top of the screen - click HTML code. Ta da! This next part is very important. Image-Map.com will NOT host your original picture for you. Within the code is the link to the temporary hosting spot for the image. You need to replace this with the link to the hosting site or it will be deleted in two days screwing up your image and links. 

This is the code for the image I just mapped (click on it to enlarge)...

I highlighted the image hosting information in red so you can find it easily. The code will be put between the quotation marks and start with http:// and end with either .jpeg or .png. 

I hosted my image within my Google account since its linked to my blog anyway, but you can use Photobucket, TinyPic, Image Shack, Flikr - wherever you host your pictures. Wherever you end up hosting, be sure to open up permissions on the photo - if its private or not shared, it will not show up when linked in a public place.

Once you replace the highlighted code, copy and paste the entire code into your blog design where you want it. In Blogger, create a new HTML/Java widget on the side bar and insert the code in there. Here is the mapped image I created through this tutorial. While not all of the images are linked, you get the idea.  

It can cost quite a bit of money to have someone design and make a social media set like this for your blog. The folks at Image-Map.com do this as a FREE service, which for small time bloggers like me is amazing. If you do use their image mapper, consider donating through their PayPal link on the code page. :-)

Have a question that I didn't answer? Let me know! I don't know everything about HTML and blog design, but there is enough internet out there to fill in the blanks!

4 comments:

  1. Yay! I have been looking for something like this for aaaaages and had become convinced that it just didn't exist. Thank you for sharing!

    ReplyDelete
    Replies
    1. You're so very welcome. I'm glad it's helpful to someone out there!

      Delete
  2. Thank you for sharing this - it was EXTREMELY helpful and saved me from hiring anyone. And just proud that I could do this!

    ReplyDelete
  3. Do you know how to map your email address with an email icon? I've been trying to figure it out for weeks but so far, no luck!

    ReplyDelete