How to create an image map for a static FBML tab on a facebook page

Facebook

When creating custom FBML tabs for facebook pages, it can often be helpful to use an image map. An image map is a flat image (like a jpeg or a gif) that has been coded with HTML that makes parts of the image into live hyperlinks. A custom FBML tab is a tab on a facebook page that has been coded with FBML and/or HTML to do something unique. Here’s an example of a custom tab on a facebook page on the The Wall Street Journal’s facebook page:

As you can see, the Wall Street Journal greets new visitors with a custom tab called News, which acts like a landing page.

I’m not going to get into how to create a custom tab on a facebook page here since there are tons of tutorials around the web on how to do so. What we are going to discuss here is how to put an image map in your custom fbml page.

Step 1: Get your image

First, find the image that you want to make linkable. Maybe edit it in Photoshop or some other editing program and add text. It’s recommended to underline text you plan to make linkable to make them look like links. Let’s use the following image as an example:

If you mouse over the image, you’ll see that nothing happens, and there are no links. I’m going to make the words Social Icons a link to an icon search engine, and each image will link to a similar icon online that you can download.

Step 2: Upload your image to a server somewhere

In order for your image to appear in your facebook tab, it must be hosted somewhere online. That’s the only way facebook can “call” it in to the tab – it can’t call it from your hard drive on your desktop (unless your hard-drive is a publically accessible server, which is usually not the case). Here are two great places for uploading images for free: Photobucket and Image Shack. I like Image Shack for quick and dirty image uploads since you don’t have to create an account there – it’s optional, which is helpful if you later want to remove an image or have control over your images, but not required.

So let’s use Image Shack as our example. Follow the directions to upload your image, and you will get to a page that looks like this:

We care about the field above called Direct Link (I put a green box around it). Select and copy the whole URL in that field.

Step 3: Create an image map

The image map must be created with CSS. If you use HTML it won’t work in facebook. Lucky for us, there’s a great free tool online for creating CSS image maps: Image Map Tool.

Go to http://image-maps.com.
Once you’re in the Image Map Tool, enter the image URL you copied from the Image Shack page into the field that says “From a URL”:
Click on Start Mapping Your Image. You’ll come to a page that says that your image was uploaded successfully:
Click on the link “continue to next step.” That’s where the fun begins.
You need to select the parts of your image that you want to make into links. Most parts of the image can be selected with the Rectangle tool, but unusual shapes can be selected with the Custom Shape tool. In our case I’m going to use the Rectangle Tool.
When you click on the Rectangle tool, you get this floating thing that you can move around and resize, and enter the link and link title/alt text:

As you can see above, I moved the floating box thing over the words Social Icons and resized it so it covers both words. I entered a link to an icon search engine Iconfinder, and entered the alt text for the link. Next, click Save.
Click on the Rectangle button again and repeat this process as many times as you need until all hotspots are created. Since I want four links in this image, I repeated this process another three times.
Now, choose the options that you want from the sidebar under Advanced Tool Box. There are some useful and advanced options there, and I recommend you check them out, but take note of the options to Show Text Links and Allow Backlink. If you choose to show text links, text links will appear under your image with links to the places you’ve linked your image to. This could be good for usability since you’ll offer a text version of the links in addition to the image links.
The Allow Backlink option will put a text link under your image map to the Image Map site. If you can, it’s nice to give credit to this site for creating such an awesome free tool. But if you can’t, make sure to deselect that option.
Now click Get Your Code. This takes you to a very confusing page with lots of text and tabs at the top. Click on the CSS Code tab at the top of the page:

You will see a bunch of code. It’s basically ready to copy and paste into your FBML tab, but you need to make one change to it first. Image Map Tool adds a dotted black line that appears when you mouse over any of the links on the image, which is pretty annoying so you probably want to get rid of it. So you need to get rid of lines of code that look like this:
```
a.LINKx:hover {background:transparent; border:1px dashed black; color:black;}
```
The x above represents a number. The above line of code will appear as many times as links that you created in the image, and the x will be a number. So if there are three links, the above line will appear three times, and the x will be the numbers 1, 2, and 3 in each line.
Once that’s done, paste the code into your FBML tab and you’ve got yourself a working image map in an FBML tab!