Contact Us
  • Facebook Static FBML Custom Tabs – 520-Pixel Reduction Previews Available to Admins NOW!

    When I checked our Fan Page today, I was greeted by friendly message from Facebook — the long-promised/threatened width reduction application tabs was being rolled out in preview for Page admins. The message:

    I took a look at one of our application tabs in Facebook, and it showed the reduction of available space to the custom tab to 520 pixels. I checked around at a number of other fan pages and am seeing the changeover for all Pages I admin.

    Here’s what our Sandbox page looks like:

    As you can see, the new left column contains pretty much same content as the Wall’s left column, with the Boxes content still surviving (and the Wall boxes and Boxes tab are also scheduled to go). The Static FBML custom tab, which we designed for 520px width, now sits between two columns. And the design will have to be reconsidered (more on design implications below).

    Don’t Freak Out! Only Page Admins see the new reduced width…

    This new view is only shown to Fan Page owners; if you view custom tabs that you don’t admin, or you view your Page’s custom tabs while NOT logged in with your admin account, you WON’T see the width reduction. Per the Facebook Developer Blog, the changes will go into effect on August 23.

    Even for Fan Page owners, such as HyperArts, who have been designing application tabs for the long-anticipated width reduction, there will be work to do, particularly for designers.

    DESIGN CONSIDERATIONS: Your Fan Page Logo Avatar has a Larger Footprint

    With the soon-to-be “old” width, the logo on Static FBML custom tabs was about 50 x 50 pixels, but it will, after August 23, appear as it does on the Wall.

    What this means for designers is that you’ll need to factor in the presence of a 200px x up-to-600px logo when re-designing your custom tab. You can see from the HyperArts example, that we can certainly lose that horizontal green logo in our application tab!

    And, in general, such a profound change in the visual context for application tabs will require a rethinking of the design, both of the application AND the profile picture/logo.

    Because of the new stronger juxtaposition of the logo and the tab, designers will need to take both into consideration when rethinking the designs.

    Profile Picture Size is likely to hit soon, as well

    Facebook announced back in January that it would be changing the maximum size of profiles pictures to 180 x 540px (down from 200 x 600px) “in the next few weeks.” So this change, which is likely coming soon, will also be a factor designers will need to consider.

    The Good News — 520 Pixels Renders Fine

    I am relieved that the full 520 pixels is made available on custom tabs. I worried that Facebook might fudge that with some padding or something and we’d still have to modify the designs we thought would accommodate the 520-pixel width.

    Canvas Page Tabs are Getting Squeezed into the Narrow Column

    From the earlier announcement by Facebook concerning the width reduction, I had been under the mistaken impression that tabs that displayed Canvas-page applications would still be allowed the 760px width. However, I was wrong about that.

    From the Facebook Developer Wiki Roadmap Profile:

    Application tabs (including static FBML 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.

    An “application tab,” as defined by Facebook, is any tab on a profile or Page, created by Static FBML, a Canvas page, whatever. All tabs will be restricted to the 520px width.

    In order to display your Canvas application to users at the full 760px width, you would need to send them to the actual application page. However, this would result in a less-than-ideal user experience, as it takes the user away from your Fan Page to your application page.

    The current HyperArts “welcome” tab pulls in the Canvas page from this URL:

    Here is our Canvas-page Welcome tab with the new width reduction:

    We intend to still pull our tab from a canvas-page application — to enable RSS feeds, primarily — but it’s width-reduction time!
    I’ll continue to modify this post as the situation develops. Hold on tight!

    Comments

    1. Are you sure about the left-side FBML boxes no longer showing? On pages I admin, I do see the new, smaller custom tab size, but i DO still see my FBML box appearing on the left side as it always did.

    2. Great early warning… thanks. I read your post “after hours” on my smartphone and had to boot up the computer to check out my tabs. Everything *appears* to be in good shape… actually I nice improvemnet overall.

      I hope your Canvas App width survives. And since I never trusted how Facebook would interpret “520 pixels” I designed all my tabs at 518 pixels. I worried about padding too. Anyway… thanks for looking out for all of us.

    3. Your “Welcome” tab would still be considered a custom tab, wouldn’t it? I doubt tabs created by applications will be treated differently. In fact, in the announcement FB refers to “Application tabs” and not FBML tabs.

      That’s my understanding anyway.

      • You are correct, I believe. I have modified this post to reflect this. I had been mislead by earlier Facebook announcements about widths and had understood that the width reduction wouldn’t apply to tabs pulled from canvas pages. But this isn’t correct, and I thank you for motivating me to dig deeper and get at The Truth, no matter how much it hurts!

    4. Thanks!!! for testing purpose it is hard to check it in Admin Side.
      How can we can test page??

      • Huh? If you read this post, you’ll see that if you’re logged in under the account that admins the page, you’ll see the changes. Everyone will see them starting August 23.

    5. Party Pilipinas Admin says:

      Sad about the change. I’m worried about the vanity boxes being removed. Can’t imagine that my Links Box will soon be gone in this page i’m co-administering.

      http://www.facebook.com/gmapartypilipinas

    6. I’m finding FB’s announcement clear as mud. I can see the new, narrower size in my preview. I still see all my content. Which “boxes,” exactly, are going away? Simply the tab that says “boxes”? What about Static FBML tabs that I have built, or the tab for my RSS feed? The preview really isn’t telling me what will stay and what will go.

      • The preview is showing you what your tabs will look like at the new 520px width. All boxes and the Boxes tab are going away and any content contained in them will disappear when that change is effected. Facebook advised putting all your boxes content you wish to retain in a custom tab. You can do this with Static FBML.

    7. Julia Briggs says:

      Facebook advised putting all your boxes content you wish to retain in a custom tab. So in reality the “box” option in FBML application settings will no longer be accessible and you will only be able to choose tab, correct? What are we designers to do with all the empty white space what will show under our profile now?

      • You can only ignore that white space. It belongs exclusively to Facebook once the boxes are eliminated. Designing for Facebook is somewhat like building sand castles. Ultimately, they belong to the sand and sea, not you. Ah, the real price of a beachfront location 🙂

    8. Chavon Riggins Smith says:

      Quick question: With the 520 pixels width change, what is the maximum height allowed?

    9. Tim thanks for all your help.

      Sorry for posting in probably the wrong thread.. but is there any way to add a ‘like’ button to a welcome fbml tab? I was thinking of copying the image of the like button, then putting the destination code so that the page can be ‘liked’. But have no clue if such a code exists.

    10. It seems that Facebook have decided to surprise on some of us the implementation of the new 520px width already – 10 days earlier than the official date of August 23rd they originally announced. WTF?

      • Josh, I suggest you read this post a bit more closely. If you’re looking at your page while logged in as an admin of the Page, you see the preview. If you aren’t an admin, you’ll see the old way, UNTIL August 23. Try logging out and viewing your page. I thought I’d made that pretty clear…

    11. I am so confused and have searched everywhere to try to find an answer…perhaps you can help. I have a musician/band page. I have a music player and a discography box that appear on my page. I can move these apps to the boxes tab for now, but how do I move them to their own tab? (assuming they will be included in the Aug 23 zap!) I created a FBML tab using some instructions I found online, but can’t make these apps copy into them. Any insight?? How do I keep that info on my page?

      Thanks in advance for the help!
      Sue – The Harris Family

      • There are many Static FBML tutorials on this blog, Sue. You will have to move your apps to a Static FBML tab. If they require iframes, you’d have to make a custom application. But boxes are soon to be history, and moving that content to a custom tab is the only way out.

    12. I noticed that the images on my Facebook pages aren’t showing up. I am using the tag and I have resized my images to 520 pix and they still aren’t showing up. Is this happening to anybody else?

    13. @Joe – just jumped on this site to answer the same dilemma. None of my images are showing up now, even after resizing. I’m assuming that it is due to the changes so I’m trying to be patient.

    14. Could you please help? Am I doing something wrong? I’ve created and added quite a few static FBML pages to my various pages, I’ve made sure that they are all no wider than 520px, but some of them are showing up in the ‘preview’ as much bigger. I’ve double checked, they are all 520px – what am I doing wrong?

      • I’ve been hearing from a number of folks about this. Where are your images hosted? Can you paste your CSS for the images here?

    15. I am using the tag and my images are hosted on my server. I agree with Apryl, I think it has to due with the changes that Facebook is doing because they were working fine a week ago.

      • I am using the img src tag andmy images are hosted on my server. I agree with Apryl, I think it has to due with the changes that Facebook is doing because they were working fine a week ago.

        • Can you post here the CSS you use for the backgrounds? This isn’t happening with any of mine, so I’d like to see what folks are using as it might just mean a tweak to the CSS code.

    16. Thanks so much for this everyone – I’ve been using the html code from Photobucket, but it doesn’t have any sizing code in it.. I’ve added some and it’s fixed it. Just confusing because it’s only happening on some of my pages. Thanks so much for your help!

    17. Tim-
      I am having the same problem and someone I work with is also having the problem. I think it is the background image tag. You can see the fb page here: http://www.facebook.com/azartgirl?v=app_23744633048

      I have changed the image sizing to 513 to be safe of any extra fb padding. Some other pages have the image looking almost double in size. What are your thoughts?

      The related code for the “quirky” section.


      #divbackground {
      float: left;
      height: 469px;
      width: 513px;
      background-image: url(http://www.dawnevansdesign.com/test/cultural/images/KBHc_fb_03.jpg);
      }

      Thank you!

      • I think a 520px width will be fine, as it doesn’t appear from the preview view shown to page admins that Facebook is adding any padding or margins that would necessitate using narrower than the 520px.

        If the images that are showing up too large (and we’re hearing a LOT about this) are just inlined images, rather than called via CSS, then add the image size parameters to the <img /> tag:

        <img src=”URL” width=”513″ height=”469″ />

        If the enlarged images are called via CSS, let me know.

        I don’t think you need the “float:left”, if it’s the container DIV for the custom tab.

        It looks like your video needs some work on its positioning.

    18. Hi all – just jumping on the bandwagon since I am having the same issue with all of my background images getting stretched to more than double their actual size. This is happening multiple times a day and I do already have the image size parameters set. It’s getting to where everytime I login to check things, something is messed up! This is killing my hourly rate! The only solution I have found thus far is to add a ?ver=1 after the image name and keep incrementing it everytime I find an issue. Obviously, this is not a long-term solution. If anyone has found a way of coding background images that does not seem to have a problem, I would love to know about it.

      • It’s a known and current bug on Facebook. Facebook Bugzilla Report.

        Facebook is stretching the images to 760 pixels! But it’s random. I tested with a new Static FBML tab and bg image called from CSS and it worked fine. Existing pages are fine, but new pages seem to be randomly hit with this bug.

        I viewed source on a Fan Page having this issue (Dawn’s page, above) and there’s nothing in the code forcing the image to 760 pixels, so I suspect that Facebook is doing this when they make a copy for their servers.

    19. I agree things seem to change at different times when I look at them. On my site and others. Mine looks OK now. Maybe we all need to wait?

      I got the images working with the fbml http://www.facebook.com/azartgirl?v=app_23744633048 Now I need to tweak a bit on the actual graphic, it’s off a bit to the right–I thnk it is a graphic thing and not a code.

      Tim- if I do f=drop the float look at what happens:
      http://www.facebook.com/azartgirl?v=app_10339498918 look at the tab FBML Crazy! w/o float.

      • The page w/o float looks fine on FF on the Mac. Maybe getting weird on IE? Anyway, I’d just leave it. It’s was just a, um, passing observation. This is image enlargement thing is just another Facebook bug and has actually happened before. Onward….

    20. Thanks for the update! Great to know I’m not crazy, but doesn’t help me explain to my client who is refreshing the page every 5 seconds and freaking out! Not sure what to do about it other than my clunky workaround – who knows how long it will take them to fix this……

      • Hey, that’s Facebook. That’s what I tell clients. Some things are simply out of our control. I always try to set clients’ expectations about establishing a settlement on Facebook. Castles made of sand…

    21. Yes, I agree. I keep telling them ‘Since they are giving us this tool for free, we really can’t complain….’ From the bug report, it does appear to be actively worked on. I’m new to Facebook bug reports so I’m not sure how long things may linger in that status. Thanks for all the great info!

    22. Sorry didn’t mean to go off topic. Love the castles made of sand! I am going to use that!
      Thanks so much for the help.

    23. I echo Sue’s concern about the discography and music player apps. These apps were included BY Facebook for band/musician pages. No where have I been able to find information on whether these apps are being discontinued by Facebook as part of the upcoming changes.

    24. Hi Tim, Apologies but I am still trying to get my head around these changes. I am only interested in changing the structure of my Page – haven’t ventured into applications. Would be grateful for a novice ‘roadmap’ on how to create a FB Page canvas, tabs etc, embedded CSS etc. I have the profile pic sorted out. Thank you so much. I really do like your clean page designs.

    25. Last couple of questions Tim (for today probably) 🙂

      Is there any way to hide my page fans? My competition is stealing them from me.

      Is there a way to get a facebook comments box, that doesn’t show the ‘facebook social application’ button at the bottom?

    26. Any idea where the new width’s are? It’s well past August 23rd and when I view my tabs as non-admin, I’m still seeing the old wide format. Management is getting concerned 🙁

      • When has Facebook ever implemented something when they said they would? Honestly, it could be months, or it could happen today.

        They announced the width reduction last Fall, and we immediately stopped developing tabs at 760px, which made us look sort of foolish for almost a year (so far)…

        Perhaps these weird random things like images being inexplicably resized to 760px, etc., are by-products of Facebook’s attempting to resize custom tabs, etc.

        So, who knows?

        • Thanks for the great input and quick response! I’m new to coding for FB and wasn’t aware of their broken deployment track record. Your input will definitely help discussion with management!

          Best Regards,
          Nelson

    27. Nicely explained. Thank you for sharing this information Tim. I’m spending the day on the subject.

    28. I am not near as advanced as many of you so here is probably a stupid question. I create a custom tab. I no longer have the box option when I create in FBML and it simply says tab. Is there anyway to move that tab over to the left bar as you use to be able with the box

    29. One more question if you don’t mind. I am developing a welcome page with links. Should I still develop at 760px or are they implementing 520px. Thanks for your response.

      • Joe, You really should just google a bit or even just search this blog before asking bloggers questions.

        It is very old news that custom tabs are restricted to 520px. A simple google search would reveal this.

    30. I spent two days researching old information that I could not use from Google. Your blog and your answers are the first to make sense of it all. Besides which when I created a test 760px template for my custom tag it worked so while one thing is being said on Google there is a lot conflicting. Sorry about the post will look else where for the answers.

      • Hey, Continue to look here, Joe. Your best bet, if you’re intending to do any more work with Facebook custom tabs, is to subscribe to this blog by email. I try to keep everyone apprised of the latest news. Cheers.

    31. Jo :Worked perfectly! Thanks!
      (Wasn’t using breaks – not that advanced )

      Hey Tim, posted in reply to this as it’s related to the previous question.

      I’m using 3 images, 2 on the same ‘line’ and one directly below it, but I keep getting the unwanted white line. I understand that this is different as there are 2 images on the first line and the ‘display block’ no longer applies in this situation. Any tips?

      Eg: http://i875.photobucket.com/albums/ab318/flhce/gap.jpg

      Thanks!

    Trackbacks

    1. […] 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. […]