Falls Ihr den Artikel auf Deutsch haben möchtet, bitte Bescheid sagen! Dann mache ich mich die Tage da noch dran. :)
Assuming that many of you already have a Facebook fan page for your business, I thought it was time to show you how to pimp that page - standing out from the crowd has never been easier!
I am assuming you have some knowledge of handling a graphics program. Check out my Facebook page to see what I did.
Basically, it is an image with a so-called image map, where different links are placed on areas of the image. It sounds more difficult than it is, though. :) The image may look a tad lost on the wide Facebook layout, but FB will soon (August 23rd) limit the width of these pages to 520px, so that is the widest your image can be.
Make your image
Use whatever graphics program you like. I usually work with Fireworks, a free alternative is GIMP. I would probably try and base your image on your banner or website. The image should be max 520px wide. Decide which areas you want to link to from that one image, and incorporate that.
In my case, I link to separate pages on my blog for the Disclaimer and About Me, to the My Etsy tab here on Etsy, to my Etsy, my blog, and my Twitter. So, it really works like a website on Facebook!
Trick for getting the typeface nice and crisp, although it is an image - write the text in Word, take a screenshot and paste that text into your image.
Add the image maps
To easily add which area of the image has which link, without an HTML editor, use Image-Maps. The site is awesome. Click on "browse" to select your background image from your computer, then click "Start mapping your image", the continue to next step.
Click on "Rectangle" on the right side. A rectangle pops up in the upper left corner; click and drag in the middle of that rectangle to move it the part of the image where you want start adding links.
Don't forget to click Save after you have adjusted the rectangle size, and added the link and possibly Alt text (the text that appears when you hover above a link.)
Continue doing that for the rest of your image. Once you are done, click "Get your code". Choose CSS Code from the tabs on top, then copy the whole code and paste it into Wordpad or Notepad - easier to adjust.
Upload image
The image needs to be uploaded somewhere, for example to your website hosting or Photobucket. You need to get the address of the image, so you can use that when adjusting the image map code.
Change code
In the code that you just pasted to Notepad, find the part at the beginning that says (for example) background:url(http://www.image-maps.com/uploaded_files/8201007151122591_fbcontent.jpg); - Take your own web address to your image and replace the bold part with that web address.
For every link, there is one part of the code that says {background:black; border:1px dashed white; etc - unless you want a dashed line to appear for every rectangle box, change the border to 0px for each over the links.
Install Static FBML
FMBL stands for Facebook Mark-up Language, and basically works like HTML. They have an app that allows you to design a Facebook page with web coding. Go to Static FBML on Facebook and click "Add to my page" on the right side underneath the logo; if you have more than one page, you will need to choose which page to add FBML to.
Edit FBML
Go to your fanpage. Click on "Edit Page" on the left side, underneath your profile picture. Click on "Edit" for the Static FBML application.
The Box Title will be the title displayed on the tab. Copy the changed code from your Notepad and paste it in the large field. Save.
Frontpage
You now should have a tab with your new, good looking page - now all we have to do is make sure that people accessing your page see this pretty baby first.
Go to "Edit Page" again, then click "edit" for the Wall Settings. Select your new page from the dropdown menu... and you are done!
