We’ve often been asked whether it is possible to add UMapper map to a custom tab on a Facebook page. The answer is yes, it is possible and very easy. This tutorial is shows how to enhance your page with an interactive map in 7 easy steps.

1. Install the Static FBML application on your fan page by clicking on ‘Add to My Page’.

2. Go to the main page and click on ‘Edit page’.

3. Select the FBML application and click ‘Edit’ to begin editing the page.

4. Name the box and add your UMapper map embed code (see below). Then save the changes. By default this will be a new box or your boxes tab.

Adding the embed code is a bit tricky. In order for the map to be displayed we have to modify our standard embed code using Facebook Markup Language (FBML). Below are several FMBL embed code templates. Copy the one you need and replace the map ID. The map ID for your map can be obtained from the map view page on UMapper.com website. This is what it looks like:

Copy map ID and paste it into the embed code:

Standard Embed

Weather Map

GeoDart Game

5. Edit your page just like in Step 2. Locate the fbml box that you just created and select Application Settings.

6. Click on ‘remove’ to get rid of the box and then click on ‘add’ to convert the new box into a tab. Then click on ‘Okay’.

That is it! You will have a new custom tab with an embedded UMapper map. To see the new tab in action, check out our Facebook page and don’t forget to become a fan.

For more information and helpful Facebook tips, take a look at (Anti) Social Development blog by Kim Woodbridge.

p.s. If you want to add UMapper map to your status feed, simply click “Facebook” share button on the map view page.

This entry was posted on Tuesday, February 2nd, 2010 at 10:02 am and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.