The new Facebook Timeline has changed once again the social network dynamics. If you’re working with pages, this shift is a big deal and while some have feared this drastic flip, I think there’s plenty of benefits to pull out of this.

Besides the obvious ‘cover image’, which could be regularly changed to fill the 850 x 315px at the top of the page, there room for engagement via the news tabs’ format.

[youtube width=”590″ height=”330″]http://www.youtube.com/watch?v=hzPEPfJHfKU[/youtube]

As oppose to listing the page’s tabs on the left, your top four choices are listing in the shape of thumbnails (that you completely control) and the rest, reaching a maximum of 14, show up as soon as you click on the arrow next to the first four. It’s yet to be seen how users react to the hidden tabs, and my guess is that few would be bothered to explore beyond the highlighted four. Regardless, tabs have clearly outlived the pages that host them.

Here’s an illustrative infographic by TabSite indicating all shapes and sizes you need to know about.

Facebook Website

Instead of creating a simple stand alone website that is separate from your Facebook page, it is now strategic, and perhaps more convenient, to create a ‘Facebook Website’ within your page. This would mean designing for the dimensions of the Facebook tab, creating a thumbnail to link to it, and purchasing a domain (as you normally would) that would redirect straight to the tab.

Plenty of room for creativity with the new Facebook Timeline

What’s the catch? Here’s the downside of this concept:

1. The website’s width will be 810px instead of the standard 960px – so you’re losing 150px in width
2. There’s a smaller header at the top of the page (the Facebook tool bar) as well as the chat tool to the right

More importantly, especially if you’re building basic and or temporary website, there’s plenty to pull out of this:

1. Full integration with your Facebook page
2. Easily integrate with Facebook API for a personalized experience (for example, ‘your friend Sara was just here’)
3. Drive more traffic and make it easier for visitors to share your tab

Designing for the Facebook Tab

Consider it a full fledged website, with the only real difference being the reduced width of 810px. If you work with a CSS grid system like 960.gs (as you absolutely should), then you’d need to use one with the new dimensions. This is how I’ve laid it out:

Total width: 810px | Content: 800px | 15 columns of 44px each, with 11 gutters of 20px each.

The ideal dimensions for a grid for a Facebook Website

Here’s the final outcome

Facebook Website PSD Template - DOWNLOAD

With the help of Marwan Imam, I’ve put together the PSD with the guides, columns and Facebook background so that you can design specifically for that. Download the PSD template file here.

So start your design in Photoshop, Illustrator, GIMP or whatever software you choose with the above dimensions to fit everything within the Facebook tab.

Integrate your Facebook Website in a tab

Once you’re website’s ready and optimized for the tab, it’s time to integrate it into your Facebook page. This is done using an iframe, which basically means that you’ll be hosting this website on your server (which needs to have an SSL certificate), and showing it completely within the Facebook page.

There are ready-made applications that you can add to your page and get started right away, however, to avoid having any copyright message show up, you can simply create your own app.

This post by NSDesign Blog takes you through the eight steps needed to add a custom tab, showing your Facebook-optimized website.

Put everything together

Now that you’re website’s ready and integrated, it’s time to put together a thumbnail for it, and assign it to your tab. Also, since your tab will have a unique URL (like facebook.com/mypage/app_2313284), then go ahead and purchase a domain name (if you don’t already have one), and have it redirect to this particular tab.

That’s it! We might be seeing the start of a new category of websites that are fully integrated with Facebook pages. Needless to say, anything beyond a straight-forward web application will be too much for this model to handle. On the other hand, it’s a chance to take advantage of the extremely personalized engagement made possible by Facebook.