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

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:

wsj-fb-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:

social-icons-text

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:

imageshack-directlink

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.

  1. Go to http://image-maps.com.
  2. 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”:
    Image Map Tool
  3. Click on Start Mapping Your Image. You’ll come to a page that says that your image was uploaded successfully:
    image-map-file-upload
  4. Click on the link “continue to next step.” That’s where the fun begins.
  5. 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.
  6. 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:
    image-map-rectangle-tool
    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.
  7. 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.
  8. 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.
  9. 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:
    image-map-css-code
    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:
    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.
  10. Once that’s done, paste the code into your FBML tab and you’ve got yourself a working image map in an FBML tab!

Sources:

Responses (27)

Rebecca

July 18, 2010 8:23 am

so helpful! you always know the best tricks.

Pingback: Tech Life: Image Mapping | AnneOnLife

Dustin

August 3, 2010 8:09 pm

I have used this tool as well as other mapping techniques before, but have always had trouble in Internet Explorer. It does not seem to show in newer versions of IE. How can this be fixed? Thanks!

rob

August 16, 2010 2:38 pm

Really useful post, mega clear and well presented. Helped me loads. Thanks

Rob

Pingback: C21SocialMktg (Tassia Bezdeka)

Pingback: C21SocialMktg (Tassia Bezdeka)

JoC

August 27, 2010 11:23 pm

I love you man :’D

Tanya Nel

September 17, 2010 4:31 pm

I was so excited to find this, especially as it seems like other readers had success. I did exactly what you said and it did not work :-(

Kip

September 20, 2010 11:14 pm

This worked GREAT. Thanks so much!

drew

September 24, 2010 7:29 pm

Didn’t work for me either. I enter the CSS code to FBML and go to the page and there are the links at the bottom of the page but the mapped links within the image are not linked. Please advise.

Pingback: onion_papa (onion_papa)

Carolina

October 21, 2010 3:21 am

Doesn´t work for me either. I´ve tried it a couple of times. Once I insert the code in FB I see the image but the mapped links are not working.
Pleasssssse help!!!!!!

Phillip

November 24, 2010 9:05 pm

it works in a normal html page, but not in my facebook fanpage. I need help, please

Patrick

December 7, 2010 7:58 am

I am having trouble with this. I used image-maps.com to create the CSS code that overlays on top of the div. And the final product looks right but doesn’t act right. The links show up correctly and I can right click and open them in new tabs just fine, but I cannot left click and follow the link normally. Any idea why?

Here is the page:
http://www.facebook.com/airfiremobile?v=app_4949752878

Michael

December 14, 2010 3:16 am

Dustin,

The problem with IE is that it doesn’t handle inlined CSS styles like those generated using Image-maps.

There’s an excellent guide at http://www.hyperarts.com/blog/static-fbml-external-stylesheet-css-styles-wont-work-internet-explorer/

that takes you step by step through what needs to be done to get it to work with IE.

Pingback: 5 Facebook Applications to Add Useful Tabs to Your Facebook Fan Page | Search Engine Journal

Mike

January 12, 2011 3:16 am

Very clear and simple instructions! Got it working first time and it makes a huge difference. Thanks for this.

Tanya

February 9, 2011 4:41 am

Thanks so much for these brilliant instructions – it was a breeze!

Steve

February 17, 2011 11:46 pm

Thanks for the great tutorial – I just created a new welcome facebook page – the css code works perfectly and oit looks like the author of image-maps.com took notice of your comments about removing dashes – I didnt see any in the code.
http://www.facebook.com/bamfordcs

    Miriam Schwab

    February 18, 2011 9:24 am

    Steve, I’m glad you got it to work!

SCube

February 24, 2011 4:35 pm

THe custom shape dosent work for me

Erik Giberti

March 4, 2011 11:42 pm

Facebook will no longer allow the installation of the static FBML application effective 3/11/11. Facebook is also recommending developers transition their services away from FBML. Creating applications is generally more than most people need. I’ve built this application allows users to replace their Static FBML application with little or no modifications http://www.facebook.com/revealtab and it will even support image maps. Cheers!

Jernej SLO

April 5, 2011 8:01 pm

Thank you for this informations!
This is very very good webside..

amna

May 20, 2011 10:23 pm

It is very nice lesson for fbml learner. I have tried and it very easy to understand. Thank u!

April

October 18, 2011 8:29 pm

I got everything to work fine. But I’m having one problem. When I click on the links I mapped in my landing page, they open in the Facebook window and not in a new window. How do I fix this?

Razibul Hassan

November 28, 2011 11:58 am

After getting code from the image-map.com site, I’ve copied it on the static FBML apps code area. The image is shown but the image map hyperlinks do not work ??? On the iamge-map.com site, the hyperlinks worked.

How can I solve this ??? ANY IDEA?

Razibul Hassan

November 28, 2011 12:02 pm

Hi, Just solved the problem… HTML code did not work but CSS code worked….

Leave a comment