Archive for category Design

Facebook to limit app tab pages to 520 pixels – 240px less!

Posted by timware in Design, Social Media / Inbound Marketing on December 10th, 2009

This morning I read a very interesting post by Michael Lazerow of BuddyMedia.com about Facebook’s upcoming changes to Fan Pages.

There are a number of changes that will affect marketers who’ve been working Facebook, but for me, as a Web designer, the one that caused the most pain was Facebook’s intention of reducing the width of application pages from 760 pixels to 520 pixels.

The first thing I did was look for another authoritative source of this and, unfortunately, I found it on Facebook’s Developer site where, in stark red type, they state: “Important: In late 2009/early 2010, application tabs will be 520 pixels wide. For more information, please read the Developer Roadmap.” On the Developer Roadmap:

Application Tabs will be the only way to integrate applications into profiles and Pages. Application tabs will shrink from 760 pixels wide (today) to 520* pixels wide to accommodate a slightly revised design. Boxes, info sections, and the Boxes tab will be removed in the near future.

Now that’s a BIG difference and all the brands/businesses who’ve labored over creating custom pages using apps like Static FBML are going to have to rethink those pages, now that they have 240 fewer pixels to work with. Here’s what the maximum width will look like (example from a recent page we created, anticipating the reduction):

So I and a whole lot of Web designers have their work cut out for them, so to speak.

Of course, the question is, What happens to that 240 pixels of new real estate Facebook has available to use for itself? Is this a “land grab” by Facebook?

Other resources:

Facebook Developer Site

Michael Lazerow’s Blog Post on MediaPost

InsideFacebook.com (Justin Smith)

4 Comments

Tutorial: Customize Facebook Pages with “Static FBML” application

Posted by timware in Design, SEO - Google, Social Media / Inbound Marketing, Web Coding on March 25th, 2009

This is a how-to article on expanding your Facebook Fan Page (aka Business Page) by using the application Static FBML which allows you to add new “application tabs” to your tabs or box which can incorporate CSS, HTML, Facebook’s flavor of JavaScript, FBJS, and Facebook’s mark-up language FBML. FBML has greatly expanded what is possible on Facebook Pages and, if you’re sufficiently skilled with CSS/HTML and, optionally, FBML, you can make some really fine looking Pages.

Two examples of what we’ve done at HyperArts: Our Facebook Page and Skis on the Run, one of our clients.

What follows is a detailed guide to installing and working with Static FBML. I would also recommend Jesse Stay’s excellent book, FBML Essentials: Facebook Markup Language Fundamentals, published by O’Reilly. You’ll find it indispensable.

So let’s get started!

PLEASE NOTE:

Static FBML can only be added to Facebook Fan Pages (aka Public Profiles, aka Business Pages);
You CANNOT auto-run JavaScript in an FBML page – it must require a user action; you can also use FBJS (Facebook JavaScript);
You SHOULD NOT use a <style type=”text/css”> tag — it works in most browsers, but NOT in Internet Explorer (of course); you can, however call an external style sheet via <link href=”http://yoursite.com/styles/layout.css” rel=”stylesheet” type=”text/css” /> (Read this post about the difference between Internet Explorer and other browsers regarding Static FBML and CSS…);
Maximum width of FBML page is 760px (However, Facebook has announced this will be reduced to 520px in later 2009/early 2010.);
Include ONLY the HTML/CSS that’s between the <body> and </body> tags; NO <html>, <body>, <head> or meta tags;
In order to add applications to your Fan Page, you MUST have a personal profile associated with the Page as an Administrator; the Admin can add apps when logged in.