Design Your Facebook Page Like a Pro - Image Maps Tutorial

I was recently wowed by the Facebook page of eXp Realty. I'm not exagerrating when I say, in terms of design and branding coherency, eXp is the best brokerage FB page I've seen thus far. This must have cost extra, I thought. I was convinced that eXp must have paid FB something extra to enable such a page. Totally kosher, in my book. Just not something that was on our radar yet here at DriveBuy.

What was so special about the landing page?

  1. Nearly the entire page was custom: Almost every element in some way represented eXp in a brand-consistent user experience.
  2. In a technical sense, I simply couldn't figure out how eXp seemed to place several images on the same page while also having each link to a different area of their website.

Now, I'm not the most technical here at DriveBuy. Not even close. So, I asked the others how it could have been done and they told me about image maps. Image maps are actually a single image with overlayed coordinates that tell your browser where on the image it can find links, and where each link should go. I'm not entirely certain that this is how eXp went about it, but this is what we attempted and it worked.

The thing is, upon digging around, I was discouraged from doing anything like what eXp was doing. I gathered that image maps were a) difficult to create b) somewhat outdated and c) not compatible with Facebook in the first place! But, because I'm me, I didn't let logic or reason deter me. Here's how I did it.

  1. I created the above JPEG image using Photoshop. That's a guide unto its self, but there are many ways to create an image or pull one from an existing website. You'll notice that the buttons above aren't actually buttons at this stage; they don't link anywhere, yet...
  2. I Googled around, until I found this amazing site: Amazing, because not only is it free, but it's incredibly user-friendly. Plus, you are not required to promote the site with any kind of watermark attached to your image. It's 100% yours after you make it.
  3. I uploaded my JPEG and continued to the next step. Then, I mapped out the buttons using the rectangle drag-and-expand boxes, making sure to correctly insert the desired links in each field. Upon completing this step for each of the five buttons above, I clicked "Get Your Code".
  4. The site outputs code of two types: HTML or CSS. Facebook will only accept image maps encoded in CSS. Copy this code to Notepad or a Google Doc.
  5. Upload your JPEG to a publicly-accessible location, either on your website or a place like Flickr. Copy the unique URL of this location.
  6. Look at the generated CSS code you copied in step 4. You'll only need to make one change. Look for "background:url" on the second line. In the parentheses that follows immediately, swap the existing URL with the URL of your hosted image.
  7. Go to your Facebook page. If you are promoting a business, it need a page, rather than a profile. You can be booted from FB if you don't do this. Now, you'll need to search for FBML in Facebook's search box on the right upper corner. Your first result should be an application called "Static FBML". Click on "View Application". Then, click "Add to My Page".
  8. Go back to your your business's Facebook home page. Click the + sign next to the other light blue tabs. From the drop down, select "FBML". You've now created the tab that your visitors will land on.
  9. On the menu to your left, click "Edit Page". Go down to "FBML" and click "Edit".
  10. Choose a name for this page. We chose the name of our company, DriveBuy. Simple, right?
  11. Paste the CSS code directly in to the "FBML" box. Save changes.
  12. By default, this new tab will be the landing page for someone that is not a fan of yours yet. That's how you should want it.

That's it! What do you think?

Comments (1)

  1. Maura Nevel Thomas:
    Dec 03, 2009 at 10:29 PM

    I'm saving these instructions. Thanks for spelling them out in non-programmer language!

    Maura (@mnthomas)

Add a Comment

Allowed tags: <b><i><br>Add a new comment: