Archive for category Design
Facebook to limit app tab pages to 520 pixels - 240px less!
Posted by timware in Design, Social Media / Inbound Marketing, Static FBML & FBML on December 10th, 2009
Update: August 10, 2010:
Facebook is previewing the reduced-width application tab changes. See our blog post on the 520px application tab width reductions and the implications.
Update: May 27, 2010:
A "Facebook spokesman" told Inside Facebook that the changes to application tab widths “will likely happen in late July, but we’ll give Page administrators at least two weeks notice before making this change regardless of when it happens."
Um, okay. Let's see what happens....
Pre-May 27, 2010
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:
Tutorial: Customize Facebook Pages with "Static FBML" application
Posted by timware in Design, SEO - Google, Social Media / Inbound Marketing, Static FBML & FBML, 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.
You can check out our Fan Page Portfolio to see some of the pages we've developed.
Static FBML Fan Page Templates - Clean, Professional, Ready to Use
Also, we offer a number of ready-to-go Static FBML Fan Page templates for sale. The code is clean and Standards-compliant and displays well in all modern browsers (even Internet Explorer 6!).
I would also recommend Jesse Stay's excellent book, FBML Essentials: Facebook Markup Language Fundamentals, published by O'Reilly.
Problems? Look here first!
If you have problems, you should definitely check out these two pages:
- The 16 Most Common Static FBML Problems and Their Solutions
- Static FBML FAQ — all you need to know about Facebook's Static FBML application + Links to all our Static FBML Tutorials!
What You Should Know Before You Get Started....
- 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; 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 the Summer of 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.
Static FBML Code Templates for Sale!
