Facebook offers their own language too: Facebook Markup Language (FBML). It is a great branding tool for any business. I still don't understand the language completely, but I was pretty much able to make it work by adding <fb:fbml> and </fb:fbml> tags to my HTML code. There are a few resources online that explain FBML in detail. As a print designer, I prefer to leave the details to trained programmers.
Luckily for us print designers, imitating print design on the web is becoming increasingly popular. Here are a few tips I can offer to other transitioning print-to-web designers like myself.
- Add the Static FBML application to your Facebook Fan Page. (Static FBML is not available for personal pages). I believe Facebook recommends the app for most fan page categories. If it is not in your apps or recommended apps, type "Static FBML" into your Facebook search bar to add the application to your page. Once you can access the app, you will see the field to enter the a tab title and a field to enter your FBML code.
- Use tables. Purely by observation, I noticed that FBML ignores my spacer.gif images that Photoshop renders for in-between slices. So instead of using <td> cells throughout the code, I bypassed the limited HTML help that Photoshop could offer and used CSS for a background image and simple tables to position my Design Gallery images. The maximum canvas width is 760 px.
- Photoshop your background. The key to producing a branded look is to carefully design your background image. I didn't really take a lot of time to plan out this example. In fact, I was so eager to try FBML that I quickly took a stock photo and superimposed my face just to create an effective image for the purpose of my tab "All about d*." And it's not even me. Ah, the beauty of photo manipulation.
- Minimize code. FBML does not read relative links, so store your images on a low-character server name. You might also have noticed that I didn't space out the gallery images. This is because I am under the impression that pages created using FBML have a maximum character limit. Again, I'm not completely sure of a limit, but it is good practice anyway to keep your codes as short as possible without sacrificing load time. Of course, if spacing is a priority in your design, go ahead and put spaces.
- Lastly, consider your audience. Chances are, you are using a Facebook Page as a feed to your real website, so you want to use your custom tab as an opt-in initiative to your primary site rather than some confusing visual for your brand. You can also change your wall settings to default to your new FBML custom tab as a landing page. There's nothing like making a first impression with a snazzy opening.
Me ke aloha,