Design Your Facebook Page Like a Pro - Image Maps Tutorial

By
Services for Real Estate Pros with DriveBuy Technologies

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: http://www.image-maps.com/. 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 FMBL 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?

Posted by

Ian S. Greenleigh, Director - Sales & New Media, DriveBuy Technologies

close

This entry hasn't been re-blogged:

Re-Blogged By Re-Blogged At
Topic:
Real Estate Sales and Marketing
Groups:
Realtors®
Almost Anything Goes
Dedicated Bloggers
Addicted to Active Rain
Cosmic Cow Pie...The Rome Way
Tags:
social networking
networking
design
images
branding
facebook
social media
websites

Post a Comment
Spam prevention
Spam prevention
Show All Comments
Rainer
407,421
Sean Allen
International Financing Solutions - Fort Myers, FL
International Financing Solutions

Very interesting. Thanks for sharing ths with everyone.

Sean

Nov 19, 2009 10:04 AM #1
Rainmaker
658,260
Pat & Wayne Harriman
Harriman Real Estate, LLC (203) 672-4499 - Wallingford, CT
Broker/Owners, Wallingford CT Real Estate

I agree, eXp's page is super! Thanks for posting this tutorial; I'm bookmarking it for future reference!

Nov 19, 2009 10:10 AM #2
Rainer
232,295
Sara Woolford & Steve Golson, ALHS
iTexas Realty Co. - San Antonio, TX

Hi Ian-  I have bookmarked this for my "homework" page.  Thanks for showing the 'how-to"  --Sara in San Antonio

Nov 19, 2009 10:35 AM #3
Rainmaker
595,386
Lisa Hill
Florida Property Experts - Daytona Beach, FL
Daytona Beach Real Estate

Gaahh. I'm trying so hard to focus on this, but my head is spinning. I'm bookmarking for future reference. =/ I just recently created a "real" Facebook page. Due to 3 years of YouTube videos and interraction, I've had to hide my real last name. Then Web 2.0 came along. And there are some real psychos on YouTube! Over 2000 subscribed to me! O_O So I have to try to be fully immersed in social networking, while at the same time, keeping a seperate persona as a roadblock. Anyway, I'm going to get my business page (with my real last name) pimped out soon.

Nov 19, 2009 01:40 PM #4
Rainmaker
263,504
Michael Bergin
Coldwell Banker Residential Brokerage - ABR - SRES - Alexandria, VA
Northern Virginia Real Estate

I confess to understanding very little of what you posted but it definitely sounds like something I NEED to understand so you are bookmarked for some serious homework.

Thanks for taking the time to put this together for AR.

Michael in Alexandria - Northern Virginia'a Best Small City

Nov 20, 2009 09:25 AM #5
Rainmaker
317,567
Susan Brown
Keller Williams NE, Kingwood Texas (Humble & Atascocita too) - Kingwood, TX

Ian - This is wonderful.  I am going to use your tutorial to see what I can come up with.  I agree with you about the Exp Realty page - it doesn't even look like FB.  I'll let you know how it goes.  Thanks.

Nov 20, 2009 11:26 PM #6
Rainmaker
320,835
Carra Riley & Declan Kenyon
Brokers Guild Cherry Creek Ltd - Westminster, CO
Helping people Transition at all ages!

Ian,

You SIR are such a credit to the sharing in activerain... I know it took you many hours to do this!  Now all I have to do is print out your post... and go through each step one at a time... and have a finished product that you spent hours figuring out! 

Thank you is not enough... How do we show our fellow rainers that THIS is what sharing in Social Media is all about???... I am going to feature this in the Cosmic Cow Pie and see what else I can do to let eveyone see this post and use this fantastic tool! Thank you again for helping us BRAND ourselves in cyberspace with an easy "How To" post!

You ROCK! 

Nov 21, 2009 08:21 AM #7
Rainmaker
643,145
Marchel Peterson
Results Realty - Spring, TX
Spring TX Real Estate E-Pro

Ian, It is getting late and I need to read this when I'm not feeling tired.  I know that I need to work on my facebook page so I'm going to bookmark for later.

Nov 21, 2009 02:51 PM #8
Rainmaker
516,438
Russell Lewis
Realty Austin, Austin Texas Real Estate - Austin, TX
Broker,CLHMS,GRI

Nice seeing you (so to speak) on Jason's talk show today. I will check out your suggestions!

Nov 24, 2009 09:35 AM #9
Rainmaker
68,159
Nelson Carrillo
McMillin Realty - Phone: (619) 940-6560 - Bonita, CA
South San Diego, CA Homes For Sale

THanks for the info.  I have bookmarked and subscribed to your blog. 

I'm going to give it a shot!

THanks,

-Nelson

Dec 16, 2009 02:06 AM #10
Rainmaker
475,316
Eva Aliaga
Partnership Realty Inc - Boca Raton, FL
Boca Raton & Delray Beach: SE Florida Real Estate

Wow, I will bookmark this to try later on. Good work on your image map.

Dec 19, 2009 07:41 PM #11
Post a Comment
Spam prevention
Show All Comments

What's the reason you're reporting this blog entry?

Are you sure you want to report this blog entry as spam?

Rainer
26,570

DriveBuy Technologies

Ask me a question
*
*
*
*
Spam prevention

Additional Information