Facebook Custom Page creation and Integration 2011 Latest

The new layout, rolled out to all Pages on March 10, 2011, gives over a full two-thirds of Page real estate to the Page owner:

The Perfect Fan Page Leverages ALL the Available Opportunities

In this article, I will briefly discuss each of the Page areas, as labeled above, where I think Page owners should focus their attention, with an eye to an integrated look and feel, clean and uncluttered.

The Page areas are:

• Profile Picture;
• Left-column Navigation;
• About Box;
• Likes — Page Favorites;
• Photostrip;
• Wall (Custom Tabs).

The above Page areas are great for visual branding (Profile Picture, Photostrip, Custom Tabs), for brand messaging (the About Box), and for both (Navigation tab icons and titles, Likes/Favorites).

The Perfect Fan Page integrates all these elements to create a focused and compelling presentation of the brand.

The Profile Picture

The Profile Picture, at the top left corner of your Page, functions as your “logo,” your primary branding element.

The maximum size allowed for the Profile Picture is 180w x 540h pixels. It is advisable to utilize the full allowed width, but how tall you make the Profile Picture depends on what you want it to convey.

Some Pages use the Profile Picture for branding and to convey information about their brand or the Page, taking more advantage of the available 540 pixels:

While other Pages keep it simple:

There are a few things to consider when deciding on your approach to the Profile Picture:

1. If it’s long, is the height justified? The taller the Profile Picture, the farther down the Page it pushes your tab navigation, and you do want to keep your navigation as visible as possible.
2. Does it work well with the images in the Photostrip?
3. Does it provide enough visual “weight” to the top-left corner?

Your Profile Thumbnail: Do Not Neglect This!

Your Profile Picture thumbnail is the icon that displays next to your Page posts and your Posts on other Pages, when you comment as your Page (a great feature introduced with the new layout).

You should edit the Profile thumbnail so that its composition reflects good visual branding. By default, Facebook reduces your Profile Picture and selects a 50 x 50 pixel section for your thumbnail, but you can edit this to improve it, and you should!

Editing your Thumbnail: Mouse over your Profile Picture and click on the “Change picture” link that appears in the top-right corner of the image. Click the “Edit thumbnail” link below the image in the “Profile picture” screen. As it says, click and drag the image until it looks good to you. Click “Save” and you’re done!

The Photostrip: A Great New Opportunity for Visual Branding!

The Photostrip has been a feature of Personal Profiles for some time, but became available to Pages with the introduction of the new Page layout.

The big difference between the Photostrip on Personal Profiles and on Pages is that users can set the order of the 5 images on their Personal Profiles, to create interesting effects. Here’s mine, using my old CA driver’s license:

On Pages, you can control which 5 images comprise the Photostrip, but you can’tcontrol the order in which they appear. However, brands should, and have, adapted to the randomness and have created some compelling visual branding.

Ideally, images for inclusion in the Photostrip should:

• Not be dependent on the order in which they’re displayed;
• Compliment the Profile Picture;
• Compliment each other (work as a set);
• Convey information about the brand;
• Be compositionally simple rather than busy.

The Photostrip images display in the strip at 97 x 68 pixels. However, you can upload images at multiples of that size so they display in the Photostrip at 97×68  but display larger when the user clicks them.

For example, you could upload your Photostrip images at  970 x 680 pixels or 485 x 340 pixels.

Examples:

Riffing on the randomness:

Icons that represent the brand’s focus or industry:

Product images:

Product-related imagery:

Customers:

Messaging:

Abstract:

Note that none of these Photostrips is dependent on the order of the 5 images (except perhaps “HyperArts” which makes a sort of meta-comment on the randomness). As you can see, there are many possible approaches to working with the Profile Picture and the Photostrip, a great opportunity to create interesting and compelling visuals.

Custom Tabs — Powerful Visual Branding Opportunities

Articles that discuss Fan Page design tend to focus on nicely designed Welcome tabs (Examples: 1, 2, 3, 4). Since that’s been well covered, I’m not going to speak so much to that.

You should keep in mind the following when creating your custom tab:

• Does it fit into the overall visual branding of the Page?
• Does it utilize technology that will work on all modern browsers and platforms? (Avoid Flash, as it’s not supported by Apple devices.)
• If it’s a fan-gated “Reveal” tab (where non-fans are shown different content than fans), is the offer sufficiently enticing to encourage visitors to Like your Page? (Reveal tabs are a great way to build up your fans, if done well.)

Here are a couple examples of creative and effective custom tabs:

Soshables has great illustration and the tab utilizes sub-tab navigation to get more content into one tab:

Red Bull has a creative Reveal tab that appears to be semi-transparent, hinting at content available when the user Likes the Page:

Admins can set the default landing tab for non-fans of the Page (Edit page > Manage permissions > Default Landing Tab), so make sure you create a “Welcome” tab that introduces new visitors to your brand and, using the Reveal feature (as in the Red Bull example above), offers compelling reasons to Like your Page.

Create a Custom iFrame Tab: Free Facebook iFrame Apps

Facebook is encouraging all Page admins to transition their Static FBML tabs and FBML applications to iFrames.

IFramed pages, because they’re hosted on non-Facebook servers, support the standard Web coding protocols and thus allow much more functionality than was available using FBML (Facebook’s flavor of HTML) and FBJS (Facebook’s very limited version of JavaScript). But they require creating a Facebook application and, in general, require many more Web skills. (Tutorial: How to Create a Facebook iFrame Application).

But iFrames present a higher bar for amateur coders, who found working with Static FBML more within their grasp.

Good news for amateur coders: There are a number of free Facebook applications that allow admins to simply paste in the code they want to use, and avoid having to set up a custom Facebook application.

TabPress, a free iFrame app created by HyperArts, is a great app for creating an iFrame tab similar to how it was done with Static FBML.

Once the TabPress app is added to your Page, you can simply add your HTML, CSS and JavaScript content into the two text boxes (one for fan content and one for non-fan content), click “Save” and it’s done.

HyperArts also offers a multi-tabbed iFrame template (See Guy Kawasaki’sEnchantment Page and Mari Smith’s “Free Facebook Resources” tab for examples). Both templates can be easily customized by users familiar with Web coding.

Don’t Neglect Your Navigation!

Page admins were dismayed when Facebook, as part of its new Page layout, moved the blue-tab navigation from the top of the Page to the left column below the Profile Picture.

The left-column navigation, however, turned out to be a great improvement on those top tabs, allowing tab names of up to 36 characters (on the top tabs you got about 12 characters, then the dreaded “…”), and displaying the application icon for each tab (“tab” isn’t really semantically appropriate any longer, but it’ll probably stick!).

Because the navigation is now part of the visual branding (due to the icons), it means admins should use the navigation wisely, ordering the tabs by importance, and create custom iFrame tabs with custom icons to replace those dreary gray Static FBML tabs.

Navigation Editing: Click the “Edit” link just below the navigation, then click the “x” next to each tab to remove it from the navigation — this hides it; it doesn’t delete it — or click on a tab to drag it to a different place in the order (Wall and Info can’t be moved).

Keep Your Navigation Pruned and Visually Consistent

Because icons now accompany your tab names in the navigation, admins should make sure the icons fit into the overall visual-branding scheme. Here are some good examples, using icons to reinforce tab subjects and visual branding:

Also, make sure that your tabs are ordered by importance and that tabs with old or expired content (such as Events, Notes or Discussion tabs that are empty) are hidden. Also, because Static FBML tabs now include the associated app icon, I advise transitioning these to iFrame tabs sooner rather than later. It’s amazing how quickly those icons will telegraph “This Page is out of date”!

Balance Your Profile Picture’s Height and Your Navigation’s Visibility

Finally, when deciding how tall you want your Profile Picture to be, keep in mind that the taller it is, the farther down the Page it will push your navigation. Particularly because iFrame tabs make it difficult to use the “back” button in your browser (because the “parent” page loads the iFramed “child” page, the back button just goes back to the parent which again loads the child), it’s important that your navigation be as clearly visible and intuitive as possible.

The Likes — Your Page’s Favorites

Your favorited Pages appear in the left column just below your Fan Count. These are other Pages that your Page has Liked, not your Personal Profile, either by your having clicked “Add to my page’s favourites” link that appears on all Pages (what’s with the British spelling?), after the Likes section in the left column, or by your having Liked another Page while using Facebook as your Page rather than your Personal Profile (a new feature).

The five Pages that are displayed are pulled from a pool which can you administer. Admins should see this as an opportunity to promote other Pages with which they are associated, and curate this section accordingly.

Editing the Likes area: Click the “Edit page” button in the upper right of your Page, click “Featured”, click “Edit featured likes”. The popup box will show you all your Page’s favorites; tick the checkbox next to each to include it in the featured Likes area.

Here are a few examples of Pages using the Likes area for branding and promotion:

The About Box — Tell ‘em Who You Are

After the new Page layout change, the About box actually disappeared for a couple weeks, and everyone thought it had been axed. But then it reappeared.

Use this left-column box to display a little info about your Page or your brand. There are 78 characters displayed (includes spaces) and a total of about 240 characters, visible after the user clicks the “More” link.

Make sure your most important info is in those first 78 characters. You can put URLs in this section, but they won’t be “hot.”

So what’s the takeaway here?

With the new layout providing so much screen real estate for visual branding, it has raised the bar for a Page’s visual branding on Facebook. The new layout offers the opportunity to claim visual ownership of your Page, with Facebook reserving only that narrow blue band at the top and the right column.

Most of the Page is yours to brand as you like. Take advantage of it, be creative, and pay attention to detail! Every piece fits together to tell your story, so make your best pitch, and let users know they’ve come to a Page with value.

As you build up your fan numbers, you create an audience that has opted in to hearing what you have to say. Provide value and they will come, and they will listen.

I look forward to your comments!

Tim Ware is the owner of HyperArts Web Design, a San Francisco Bay Area agency that specializes in website and Facebook development. HyperArts is also the creator of TabPress, a Facebook application that makes adding a custom iFrame tab to your Page a snap. Tim also contributes to the popular HyperArts Blog, as well as the Social Media Examiner, and engages the community on the HyperArts Fan Page.

This is a guest post by Tim Ware, owner of HyperArts.