A few days ago on GDB, we discussed elements of an awesome facebook page for your design business. Today I would like to explore the phenomenon of custom facebook page design a little further. Being the awesome designers that you are, I won’t waste my time including a tutorial on how to design a facebook page in Photoshop, but this article will elaborate on some of the finer points regarding the design and code of your facebook page.
Whether you are designing and coding a custom facebook page for your design business or for one of your clients, these rules will help you have a successful page every time. Remember to review the points from the last article (link above) before diving in.
Why waste your time on facebook?
You might be asking yourself, first and foremost, why you should worry about wasting your time on designing and coding a custom facebook page. Aside from the obvious answers like “facebook is the biggest social media venue” or “all your clients are on facebook, if you’re not, then you’re missing out”, you should take time to learn how to design and code your own custom facebook page because it’s a great skill to add to your resume or client pitch.
Let’s start with design
Like I mentioned previously, I am not planning on boring you with a mundane tutorial on how to design a page in photoshop. You can probably figure out the best solution for you or your clients’ needs. What I would like to do, however, is point out a few important aspects of the page design that will help you on your way.
While FBML is fairly flexible, there are a number of restraints or requirements that facebook places on page designers. One of the first constraints you’ll want to consider is the size of the area you are allowed to use when adding a new page tab. Facebook recently changed the size of the custom content tabs to 520px wide. Of course, the length is unlimited within reason, but in order to avoid your custom facebook page being truncated prematurely by ads and other sidebar content, the maximum width allowed is 520px. Keep that in mind when working on your Photoshop Comps.
CALL TO ACTION
As mentioned in the previous post, you want to make sure your call to action is nice and visible. For most facebook page designs, the call to action is going to be the invitation for visitors to “like” your page. Make sure the call to action is one of the first things your visitors see when they visit your facebook page. Keep in mind when designing your page that the “fold” will be significantly higher than what you are used to. In other words, place your call to action very close to the top of your design to ensure visitors see it immediately.
Remember the importance of branding when designing your facebook fan page. Avoid using templates that don’t match your branding strategy. If you have a decent understanding of HTML and CSS, coding your own custom design to match your brand will be fairly easy for you.
Now for the code
INSTALLING Static FBML (Facebook Markup Language)
There are countless tutorials online regarding how to install FBML on your facebook page (try this one, it’s pretty good), and once you have FBML set up on your facebook page, I would like to include a few tips on using it. (For more tutorials on using FBML, try our good friend Google.)
CODING YOUR DESIGN
Once you have perfected your facebook page design in photoshop, it’s time to start coding! For FBML, you won’t need any of your standard <DocType>, <HTML>, <body>, or <head> tags. All you need is a div that measures 520px in width and some in-page CSS. If you’d like an example of what I am talking about, you can download the source code for GDB’s custom facebook page here. Use standard HTML and CSS markup just like you would when coding any other web page, but be sure to include only the CSS and the content that would normally be found between the <body> and </body> tags.
MAKING YOUR CUSTOM PAGE THE DEFAULT PAGE
After designing a coding a nice facebook landing page, you’ll want to make sure that when new visitors who haven’t “liked” your page yet visit your page, they are immediately taken to your custom-designed page.
This is done rather simply by clicking on “Edit Page” directly below your page’s profile photo. Once you’ve opened the editing options, click on the “edit” link right below “Wall Settings”. From there, you can choose the “default landing page for everyone else” as shown in the image below. (The Wall is the default for people who “like” your page.)
ADDING EXCLUSIVE CONTENT
You can also insert some FBML code to create content that will only be visible to people who “like” your page. As discussed in the previous article, this can be a great way to grow your fanbase by motivating users to act.
The code that facebook has designated for exclusive content are as follows:
THIS IS THE CONTENT THAT IS VISIBLE ONLY TO THOSE WHO “LIKE” YOUR PAGE
THIS IS THE DEFAULT INFORMATION FOR THOSE WHO HAVEN’T “LIKED” YOUR PAGE YET
By adding these simple tags, you can assure that members of your facebook page will receive exclusive content available only to them.
What other questions or tips do you have? Share them!
The above tips are just a few of the things I come up with to help your design and code a custom facebook page. If you have had experience designing and coding a facebook page, what other tips can you add? If you are new to the whole facebook page scene, what questions do you have? I would love to hear your thoughts in the comments!