Facebook Fan Page Design – Part 1: A Custom Look

You can’t live with them. You can’t live without them.

While privacy concerns continue to grow, I can’t ignore the power of Facebook.  The Google Analytics reports on all my church client websites continue to convince me that Facebook should absolutely be a part of the online arsenal of the local church.  So, for now, since I can’t beat ‘em… I will EDUCATE the masses and, well, I’ll join ‘em.

This will be a six part series on giving your Facebook Fan Page a makeover and improved functionality. So you know what lies ahead, here is a rundown of what we will cover in future weeks:

1. A Custom Look – Basic HTML and FBML enhancements
2. Creating a Micro Site – Dynamic design inside a Facebook tab
3. Photos – tricking out your photo gallery
4. Videos – integrating video
5. Events – a thorough look at events
6. Polls, Signups & More

HTML vs. FBML

WARNING: Geek Speak Ahead!  You can’t tweak your Facebook fan page without getting into some code.  While I will try to speak English and keep it simple – this may scare some of you away.  You can always hire a web designer (like me to redesign the page, but if you are comfortable with a little HTML and CSS, jump right in.

Facebook Fan Pages are growing in popularity, but are very basic and uninteresting.  We hope to change that.

The main features on the page are the different tabs (called ‘boxes’) that make up the overall look of the page. The standard items on each Facebook Page are “Wall” and “Info” while popular applications (show up in separate tabs) and “Photos,” “Discussions,” “Videos,” and “Notes.”

What all of these items are lacking – is the ability to modify a page so that the visual appearance could match that of your website, promotional material or landing page. One simple application can add this functionality to your pages and pull in Facebook statistics as well.

The application Static FBML will allow you to create a new tab on your Facebook Page that can be completely customized to mimic your web presence by displaying HTML and FBML so that you can render a truly customized section for your fans. Here is a step-by-step look at how you can implement this tactic.

First, you must have an active Facebook Page that you have admin access to. Then, head over to the Static FMBL Page and choose the “Add To My Page” link:

Once clicked, you will have the ability to choose a page (or pages) that you can add this application to. The application will then be added to the chosen Page(s) and will be labeled “FBML.”

Next, you will want to click “edit your page” then choose to edit the “FBML – FBML” application.

This is where the magic happens and the customization occurs. You can use simple HTML to fill this page and really have it stand out from your competition. An important note is that javascript is not supported, so just stick with plain old HTML for best results.

Here is an example of what can be done on a Facebook Fan Page using this technique:

Next week, I will go into more depth and provide some code for you to create a micro-site on your fanpage.Until then…