How To Create A Custom Facebook Page With MapDesign

May 11th, 2011

Back in February of 2011, we made a post with a video tutorial showing you how to create a custom Facebook page for your business using MapDesign. Not too long after, Facebook discontinued the use of FBML which was vital to the creation of the custom Facebook pages. In this new video tutorial, we will teach you the new and updated way of creating your custom Facebook page using MapDesign. This method is actually a bit easier than the last video as we are able to use a Facebook App called iFramed. So without further ado, here is the new tutorial:

Video Transcript

As of March 2011, there was a change to the way we add our image maps to our fan pages on Facebook. If you’ve added your image map in the past, you most likely did it by using the Facebook Markup Language. FBML has since been discontinued, and there is now a new method for getting our image maps on Facebook.

In our tutorial, we covered how to sign up for a Facebook fan page. We will do the same here, however it will not be as extensive as last time. If you need assistance signing up for Facebook and then creating a page, you can refer to the old tutorial, but I will warn you that there have been some interface changes so things may look a bit different.

So let’s get right to it. What you’ve been seeing here is a Facebook profile. Like mentioned earlier, you must have one of these in order to create a page. From here, I am going to go to the address bar and type in pages, so that my destination is

Next, I will click on the Create Page button which is located in the top right corner.

Choose the type of page you are making, and fill out the required fields.

Now that the Facebook fan page has been created, I’m going to prepare my image. Remember that this can be any image you want, but for this tutorial, I am showing how to make your image a picture of your website since that seems to be the most popular request. So I will go to the page on my site that I want to be shown in my image, and I will take a screen shot by holding down Command, shift, and 3.

Next, you can see your screen shot on your desktop. Let’s open up our screenshot so that we can crop out any unnecessary parts of the image. Basically we want to crop out as much as we can as we’re going to be trying to fit a pretty large image into a pretty small area. Now I’m just going to copy what I have highlighted and then I will select New From Clipboard.

Next, and this is an extremely important step if you want the image to fit in the Facebook page, I’m going to select Tools in the menu bar, and then I am going to click on Adjust Size. Then I will change the value of the Width to 510 pixels. If you remember from the old tutorial, this number was 520px, but I am making it a bit smaller because I found 520 to be a bit too wide. I don’t have to change anything else as it is done automatically for me. Then I will save this image to my desktop.

Now we’ll launch MapDesign, and drag and drop this saved image, and it should appear in the application. As of now, this is just a screenshot of this webpage. It doesn’t do much, in the sense that I cannot click on any of the links. So for example, this navigation menu allows you to click on all of these links if you were browsing this page in your web browser. But as an image, this ability is gone. This is what we are going to change with the use of this application.

The first thing I’m going to do is choose the Rectangle option. Now I will be able to create the area that will have a live link. I’m going to do this for all of the text and images that I want to have links. I’m going to fast forward through this process since it can take a few minutes depending on how many areas you are going to link.

So now that all of my link options are set, you will notice that there are now a bunch of options in the Hotspots section, which is located on the left hand side of the application. These options are labeled Rectangle 1, 2, 3 and so on. Each of these represents each rectangle that I placed on the image. For example, you saw that the first rectangle I placed was around the area that says Home. This means that Rectangle 1 belongs to that area.

Beside each hotspot is an edit button. Selecting the edit button will allow us to set the URL to the destination we want to link each area to. So since this rectangle is surrounding the text that reads “Home,” I will link this area to the homepage. I will then need to link Rectangle 2 to the Store as that was the second hotspot that I created. We will need to repeat this process for the remaining hot spots on the image.

You will notice that for each link, I am including http:// and also selecting the option to open in a new window. You must do this as well or your image map may not function correctly.

When we are all done, we’re going to Export the image map by selecting File in the menu bar, and then pressing the Export button. I am going to export it to my desktop.

Next, I am going to create a new folder, and I am going to call it mapdesign. You can name it whatever you want, but make it something you can easily type because we’re going to be typing it in again. Then place the exported files into that folder. There should be one file named index, and one folder names images.

Now what we need to do with this folder is we need to publish it to our server. I am going to demonstrate publishing it to FTP. If you’re publishing to your MobileMe account, the process is going to be very similar.

So here I’ll just drag and drop the folder onto my server via CybderDuck.

Now I’ll head back to my Facebook page, and in the search field, I am going to type in iFramed. What iFramed is, is just an app we’re going to use to add our image map to our page. Doing it using iFramed versus installing iFrames manually will save us a lot of time, and it is much easier to do.

So we’ll click on Go To App, and then select one of the Tabs, and then choose the page that we want to add the application to. Then press the Add iFramed! button. This will take us back to our Page, and you will notice on the left, there is a new link that says Welcome. We’ll click on Welcome, and the iFramed app will load. Click the Start button.

Now we’ll need to type in the location of the folder that we just published. So if you published to the root of your server, you should type in your domain slash folder name. So for example, I will type in   If you published the folder to your iDisk, you will type in It is very important that you know the precise location of where you published the folder to, otherwise the image map will not show up.

You will notice that there are two different places to put your URL for your image map. One is the fan view, one is the non-fan view. So that means if you want to show different image maps for people who have Liked your page versus people who haven’t, you can do that. For this example, I will just make both of them the same. Press the Save buttons, and then you can preview your image map, and test it and make sure everything works the way you wanted it to.

And that’s how you customize your Facebook page with iFrames and not FBML. Now your Facebook page can have the same look and feel as your website.

18 Responses to “How To Create A Custom Facebook Page With MapDesign”

  1. Christa Says:

    I followed your tutorial on how to add an image map to a FaceBook Fan Page. I got as far as to publish. Then I got stuck. I don’t have CybderDuck, how do I publish to my MobileMe account?

  2. Jeremy Says:

    If you are publishing to MobileMe, you can follow the exact same procedure, except you will drag and drop the folder into your Sites folder on your iDisk.

  3. Chik Says:

    Hi Jeremy, can this same process be done too with iWeb? If I want to make a four page iFrame web site on Facebook?

    Thank you, Chik

  4. Jeremy Says:

    Hi Chik. It doesn’t matter what you use to build your website, you can still make your Facebook page look like your site using MapDesign,

  5. Mal Says:

    Hi Jeremy went through all the steps in the vid, but when I got to the iframe apps bit there were no tabs to choose from and the page looked different to the one in your film, I could pick off the page in a tab and assign a base URL but it didn’t have 2 boxes to submit, and my ragemap although 510 pixels wide was cut off on the right hand side. I then couldn’t view the page without it having a blue box around it (and this only on the welcome screen) I am sure I am missing something, new to all this social media stuff, any suggestions? Regards, Mal

  6. Jeremy Says:

    Hi Mal,

    Can you submit a support ticket to me, and include screenshots of what you see that differs from the video

  7. Morten Says:

    I followed all the steps, and everything looged as in your video, but I can’t see the image on my facebook page at all..

  8. Jeremy Says:

    Make sure every step is followed very carefully and done exactly as shown. Even a slight error will cause the image to not show up.

  9. How To Add A Facebook Like Button To An iWeb Site Says:

    […] you haven’t already, make sure you check out our video on how to create a custom Facebook page that looks similar to your […]

  10. Gary Ramsey Says:

    I followed your directions. On my Facebook page on the left is the Welcome icon. When clicked my home web page shows up. Is that it? I was under the impression that when you go to my Facebook page it would be there. I don’t want to have to click on welcome every time.

  11. aesha Says:

    Easy to follow tutorial. until publishing folder to Cyberduck. Can’t connect to my FTP server with Cyberduck. I’m using iWeb for my web design and Rage SEO tool for iWeb. Any other info on publishing the iFrame folder for the facebook page?

  12. Jeremy Says:

    You should be able to connect to CyberDuck. E-mail your web host if you are having trouble and let them know. They should be able to help you out.

    Also check out RAGE Web Hosting for all your hosting needs

  13. keith Says:

    when i get to the end , and press preview, i get “PREVIEW FORBIDDEN”
    you don’t have permission to access/facebook-webpage/on this server.
    were have i gon wrong please help

  14. keith Says:

    when i get to the end , and press preview, i get “PREVIEW FORBIDDEN”
    you don’t have permission to access/facebook-webpage/on this server.
    were have i gon wrong please help

  15. Bob Says:

    Will you be updating this information for the new Timeline format on Facebook?

    I love Rage Software products!!!

  16. julie Says:

    Is there any way to use this with timeline? I’d love to add hotspots to my timeline photo. It is currently a collage-style photo that I could link to several different pages on my site and my blog. Any way to do this?

  17. paul Says:

    No you can’t do this with timeline unfortunately.

  18. MoJoe JoJo Says:

    Couldn’t you use command+shift+4 and choose exactly what you want?

Leave a Reply