Designing for Facebook

Posted on: August 2nd, 2012 by Alexander Stanuga 2 Comments

There's no doubt about it, if you're in business it's likely you've strongly considered, if not already explored having a facebook business page, and why shouldn't you? As well as being a great usable database of potential customers, the platform offers a lot in the form of feedback, referrals and coverage, and if your product or service finds the right audience, there's no telling what could happen. Needless to say, woe betide anyone who doesn't take the time to understand facebook ettiquete and how to appropriately deal with feedback when it comes.

With so many people and businesses reliant on it's framework for generating business, the social network has also become notorious for changing things and turning heads loose at every new iteration and upgrade. Until recently I thought I had it all figured, my forays into designing for my previous companies Facebook page began in mid 2011. Facebook had just announced that they were halting their support for their own markup language FBML (Facebook Markup Language) as of June 1 2012. The Facebook styled language was not unlike HTML and can be adapted with Javascript to develop facebook specific applications (apps) to target it's user base. This move was seen as a positive step forward, and allowed the future development of facebook content and applications to be done in HTML and Javascript.

Interestingly, it also seems that Facebook have finally come onboard with their own online (reasonably easy to follow) help centre for creating Business pages. If you've come to this post looking for a tutorial, then I strongly suggest you check it out, it appears that the Social network have developed their own easy to understand self help videos for people looking to get into creating Business pages.

Another big step was Facebook's decision to open up it's developer base by an agreement with Stack Exchanges Stack Overflow. With a strong online community of web developers at it's core Stack Overflow is considered one of the best technical Q&A forums available, not to mention Facebook developers have been already using the site for years. In my opinion this was seen as a great step forward, not only for transparency, but in the interest in promoting facebook development and general progress.

Landing pages, and why marketers loved them

After facebook's decision to get rid of FBML, and replace it with the humble (standards compliant and adaptable) HTML, companies were now able to design and code their landing pages in common HTML using iframes. Restrictions in size meant that your web page, either hosted on an external server, or within a third party app, could not exceed 520 pixels in width, but had the ability to add as many external links and functionality as you liked. This meant that Marketers had the ability to send users away from Facebook and capture the users raw data in other ways, allowing for constant out-of-site changes. As the title suggests, the 'Landing Page' also gave the ability to prevent any user who hadn't 'Liked' the page from seeing the rest of the Facebook page, consequentially driving up 'Likes' and traffic to sites outside of the framework.


When I first started writing this article in March (2012), my then Marketing manager, was making efforts to recompose himself after he discovered that facebook had decided to change the goal posts… yet again. It was the first week of March and we had just completed a landing page for one of our main brands the previous friday, and unfortunately another junior member of the team with administration rights made the mistake of permanently switching the page over to the new Timeline, early. Had this short sighted decision not been made then, we may not have realised that the Timeline was shortly to become compulsory across all business pages. This revelation, though frustrating, meant that we now had about 3 &1/2 weeks to get our head around the NEW Timeline layout, and how best to utilise it.

Since Facebook keeps most of it's development tightly under wraps, finding the most appropriate information and gaining an in-depth understanding of the new layout look some trawling, but as time wore on, every social media commentary site was jumping in with their findings. Some of the most helpful included, The social examiner and Mari Smith's Blog

It was not too much longer before some of the HTML apps we had been using in conjunction with the business page started to make changes to their own format (though I dare say, anyone who got into the game a little later and paid for a subscription to a landing page service could be feeling a little red faced)

Cover Image

With the landing Tab now outlawed, Facebook no longer allows ANY HTML or other functionality in the cover image, also you can't even include your business' contact details. The dimensions of the cover image are 851 x 315 pixels and if you happen to upload an image that is smaller Facebook will stretch the image, and possibly causing it to look blurry in the process. For the official information regarding the cover image check out here. Facebook has decided to be quite brutal, disallowing any call to action within the cover image, they won't allow you to include arrows directing you to like the page, or let you include specials or business details within the image at all. As per usual, the images must also be free from any copyright infringement.

Profile Picture

Profile pictures are displayed as a square 160 x 160 pixels on a normal screen or 125 x 125 pixels on a smaller screen. It is advised to upload an image of 180 x 180 pixels and Facebook stringy discourages people from changing their profile picture often. This image will appear at the top of your page to the left and overlapping your Cover image. It will also be the image attached to all your comments and post entries, so make sure that what ever you chose, it can be viewed clearly at a small size. I would suggest you keep the image simple and clean possibly include your business' logo or something else thats strongly recognisable as your brand, as this will be included alongside any of your future posts.


As everything is now laid out in a timeline, you have the ability to add (and/or remove) content within the timeline. A useful feature included is the Milestone, this allows you to include key events or important dates within the history of your organisation. For instance, one timeline I worked on now dates back to 1921, when the company was founded, key events and images in the companies history have also been included at the appropriate dates.

There are two ways of adding milestones, photo's, status updates or polls within your new timeline. Either scroll to the top of the page and select the desired input OR just place your cursor above the central line until a plus icon appears and click your mouse button. Also once you have set a milestone you can make it a sticky (meaning it will remain at the top of your facebook page) for up to 7 days.

Showcase and Apps

Apps from before Timeline still function, though they display differently. Only four apps and sub-pages within your page will appear as boxes below the cover image to the right of your page. Up to twelve can be added, but the remaining 8 will only be viewed if the user clicked the arrow-down to the right of your top 4. Also to note here, although you have the ability to change the appearance and order of the apps, you will not be able move the photo's app from it's current position.

HTML iframe apps will still function, and in many cases, provided that the developers of the app are up to date themselves, you should now have a wider real estate to play with. Unfortunately though you will not be able to set any of them as landing pages.

Custom Thumbnails

With the new apps tabs there is the ability to change their display image. images need to be set up as 111 x 74 pixels. This is the best way to add promotions and or you could tie in the design within the overall theme of your page.

Page contents

The Admin Panel

Another great feature that is back for Facebook pages is the ability to suggest your page to your Facebook friends by selecting Admin Panel > Build Audience > Invite Friends.

There is a new section within your Admin panel that will show you information on new 'Likes'
admin panel


Another big change in the new timeline structure is the ability for people to send a page messages, these messages will appear in your pages Admin panel, so be sure to check regularly and respond appropriately. If you don't wish your page to receive direct messages from viewers, this feature can also be disabled.


Another important aspect is the ability to find out your pages stats, from how many people view your business page, where they're coming from and what aspects of your page they find he most compelling. Bear in mind that in order to activate this feature, your page first needs to acquire at least 30 'Likes'.

For even more information, Facebook have created a collection of videos explaining some of the simple ways you can make changes to best put together your page, so check out there Youtube channel for even more.

Useful Links:

Be Sociable, Share!

2 Responses

  1. Shenna Galley

    August 10, 2012

    Is the timeline layout still optional or do we have to use it?

    • admin

      August 12, 2012

      Last time I checked, it was compulsory for All business pages, as of 31st March 2012


Leave a Reply