Friday, June 2, 2017

12 Easy Steps For Image Mapping an Instagram Landing Page

You may or may not have seen my landing page from Instagram. I tried several different ways to make this page. Just to be honest, I didn't want to invest in software what will do this for me. It's called priorities. I tried to have the perfect sized image with just clickable links. Well, sometimes they would be perfect and line up nicely, the next time they would get wonky. Totally sending my OCD tendencies into a twitch. Then I learned about Image Mapping.

One link on your Instagram profile? Here is a easy way to hack it - fo' free yo!

Image Mapping is a picture that can link different parts of the picture to different URLs.

The theory of this seems scary for someone who does not know much about HTML coding. Promise you can do this. Learn from my mistakes.

Preparation: Edit your photo. (Where all of my mistakes happened)

Get this photo exactly how you want it. Even down to the exact pixels wide you want the image. ANY editing after you have the code will throw off your map.

This image works best if you have the image aligned left. Keep that in mind while editing. I wanted my image to go from margin to margin. It took a little trial and error to get the width right. I settled on 600 pixels wide.

This is truly the most important to any image map. Take your time and get it perfect.

Upload your picture to your blog/website.

Okay this is may seem like an extra step, but seriously make sure you like the way it looks. You don't want have to do this whole process every time you edit the picture. Simply centering the image will throw off your map.

You are ready to start Image Mapping.

1 Upload your image to a secret board in Pinterest.
This seems silly, but you need your image to be hosted somewhere. You can use Photobucket, but have you seen how ad heavy that site has become! Owe! I couldn't even get a picture to upload without 7 ads.
2. To get your URL right click on your picture in your secret board and click "open in new tab".

3. Copy the URL from the new tab.

You can search "Image Map Generator" on your favorite search engine. I like this one, This will be the one I use to walk you through the process.

4. Put your URL on the home page, click the button.
5. Then click the tiny continue. It is small and can easily be missed.

The next screen is where you are going to do all your mapping.

6. Right click to create your shape. Put the shape around where you want your link.
7. Add your link and your title. Hit "save".
8. Continue until you have everything linked.

After you have added all your links.

9. Right click "Get Code".
10. Click on the second tab and scroll down to get the code.
11. Copy this code. It is all the way at the bottom of the page.

12. Insert the Code on your site.

Now you just post the code where you are going to use it. As a landing page you are going to want a dedicated page to this. I use Blogger for this blog and I have a dedicated page. I have done this same concept for my social media contacts. In that case I added the code to a HTML/Rich Text gadget box.

When I was blogging with Shopify I added it to a page for my store and it worked perfectly.

Now it is time to sit back and admire. Or click on all your links and awe in your tackling something outside your comfort zone! You only had to do it once since you learned from my mistake and were meticulous in the preparation of your pictures. (Every time I have done this I have had to redo my map MULTIPLE times.)

No comments: