Collecting the Internet So You Don't Have To

We work on the Internet. As such, we are constantly consuming information. Believe me, there is a lot of it out there. Sometimes we even forget things unless we write them down. Our blog covers everything from web standards to the muppets, php to comic books, music and everything else that we find interesting. Leave us a note when you drop by.

Trying Out Timeline for Facebook Pages

Functionality
Wil Alambre
Wil Alambre Senior Programmer
Visual Lizard
work
1 (204) 957-5520 ext:152
toll-free
1 (888) 237-9559
url
http://www.visuallizard.com
Wil Alambre Whiteboard Ninja

With Facebook rolling out the timeline interface to Pages, we decided to to make the upgrade a bit early to better get acquainted with the new look and feel. So with a flip of a switch and a couple image uploads, we polished up our Visual Lizard Facebook Page and learned a couple things on the way.

First of all, the new profile image (which is our green square icon) is used on the page and as your profile icon whenever you make a post. When uploading a new one, it must be 180px tall by 180px wide. It gets scaled down to 125px tall by 125px wide on the Timeline, and scaled down to around 32px tall by 32px wide as news feed icons. I haven't seen it ever used at the full 180px square format and I wasn't allowed to upload anything smaller, nor was I able to upload a different image for the smaller sizes (ideally optimized for those dimensions), so you'd better make sure your profile image scales up and down as cleanly as possible.

The large cover image is 315px tall by 851px wide, but you can upload a larger one if you want. You are given the chance to move the larger image within the confines of the cover space after uploading.

One of the bigger updates is how the apps work. They are no longer a small list on the side, but instead a series of prominent rectangles below the cover image. By default, all third-party apps will use the app's default icon, which is square, but Page admins have the choice to replace those. To the right of the row of rectangle app icons, there is a down-pointing arrow.

Click that, then hover over an app's icon's top-right corner to reveal a pencil icon. Clicking that will give you a number of options, the important one being "Edit Settings". In there, you can not only give the app a custom name unique to your Page, but also upload a properly rectangular icon at 74px tall by 111px wide.

In that same place you can either remove the app from your Page or swap its position with any of the others. Two unfortunate points you'll discover are that you can only have four apps up there prominently, all others being more-or-less buried away, and you cannot move or delete the photos app, so you only really have places for three others.

Some nice changes are the amount of room each app can now have. When in an app's own space, developers can now use a full 810px wide area to develop, as opposed to the old 520px. Also, most of the rest of the elements, both of Facebook and of your Page, are tucked away up top. This gives the apps so much more breathing room, no longer fighting for attention like they did on the previously busy layouts! As you can see, we've already updated our own custom-built apps, allowing us to automatically update our Facebook Page right from our website's Catalyst admin screens.

We're going to keep experimenting with Facebook's new Timeline and how apps interact with them. So far, I like what I've found, and am especially interested in building a few Timeline Apps. You can keep an eye on our Page to see how that turns out ;)