Tips for designing and coding a custom facebook page

13,623 designers received our email newsletter last week. Click here to sign up for free.

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.

If, in addition to HTML, CSS, javascript, Photoshop, or whatever your skill set is, you can add the skill of designing a custom facebook page using FBML (Facebook Markup Language), you are a more marketable designer.

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.

SIZE REQUIREMENTS
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.

CONSISTENT BRANDING
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:

<fb:fbml version=”1.1″>
<fb:visible-to-connection>
THIS IS THE CONTENT THAT IS VISIBLE ONLY TO THOSE WHO “LIKE” YOUR PAGE
</fb:visible-to-connection>
THIS IS THE DEFAULT INFORMATION FOR THOSE WHO HAVEN’T “LIKED” YOUR PAGE YET
</fb:fbml>

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!

About Preston D Lee

Preston is a web designer, entrepreneur, and the founder of this blog. @prestondlee

Comments

  1. Hey Preston, this is awesome! Thanks for all the technical tools – much appreciated.

  2. Excellent post, thanks for sharing, I Did recently a facebook page for a client and for the first time I get into FBML, was an excellent experience and once again we, the designers, have to thinks how to get the best communication piece in a new environment.

  3. Preston – Great overview. Every business on earth needs to add more sizzle and functionality to their Facebook page. The problem is many don’t have the dev chops to write code and mess with FBML.

    We built the largest suite of Facebook applications on the planet at northsocial.com. Now every designer, agency, and developer can help their clients get up engaging Facebook pages in minutes, without having to write a single line of code.

    We also have an Agency Partner program you may want to check out.

    Cheers

  4. Hey Preston,

    This is brilliant – so many individuals and small businesses will benefit from this easy-to-read and easy-to-understand article on setting up the really important “Landing” or “Welcome” page on their Facebook Page – thanks so much for sharing!

    This is a proven method for increasing engagement with your Page / brand – by making all new visitors to your Page see the “Welcome” screen with a big “Click the Like button above” call to action, you’ll get more Likes, more engagement and have the potential for higher conversion rates as well, both on-and-off Facebook.

    This is definitely one to share for a long time to come!

  5. really helpful. just awesome post, i changed my default facebook page too!!!

  6. Thanks for this post. I am surely going to change my facebook profile as said above.

  7. Hello Preston,
    thank you for mention our tutorial on how to create a fbml page. :)

  8. I think that will work.

    Welcome, fans!
    Click the like button! NOW!

  9. Ups! I mean:

    <fb:visible-to-connection>
    Welcome, fans!
    <fb:else>Click the Like button NOW!</fb:else>
    </fb:visible-to-connection>

    (I hope that works, please merge the two comments)

  10. Nice article about custom landing tabs and the Static FBML app. As a note to all the Facebook designers out there – if you want to create custom Tabs for Facebook Pages without actually coding anything, check out splashtab.com. You can select from preset templates, upload your custom graphics, and then give your client access to update their content! We also hope to eventually offer a “designer” account where you can write all of your own markup and still give the user access to edit blocks. Cheers!

Trackbacks

  1. [...] Learn How to Design and Code a Custom Facebook Page — I can’t stress the importance of developing an online brand enough. Smart job seekers are creating websites that serve a relevant purpose and combine them with online networking spaces like Facebook every day, but you need more than this. The typical attention span is about 1 – 3 seconds, so make sure you get the most out of your moment of relevance by appealing directly to someone’s interests. Trust me, it makes a huge difference. [...]

  2. [...] Tips for designing and coding a custom facebook page | Graphic Design Blender [...]

  3. [...] ein modernes Blog sowas eigentlich auch?) und wer sich nach einer eigenen seht, wird den Artikel “Tips for designing and coding a custom facebook page” sicherlich nützlich [...]

  4. [...] Tips for designing and coding a custom Facebook page [...]

Join the conversation

*

css.php