Contact Us
  • Facebook's New Fan Page Design – The Good, the Bad & the Ugly!

    Not on the HyperArts Blog? Click here!

    UPDATE (Feb 11, 2011): It appears Facebook has fixed the reduced-width issue. Phew!

    NOTE: Page Admins: DO NOT UPGRADE TO THE NEW DESIGN UNTIL YOU PREVIEW IT FIRST!

    Today, Facebook announced the anticipated changes to Fan Pages. After a bumpy start — Page tab width was temporarily reduced to 492px, creating quite an outcry! — things seem to have settled down.

    But as the dust settles, and Page admins begin to work within the confines of the new layout, one begins to see the downside to these new “improvements”…..

    The Changes, as Presented by Facebook

    • Photos at the top: The most recent photos that you post to the Wall of a Page you admin, or photos you tag your Page in, will appear here. This area will not include any photos posted by people who like your Page.
    • Use Facebook as your Page: You will be able to receive notifications for your Page, view a News Feed for your Page, and like and post on other Pages as your Page.
    • Wall filters: Pages now have two publicly visible Wall filters-”Posts by Page” and “Everyone.” Page admins will be able to view additional filters-”Most Recent” and “Hidden Posts.”
    • Email notifications: You can opt to receive notifications when people post or comment on your Page.
    • Featured Pages and admins: You can feature other Pages your Page likes, or admins of your Page, in the new “Likes” and “Page Owners” sections on the left side of your Page.
    • Mutual connections: When people visit your Page, they will be able to view friends who also like your Page, as well as other Pages that both they and your Page like.
    • Navigation: The content that you formerly accessed by clicking the tabs at the top of your Page can now be found in the column underneath your Page profile picture. The text in the box that used to appear in the box underneath your Page profile picture will now appear in the Info tab.
    • Profile picture size: The profile picture size for Pages has been adjusted from 200×600 to 180×540.

    Yes, there are definitely some nice new features there, but they’re offset by a number of changes that significantly diminish the control Page admins have over the presentation of Page content. And, with the termination of the Static FBML application, reduce the options of the “amateur coder.”

    Email Alerts to Page Admins When There’s Wall Activity

    One new feature, long desired but missing from Facebook, was a notification feature where Page admins are notified of postings on their Wall. Into this vacuum stepped a couple of services providing this, MonitorMyPage (paid) and HyperAlerts (free – I use it and love it). Well, HyperAlerts is fighting back, in an email I just received this morning, touting their notifications as superior to Facebook’s (and they actually are). I doubt MonitorMyPage will survive, though, as who’ll now actually pay for this service?

    Those who admin many Pages (such as myself) can set the Notification settings from a single place. From any of your managed Pages:

    • Click on “Edit Page” then click on “Your Settings”;
    • Click “View all email settings for your pages”;
    • Click “Change email settings for individual Pages” under the “Pages” section;
    • In the pop-up window, check/uncheck your preference for each Page you admin.

    Thanks to Heather Dopson!

    Bye Bye Static FBML — App to be Pulled on March 11, 2011

    On this blog and elsewhere we had speculated that Facebook would keep Static FBML around for a long time due to its extreme popularity and wide use by individuals and brands large and small.

    Well, wrong on that! On the Facebook Developer Blog, they announced today:

    With our recent launch of Requests and the support for iframe on Pages Tabs, we are now ready to move forward with our previously announced plans to deprecate FBML and FBJS as a primary technology for building apps on Facebook. On March 11, 2011, you will no longer be able to create new FBML apps and Pages will no longer be able to add the Static FBML app. While all existing apps on Pages using FBML or the Static FBML app will continue to work, we strongly recommend that these apps transition to iframes as soon as possible.

    This means that if you already have the Static FBML application added to your Page before March 11, 2011, it will work and your custom tabs will work.

    Will you be able to add new Static FBML tabs if you installed the app before March 11? I don’t know. The limit is 10 custom tabs, but Facebook may freeze the ability to add more once the change takes place. However, they’ve only said that they’re discontinuing the ability to add the app to a Fan Page.

    Cat Lee, Product Marketing Manager at Facebook, says that after March 11 admins will still have the ability to edit their custom Static FBML tabs, although she strongly recommends migrating to iFrames. (Thanks to Nathan Latka for passing this along!)

    You Can’t Create a Cool Photo Tile Effect with Any Precision

    When the new layout was first rolled out for Personal Profiles, users could control the order and selection of the 5 photo thumbnails, resulting in some nice effects:

    Unfortunately, as Facebook states in their Help Center, they have removed this control on Fan Pages:

    The five most recent photos that you have published or tagged your Page in are displayed randomly at the top of your Page. (Emphasis added.)

    On Personal Profiles, those top 5 pictures appear based on the order in which you tag them as yourself. But it’s random on Fan Pages.

    We decided to just turn the randomness to our advantage on the upgraded HyperArts Fan Page.

    No More Top Tabs

    I’m fairly sure that Page admins aren’t going to be too happy with the elimination of the 6 blue top tabs on Fan Pages, with this:

    replaced with this, positioned below the Profile Pic:

    As the Inside Facebook blog notes, “As tabs are no longer front-and-center, the redesign could reduce the frequency with which users visits tabs other than the default landing tab.”

    And note those little gray icons, which represent the soon-to-be-eliminated Static FBML application.

    Implications for the Amateur Coder — DIY Takes a Hit

    What was so great about the Static FBML application is that it allowed folks with minimal skills to create their own custom tabs without having to hire a developer, or they could purchase a template and paste it into the Static FBML box and — presto! — they’d have a custom tab.

    However, with the change to iFrames, users will need to be familiar with uploading HTML and CSS files to hosting servers, setting up iFrames, troubleshooting the various issues, etc. This just may eliminate the Casual Coder from the mix.

    However, this may also be a boon to services that provide WYSIWYG creation of custom Fan Page tabs, such as Pagemodo, ShortStack and Lujure.

    We’ll just have to see how it all shakes out….

    Comments

    1. This just sucks.

      Tim – you’re a smart guy. You’ll figure out a solution.

      I’m calling Zuckerberg.

    2. The new fanpage changes sucks big time…

      I really don’t like the changes….Facebook just forces people to do what they want…

      People should be given the option to switch over or not…Not simply force them to switch over…

    3. The support for iframes is a good thing. It will allow for so much more functionality, lead capture, dynamic content, etc. We already have big plans for this. Our white label resellers are going to benefit by being able to offer their clients more functionality.

    4. Just checking in to see where you see the setting to set default tabs for those that are Fans. I’ve looked through the settings for a few pages that I have upgrades and all I see is the default tab for non-fans.

      Thanks!

    5. I noticed the FanPage changes today … scary at first. I tried the preview and am not sure I really like it. Couldn’t find my way around very well. I kind of miss the obvious tabs along the top.

      Dave

    6. Thanks for taking the time to put this together Tim. Thank you for the “props” too! You’ve been a blast to work and innovate with!

    7. Tim,

      I can confirm that tabs are narrower…

      Wow… “Pages will no longer be able to add the Static FBML app…” Just two months ago we got the impression that Static FBML was here to stay…. (http://www.hyperarts.com/blog/how-long-will-static-fbml-be-supported-by-facebook/).

      That’s huge!

      • I know, John. I and most all of the FB developers I know really thought Facebook would leave Static FBML alone due to its extreme popularity with both individuals and big brands. But we were wrong, eh? As I’ve said many many times, developing in the Facebook environment is like developing at the foot of a volcano. No guarantees….

    8. hi Tim, if I were to use Iframe in my page, how could I do that?

    9. yeah, tabs are narrower.

    10. It does remove the abilit to easily customize FB fan pages from the hands of the fans managing those pages and perhaps creates more of a niche market for FB page developers and designers. But still. If FB is trying to appeal to businesses, large and small, they are going about it the wrong way, don’t you think?

    11. Simply unbelievable. Talk about timing, I purchased the static FBML bible today and was excited to be adding this functionality to my business page. At least I’ll have until 3/11. I hope!

      Thanks Tim for offering up an iFrames book for us newbies when it’s ready. That is really appreciated

    12. I’m the typical Amateur Coder you mentioned above. I got into it about a month ago, improved very quickly thanks to blogs like yours, and mostly yours really. I’m a graphic designer and was having a blast with it, I spent countless hours finding the codes that I needed, testing them, adapting them, etc People around me liked what I was showing them so much, I was already starting to build a clientele of small businesses willing to pay me to pimp their Page. It sure would have helped considering I have been without a real job for over a year. I’ve spent the last two weeks telling my wife “I’m doing great stuff on Facebook, I think that’s something I could do that would bring in $$$” It’s all down the drain now…
      Between you and me, before I found out about Static FBML I always stayed away from Facebook. I always found their website (both in aesthetic and functionality) to be messy, confusing, borderline deceiving. I should have stick to my first instincts and spare myself the time and energy.
      Anyway, since I’m here writing, I take this opportunity to thank you for your generosity, spending so much time helping clueless people like me thru this blog. It’s really remarkable.

      • David, I’d say Don’t give up! Learn how to create iFrame canvas apps. It’s more learning, but it sounds like you’ve got time. Dive into it! We’ll be creating a great eBook on doing. But start now. Learn about Web hosting, FTP … so you understand how to create the HTML page that is iFramed into a Facebook iFrame canvas application. Plug away at it, my friend.

        It sounds like you’re a smart guy, certainly smart enough to get your head around this stuff. Just start experimenting.

        I mean it!

    13. I don’t think the big issue is switching from fbml to iFrames. Personally I believe that the tabs are somewhat hidden and it doesn’t look like a default tab is an option. Therefore, who’s going to want to pay a design/development to create a custom tab? I always knew custom tabs were not a necessity but this change will make selling the concept a huge challenge.

    14. Hey Tim, I was wondering lately why weird stuff was happening in Facebook.. kinda adds up. Disappointed in static FBML not being supported going forward. I think for many small businesses that used this, it seemed to level their playing field on Facebook. I think that the iframes option may offer more features, functions and the ability to customize design in pages, but the learning curve for the average user that used FBML is a little more complicated (though not impossible).

      I have learned a lot of the basics of FBML that enabled me to do “cool” things and learn at the same time. I can understand where David is coming from, because in this economy a lot of us are there, or have been there. I am going to look at this as a great (though forced..) opportunity to again try to learn something new, have fun and maybe make some money.
      Thanks for all of your help and guidance and I look forward to your, “Facebook iFrames Application Bible.”

    15. I updated to the new Facebook Page layout and regret it! Not only did they mess up my Land Page reveal code image, now once a new user clicks on the Like button they are redirected to my wall instead of my email sign up page. Here is my page http://www.Facebook.com/HYVAssistant I do not know what to do someone please share ideas on this.

      • Owen, Just sit tight. Facebook is aware they screwed up the Page tab widths and is scrambling to fix the bug. I would just hold tight. This too shall pass :-)

        • I think overall iframe apps will provide more functionality but it will be a limited experience in terms of engagement possibilities.

          However, if they do take away users ability to select custom tabs as default landing pages, then this is going to impact users by a whole lot. Do you know what’s the plan here?

          We will see how it goes!

          RG
          SocialAppsHQ

    16. A lot of concern about FBML going away. I designed something through a program called Lujure like mentioned above in article. They have a free version and it worked great for getting around it. You can see on our fan page the difference between the 2 versions is very slight. http://www.facebook.com/cmsomaha About us is done in FBML and Welcome is done in Lujure. Just set up Lujure account, implemented their HTML widget, copied my fbml, pasted it in the widget, did some very very minor tweaking, hit save then publish. Very easy and worked great. Totally recommend it.

    17. I get the screw up with the Tab Width but why does my reveal code not work? Now It redirects people to my wall and the way I set it up was so that folks are sent over to my email sign up. It’s really frustrating that they make changes like this. Anyways I will sit tight and see what happens. Keep being a great resource on FB stuffves!

      • Ouch, yeah I got redirected to your wall. I think you have to move on to iframe pages, Timware made a easy tutorial for this: http://www.hyperarts.com/blog/adding-iframes-to-facebook-application-2010-static-fbml/
        If you need any help with it, holla!

        @timware: Do we still have to use the “clicktohide” function trick with the new page updates?

      • Hi Owen, not sure this will cheer you up but I see the same problem you’re having all over. First Page of a major company I saw upgraded was TigerDirect.com (they were super fast at upgrading) and their Sweepstake landing tab is messed up now. I myself picked one of my Pages to be the Guinea Pig, same problem on my Welcome tab. And I don’t know if you noticed, it gets even weirder than that: if you unlike the Page and click Like again, then and only then the reveal effect works and you stick to the tab instead of being jerked to the Wall. Anyway I could learn to live with the new layout, but just this reveal flaw keeps me from upgrading at least right away.

        • I did some research yesterday after I got over my frustration and realized that FB is pushing us all towards IFrames and HTML5 type stuff. I am having my programmers take a look at how I can get the same results using IFrames.

          Also I read on a blog that the resizing of the width of the pictures is a bug and it will revert back to what it should be.

          If anyone comes up with a reveal solution for iframes please share.

    18. Hi,
      I do have a question.

      If right now I have a landing tab for non fans using FBML, will it still be the landing tab after the upgrade or will non-fans go directly to the wall?

      Couldn’t see it in the preview mode.

    19. Owen. mine does that too. I have it so after they click like, the nonfan blur image will change to unblurred fan only image…now they click like and are automatically directed to the wall; therefore they never get to read my unblurred image! :*( not sure what to do now. sad thing is I JUST FIGURED OUT ALL THE CODING THE DAY BEFORE THEY REDISGNED. I was so happy now…discouraged. I’m an Amature so thx to mr. Tim & his wonderfully instructed blogs I at least got that far only to be let down by FB. hmmm..Facebook.com/RDMIRONWORKS (my hubby’s biz. I’m trying to help get his name out using wonderful FB!)

    20. oh & p.s. mr. Tim….thx for not forgetting about us “little people” & breaking it down so nicely. very few ppl. take their time these days to help others so cheers to u!

    21. Tim,

      Does facebook remove the needs to double click in order to access the destination url? I do it in my php?
      If yes, can you explain how you need to change the php?
      Will they change in that you will not need the php?

    22. timware :
      David, I’d say Don’t give up! Learn how to create iFrame canvas apps. It’s more learning, but it sounds like you’ve got time. Dive into it! We’ll be creating a great eBook on doing. But start now. Learn about Web hosting, FTP … so you understand how to create the HTML page that is iFramed into a Facebook iFrame canvas application. Plug away at it, my friend.
      It sounds like you’re a smart guy, certainly smart enough to get your head around this stuff. Just start experimenting.
      I mean it!

      hi tim, when can we expect that great ebook! what’s the timetable? i can’t wait lol :)

    23. I don’t believe the changes are that bad, but I really dislike the icon of the custom FBML tabs, you should be able to choose your own.

      And for the iFrames, I believe it’s a good change. It’s not that difficult either.

    24. hi tim, thanks for that valuble info (again)
      does moving to an iframe canvas means that FBJS will no longer work?

    25. how can i add an iframe to my fan page. im strugling with this. please anyone help

      http://www.facebook.com/moola.community

    26. FYI – when you upgrade your #Facebook Page, your LikeBox will break. Seems like a bug that should get fixed.

    27. I used to like the emphasis on the top menu tabs and how front and center they were to the page, especially with how easy you could customize the tabs using FBML. Now they’ll be more hidden with less prominence along the left hand side and photo’s will be front and center, which I don’t think is as relevant for most people with fan pages.

      So far, not really liking what I see from the new layout.

    28. Whoops Tim
      There goes the iframe through AJAX idea. Seriously though (IMHO) this is a massive leap forward in a positive direction from Facebook. Will really sort the men from the boys for landing page development. My Joomla based welcome iframe is already up and running. No clicks for the user to see a fully featured ‘site’ with flash etc .

      So far the only thing I really object to is removing the tabs and putting the options on the sidebar. I cant re-arrange them to get my landing page on the top option. How difficult is that going to make it to get regular visitors and friends to keep visiting your landing page app.

      All in all I think it is a great leap forward but will take us all some time to fully weigh up the impact business wise.

    29. Another annoyance right off the bat (for me anyway), what if I don’t WANT any photos displayed on my wall? I’m forced to display photos I don’t want just to not have that ugly blank wall? If you’ve clicked away all your photos, they should have the decency to just not display the empty box.

      “Where are we going? And what’s with the handbasket?” immediately comes to mind! :D

    30. We’re pretty excited about all of these new features, and also very curious where things will be when (or if) the dust eventually settles.

      One thing we were excited about was using the photostream as a sort-of banner as many of us had previously experimented on our personal pages.

      While the 5 most recently updated photos are being displayed, it seems that they are in a totally random order. Are we alone on this?

      Our page is
      http://www.facebook.com/CircusCommunications

      P.s. Thanks Tim for the quick post!

      • Whoops.. nevermind I totally swooped by that section! Hopefully they’ll fix this, or we’ll have to get a little more creative to work with that randomness in a fun way! :)

      • Yes, I noticed that those top 5 pics are arranged randomly and can’t be controlled by the order in which you’re tagged, as with Personal Profiles. I talk about this in this post, above. Weird that they kill an avenue for creativity!

      • Agreed- the pics are random. To quote a FB engineer from the PDC program: “This is expected behavior”. Not my favorite!

    31. Facebook fixed the bug with the layout of the images on my Landing Page. Is this just me or are others seeing their images align properly?

      I tested the Reveal Code, that one is still not working, it is still redirecting folks to my wall.

    32. I just went ahead on one of my pages and created palette colors that would display along the top. Since I can’t have what I want (which is nothing), I decided to play their game. See that here.
      http://www.facebook.com/pages/ConAffetto-Designs/161679650513725

      It’s the best “quick fix” for my own situation that I could come up with.

      • Nice! As mentioned above, we went in a “goofier” direction: http://www.facebook.com/HyperArts …. It’ll be fun to see the solutions that come out of this. I actually kind of like the lack of control….

        • Not bad! Feels a bit like in front of a slot machine at the casino. Except I’m not looking for all 777, I’m looking for H-YP-ER-A-RT-S. Refreshing your FB Page is what I’ll be doing for the rest of the day… Wonder if I printscreen the winning combinaison, you’ll send me a free copy of the iframe tutorial I know you’re working on? Don’t bother, I’m kidding and I’m guessing you’re swamped!

    33. Tim-

      I just wanted to let you know there is a quicker solution to turning off all notifications (or some) is you manage multiple pages.
      From any of your managed pages, click on “Edit Page” and then on “Your Settings.”
      Click “View all email settings for your pages.”
      Once there, click on “Change email settings for individual Pages” in the Pages section.
      A pop-up will open where you can check/uncheck all of your pages.

      Much quicker than going to each page!

    34. Hey Tim, thanks for the comment-

      There are a ton of people out there that are going to have trouble making tabs (FBML, iFrames or otherwise) now. That is why we developed ShortStack. We wanted to level the playing field between giant business with tons of fans and the little guys.

      It’s a bummer that a lot of people are going to have a harder time building tabs now because of the switch to iFrames but we’re prepared (we’ve built the platform with iFrames in mind)

    35. Hi guys,

      Does anyone know what happened to the list of people who “liked” my page? Where do you find that in the new design?

      -m

    36. I am waiting for someone to post the iframe version of the FB reveal code. I am looking forward to that

    37. @Angie: Thanks for passing along the jQuery code for multi-tabs!

      • @Angie if you can implement the Reveal Code with your IFrame, you would have essentially solved the issue we all are facing with it redirecting back to the wall after the Like button is clicked instead of the second page in the reveal sequence

    38. I went ahead, since it would be forced by Mar 1 anyway, and”‘upgraded” one of my pages, although I really miss the top row of tabs. They are so obscure in that tiny font to the lower left now! I’m sure for the most part they’ll never be noticed, and I like to put valuable content there. Oh well, I know FB will do what they will do, sigh!

      Thanks for all the great info!
      Vicki

      • Yeah, that left nav looks pretty weak compared to the top tabs. I’d love to know the real reasons why they went to this approach. I’m sure there’s a logic that, if explained, would make sense.

    39. Tim- my new iframe test app/tab shows up fine when “logged in” but not when “logged out” of facebook. And I tested your Reveal tab in your sandbox while logged out… it doesn’t show up either. I cannot find anyone mentioning this, so I must be a dummy. But I called a couple friends and they can’t see them either. Ideas what I’m doing wrong? I am *assuming* that an iframe tab can be viewed by non-logged in users, correct?

    40. Ooops- meant to put a link for my tab: http://www.facebook.com/KenHoodTV?v=app_191990024161831

    41. Great read…one thing I notice you don’t mention is the fact that unless you are signed in as your personal profile when you fan a page you will not increase that fan pages numbers. I noticed today that fans that came over to my page and “like” me and were signed in as their fan page profile didn’t make a difference in my numbers only those who were signed in as their personal profile counted…don’t know if this is a glitch that facebook will address or if this is the way it is. Either way, right now it is a pain!

    42. It looks that sometimes the iframe tab is not showing up, just blank page. You have to refresh it and it will show up. FB bug?

    43. ok.. reading all the comments again and agian, checking all the links, I have a few dummy questions, i hope you can answer me:
      1.once and if i get the iframe canvas app. running, how do I add it to my page?
      2.am i actually building a web site and simply dispalying it thru the app.?
      3.do i need to put any code or links in the app. ? (like working with the fbml), meaning, do i need to go to edit app. and link the iframe, or something like that?

      i hope i made myself clear, but i kind of feel like SOUTH PARK character ‘towelie’ : “I have no idea what’s going on” :)

    44. How do we go about implementing Facebook functions in an iFrame, such as the Share button or a Suggest to Friend Tool?

      • Some features are available as XFBML which is the FBML you can use on non-Facebook pages which is what the iFramed pages are. Other features can be programmed using PHP and the Facebook SDK.

        We’ll be having tutorials on this blog on various cool stuff to do using iFrames. Stay tuned….

    45. Thanks for the information there. Haven’t really done anything with my Fan page since the change. I figure they might be still doing some tweaking since FaceBook is always constantly changing. Im not all that familiar with HTML or FBML myself but im trying to teach myself a little bit so I can get a real Fan Page Up and running thanks for the insight here.

      Steven Dean

    46. I’m also experiencing a shorter tab width with an iFrame tab. My static FBML tabs are still 520px but my iFrame tabs are only 504px… Is anyone else noticing this?

      • Hey Dan,

        I’m noticing the exact same thing. I upgraded one of my pages to the new format, set up the ifrrame app with a 520px landing page.

        It displays a scrollbar at the bottom of the page, and is slightly cut off, about roughly the amount of px you said.

        Is this part of the FB Bug?

    47. In the old page format you could move the tabs around so your most important custom tabs were showing have you found a way to do this with the new page design?

      Or do you just have to make sure to delete a tab, add a new one, and then bring in your old tab after that if you want the new one to show up?

      It sounds like I am talking in tongs here. :-)

      • Below the new left-side navigation, click the “More” link, then click “Edit” …. Then you can just drag and drop each page section to wherever you want it EXCEPT to the top, as that’s reserved for Wall. Cheers!

        • Tim – I have the same question and was happy to see that there was a solution! I was using the delete and re-add a tab. I went to my page and I only have a few tabs – so I don’t have the “More” link. Therefore I don’t have the “Edit” capability – is this a bug???

          Thanks, Craig

          • Looks like a bug! I just added more tabs (links) to my page to cause the “More” link to appear. I then click on the “More” link and indeed got my “Edit” capability! I then re-arranged everything and then removed the extra links!

    48. Perhaps I’ve overlooked the discussion of this matter already, but why do visitors to my fan page no longer see the 6 thumbnails of other ( non mutual ) fans?

    49. hi to all,
      can any one please refer me to the php code to creat the canvas app.?
      i have created the app, but cant seem to get it working.

    50. I love the new “use facebook as page” option! I really don’t want a presence on facebook except for my page. I’ve noticed that if I close the browser and then reload the browser, it reverts back to my personal account, not my page. I don’t log out – just shut down the browser. This happens on IE, Firefox and Chrome. Does anyone know if this is by design or a bug? I would really like to keep it to my page unless I specifically want it to revert back.

      Thanks, Craig

    51. Dave I just read on the fb Dev blog that there is an iframe bug forcing to 512px… they are working on it

    52. The only technical problem I seem to be having with the new format is viewing my page for non-facebook users or users that are not logged in yet.
      If I set my fan page to display only post from my page then if a non-face book user goes to my page they see all the contain. However if my page it set to show “Everyone” post then the wall just hangs trying to load the contains. This is true for my badges on my website linking back to my page.

      Has anyone else seen this problem?

      The other preference problem I have is that I do not have an option to show the posts in chronological order.

    53. Hey Tim, on a side note, thanks for providing us developers with such great information. Between you and Snipe.net, you’ve made my life so much easier!

      Cheers,
      Dave

    54. You can help me to solve my problem.

      I created a facebook application at:
      http://apps.facebook.com/MY_APP

      code for index.php:
      ————————————————-

      <style type="text/css">
      # wrapper {
      width: 520px;
      margin: 0 auto; border: 0; padding: 0;
      position: relative;
      }
      # {non-fans
      width: 520px;
      position: absolute; top: 0; left: 0;
      }
      </ style>
      <div id="wrapper">
      <fb:fbml version="1.1">
      <fb:visible-to-connection>
      <img src="http://domain.com/MY_APP/images/appcover.jpg"&gt;
      <fb:else>
      <div id="non-fans"> <a href="page.php"> <img src="http://domain.com/MY_APP/images/appcover2.jpg"&gt; </ a> </ div>
      </ fb: else>
      </ fb: visible-to-connection>
      </ div>

      ————————————————–

      how to redirect my index.php to about.php
      http://apps.facebook.com/MY_APP/about.php

      because I get an error as below when accessing the application directly without going through the fan page.
      ====================================

      App Temporarily Unavailable
      Runtime errors:
      fb: visible-to-connection: Required fbml_env var missing: "profile"

      Please help me.
      Thank you.

    55. Hello,
      thanks for the thorough review you wrote.

      I’ve been browsing some examples of the new Iframe tabs and me I’ve noticed that there are two different types of tabs:

      1) Those let you right click and see the source of the frame (http://www.facebook.com/carrcomm?sk=app_192959650715391)
      2) Those that are fully integrated with the facebook interface like yours (http://www.facebook.com/HYPERARTS?sk=app_126026510774735)

      What is the difference between these tabs?

      I followed the tutorial on facebook developers blog getting a tab like number 1.

      Sorry for my english

      • You can click inside the “RE HyperArts” tab and view the iframe source.

        I have noticed some page tabs that claim to be iframes but really don’t seem to be, as right-clicking them doesn’t provide an option to view the framed page.

        I think these are instances where the developer created an “iframe” canvas app, but then didn’t actually make it an iframe, but just a Facebook-hosted canvas page.

    56. Tim thanks for this helpful information. More than what Facebook itself seems to be providing in its own dev pages.

      I’ve recently been trying to wrap my head around iFrame apps on and have been pretty successful with some of my tests so far.

      I do have one question that maybe others have noticed. Is there a way to make an iFrame app auto-expand vertically? It seems to be stopping at the browser height which causes the vert scroll to appear, when then shrinks the width causing the horizontal scroll to appear. So far I haven’t really seen any ideas of how to fix this and wonder if it’s a bug with Facebook.

      It sure was nice that they gave us the opportunity to bug test for them eh?

      • You just need to add the “FB.Canvas.setAutoResize()” funtion in your code:


        <div id="fb-root"></div>
        <script>
        window.fbAsyncInit = function() {
        FB.init({
        appId : '123456',
        status : false, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml : true // parse XFBML
        });

        FB.Canvas.setAutoResize();
        };

        (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
        }());
        </script>

    57. Hiya,

      thanks for the informative article :)

      Just wondering – do you know how to set the Static FBML tab as the default landing page on the new Pages? We’ve just created our Page here: http://www.facebook.com/odysseycharity

      I’ve looked around but can’t seem to find the way to do it?

      Any help would be appreciated :)

      Thanks,

      Seb

    58. Okay…what am I doing wrong? I’ve got a new iframe based tab working fine in Chrome. The canvas page and the “tab” app are working fine. In IE (I’ve checked all versions), the canvas app works fine, but the “tab” is totally blank. What’s interesting is that not only is the tab area blank (the 520px wide area), but also all of the right side column stuff (ads, etc) that are served by Facebook are also missing. Firefox has the same problem as IE. Also of note, even in the canvas page for the app, the right side column stuff is missing for IE and Firefox.

      The “app” right now is just one word of text. I’ve tried it as a .php file and an .html file. Figured I’d make it as simple as possible to try to figure out the problem. I’m guessing it’s how the file is served. I have the permissions as open as possible.

      Any ideas would be appreciated.

      Thanks,
      JMR

    59. As a musician that uses FB to connect with fans, I am concerned about the apps we typically use that are in boxes on the left – specifically the music player app, that people see regardless of which tab they might be on. The ability to play our tracks (and purchase them) should be prominent everywhere on the page, as it is now. If they screw this up, then my FB fan page will just be a link to our external websites. And Myspace, which is much more artist friendly.

      • I would suggest creating an iframe app that has your MP3 files, videos, whatever OR just adding one of the existing apps for musicians. MySpace is certainly more artist friendly, but probably a big chunk of your potential audience is on Facebook.

    60. how do I view all of my fan page users without having to scroll in the little box via the “People Like This” link beneath the # of people who like it?

    61. Hi Tim, thanks so much for all of your great support, much appreciated!

      Okay, the new Facebook Platform for Pages seems to have some bugs. First of all, the reveal tab strategy doesn’t work properly. After clicking like to reveal the content the page redirects to the wall tab which defeats the purpose of the whole strategy (this occurs randomly about 50% of the time).

      The other problem is that the custom pages seem to show up inconsistently (I added 4 seperate static fbml pages all with the exact same code). One page was squashed, one was stretched and two were perfect???

      Have you experienced these problems with the new platform?

      Thanks Tim! :o )

    62. Hi
      Im having problems of activate the new profile layout on my fanpage.
      In administrator mode, all looks fine but for all the “fans” and for myself its still the old design.

      Ive looked everywhere for the “upgrade box at the top” but found nothing. Is there an other way to find or force this option?

      Thanks in advance!

    63. Hi Tim,

      I was really excited about the 5 top photos coming to Pages. It took me forever to finally realize that the can’t be “Set” the way they can on Profile Pages as you have mentioned.

      We are in the QR Code business so we decided to show a Rainbow Gallery of our Realtors QR Codes – take a look and show them some love – http://on.fb.me/i4CQrd.

      I would love to see some examples of unique uses given the pics will always rotate.

      Thanks,
      Erik

    64. Being new to the facebooks apps, I am trying to set one up for testing in order to add a tab to a fanpage. From what I have followed on fb’s getting started one needs to create an app. The problem I am having is to get the app or tab on a page the app must be submitted, and in order to do this one must have 10 monthly users. Is this correct or am I missing something. Also am I wrong in assuming any page one is an admin on and wants to add a custom tab you would have to create a new app and get 10 monthly users for every app created?

    65. You can set the default tab by following the instructions here -
      http://www.socialappshq.com/help/change-default-landing-page-for-facebook-page

    66. @Jonas. You do not need any monthly users to be able add your application tab to a page, or submit to the App Directory. Once you have set up the app iframe canvas and tab correctly in the application edit/setup screen you must then view your applications profile page. Its one of the options on the right when you have saved your app settings.

      From the profile page in the left column there is an option to “Add to my page”. When you click this a list of the pages you administer appears and you have a choice which pages to add your new iframe app to.

      Hope that helps
      Cheers
      Dave

    67. hi Tim, thanks to you and mr. Ken Hood iv’e worked out the iframe canvas app.(finally), so thanks again.
      I have one question : being a facebook page designer, having the need to set up multiple applications, is there a limit on the number of applications i can creat?
      should I maybe set up the app. thru my clients account and then have access to it via page admins?

    68. Do you have any idea how I can change the order of the tabs/apps in the new Facebook Pages layout? I can’t seem to drag and drop like in the previous layout. The Facebook Pages manual says to click Edit, but there isn’t any link called that and Edit Page doesn’t present any options either!

      Thanks in advance!
      Leo

      • Click “More” at the bottom of the list of “tabs” in the left column. Next to “Less” you should see “Edit” so click that. Then you can drag and drop but, like before, nothing goes above Wall and Info.

        However, there IS a bug I’ve seen where if you don’t have enough visible “tabs” to cause the “More” link to appear, you also don’t get the “Edit” link, so keep that in mind.

        I’ve filed a bug report on Bugzilla about this.

        • Thanks Tim, I just noticed that bug too. I added a few more apps like Notes, Links etc. until more came up and then I was able to rearrange. Much appreciated!

    69. Also, one of my Static FBML icons is green, while the other is gray. Any idea what that means?

    70. hello.

      Thanks for the review on the new features in face book pages.
      I need to know where “suggest to friends” is in the new upgraded version. I’ve been looking all over for it.

      Would appreciate a response.

      Thank you again

    71. hi tim, could you please address my questions?(#19)

    72. Hey there Ofer… I’m guessing that Tim is in crunch mode trying to come up with all of these answers… let’s give him some time (said in love w/big smile)….

      I did ask this very same question in the dev blog on Facebook and it was ignored by their staff. It was also asked by another developer and it was also ignored.

      So I’m *guessing* that there is no answer… yet. Trust me… we all need to know this and I’m sure we shall find out soon. :)

      • Thanks Ken. Yes, when folks get impatient with me because I don’t immediately answer their questions (and especially considering the huge amounts of $$ Facebook pays me ;) , it sort of cracks me up. But, as you know, I do my best.

    73. How do I change the icon on the new Static FBML buttons? They are grey. I noticed another FB business page had custom icon buttons. I’d like to make those as well.

      Thanks!

    74. hi tim, i’m terribly sorry, didn’t mean to get impatient.
      just my stress over the whole thing i guess.
      please accept my apologies.

    75. Tim – dude- most of us know how hard you work for free on behalf of all of us. And everyone should know… I don’t get paid to be your defender. (Besides- you don’t need one) :)

      Seriously- thanks for everything you do for the community… I think many of us would love to have a “Tim Appreciation Day” to say thanks.

      And a plug… if you need advanced ‘hands on’ help… offer to pay Tim for it (now everyone will get mad at me- sorry). I paid last spring for Tim’s help and got more than my money’s worth. It was a lifesaver. (Yes Tim you may quote me on that anytime).

    76. Hi Tim. Nice post!

      1 part bothered me though: “You Can’t Create a Cool Photo Tile Effect with Any Precision”. You still can, just not the same way as you would have in a Profile page. Check these Pages out:

      http://www.facebook.com/trixanpet?v=wall
      http://www.facebook.com/trixanbody?v=wall

      The trick is to use images that don’t matter what order they are displayed in. I can’t wait to see more examples like this (or until Facebook allow admins to choose the order of the 5 photos again).

      Cheers.
      Andy

      • Thanks Andy! What I *meant* to say is that you can’t create a Photostrip design that depends on a fixed ordering. As I’ve mentioned elsewhere, the random nature of the ordering is actually kind of cool and really not all that restrictive. As you say, it just calls for a different approach.

        Your examples are excellent. I just did a very comprehensive article on the new Page layout for the Social Media Examiner, which posts on Monday. I wish I’d known of your examples because I definitely would have used one. Very nice!

      • Hey Andy, if you cleaned up these pages along the lines I describe in my recent post about a Pages contest, one of these might be an example I’d use in an upcoming, pretty high-profile blog post.

        Clean up the navigation, and convert your Static FBML tabs to iframe tabs. To create a single iFrame app, you can use our iFrame Page Tab Creator Tool, TabPress.

    77. Hello Tim, thanks a lot for your explanation.

      I’m prety new in these issues but I manage the fanpage of the municipality where I work. Since I switched to the new fanpage, nothing is working (or almost nothing).

      I can’t add links, it won’t let me publish, only straight messages or updates.

      I also can’t access to the friends of the page or to the edit page.

      I have absolutely no idea whom to ask or how to solve this. Whatever help you can give me it will be highly appreciated.

      Thanks a lot
      Mun

      • Hi Mun: As I mentioned in my email to you can arrange a one-hour consultation with one of our resident experts here at HyperArts. We’re all in the SF Bay Area and the consult can be done by phone.

        We can review your code, help you troubleshoot issues, and answer any questions you have.

        It’s really a huge timesaver for you. Contact us for details.

    78. oh. i apparently had to select use facebook as an account owner not as page. not sure i like all the curves and turns of the new facebook but guess we’ll have to survive.

      Thanks for everything. Good job you are doing here.

    79. How do I require people to “LIKE” my page before they can click on all of my tabs?

    80. Thanks for this really helpful post. We’re having fun with the new top images on our Manchester Libraries page, will be using the iframes tutorial this weekend.

      Has anyone any idea how long we can keep using our existing fbml tabs after March 10?
      Sue

      • Beautiful graphics on your Libraries page, Sue! And nice use of the Photostrip! Thanks for sharing this.

        I recommend everyone click on Sue’s Manchester Libraries link!

        • Gosh – thank you – and thanks for fixing the link! Glad you like the graphics – some people think they’re a bit ‘out there’ but we like them and they make people smile. We really appreciate your kind comments – thanks. Back to the PHP tutorial now…

          • I forgot to answer your question about how long FBML tabs will be supported. Well, Facebook says they’ll continue to support existing installs of Static FBML and FBML applications, and will allow users to edit their existing tabs. I would suspect they’d also allow adding new Static FBML tabs until a user reaches the max of 10, but as a precaution, I’d advise Page admins to add all 10 now and edit them later.

            As for support for the 10 or so useful FBML tags supported by Static FBML, Facebooks says that FBML has been “deprecated” which, in Web parlance, can mean they could stop functioning in a month or in a few years. So who knows? They all work now.

            If users suspect a FBML tag is no longer working, they can always check our Static FBML Bible Page where we have examples of the FBML tags. If they’re still working there, then they work. If they’re not working there, then either they’ve been killed OR there’s a temporary bug.

    81. Hi, just wanted to mention 2 additional features of the new Facebook Page under “Edit Page/Basic Information”: 1) You can now change which category the page is listed under (e.g. if you chose “Musician” by accident or just want to be listed as “Director” now, you don’t have to scrap the whole page, you can just switch categories).

      2) For those with fewer than 100 likes, you can now change the name of the page. (Maybe you made a typo or just changed names, etc.).

    82. hey there,
      is it just me, or is the FBML still alive and kicking ?

    83. Regarding Static FBML- the date is now March 18th. From FB blog:”Starting Friday, March 18th, you will no longer be able to create new FBML apps and Pages wil no longer be able to add the Static FBML app While all existing apps on Pages using FBML or the Static FBML app will continue to work, we strongly recommend that these apps transition to iframes as soon as possible. Lastly, we want to be clear that our deprecation of FBML does not impact XFBML, such as the tags that support social plugins.”

    84. Hi Tim, is this a bug or not? my iframe app is not showing as the defult page when viewed from different account even though its already set to be the default landing tab. Do you know of this strange occurence? or i just missed some steps. thanks

      • How about a URL? But, anyway, you can’t set the default tab for anyone other than a non-fan. Fans get the Wall by default. Period. And so do Page admins.

    85. Hi Tim,

      Thanks for this very informative post…much appreciated.

      One thing I didn’t see you mention here…(and I’m not really sure whether the problem is related to the recent changes made to Facebook Like pages, or whether it’s related to something else – such as a Firefox change/update) is that the styling on some of my customized Static FBML tabs are suddenly all screwey – when viewed in Firefox. IE however displays the styling just fine.

      My suspicion was that FF and/or FB (suddenly) didn’t like the idea of pulling in CSS styles from an external file using the tag, which prompted me to embed all of the CSS styles into my Static FBML code…and sure enough, FF then displayed the page/styles correctly, however IE didn’t like that (which we all know was an issue with IE) and things looked all screwey in IE.

      In order to make both IE, and all other browsers happy, I tried implementing browser detection/conditional commenting techniques such as the following (to help resolve the issue) but IE still seems to have an issue with it….so I’m not sure what might be wrong…or how to resolve this issue.

      Is it something you’ve encountered as well?

      If yes, how did you resolve it? Any help will be greatly appreciated.

      Thanks.

      Gerard


      <!--[if !IE]-->
      <style type="text/css">
      a:link, a:visited {
      color: #0074A6;
      text-decoration: none;
      }
      a:hover {
      color: #0074A6;
      }
      a:active {
      color: #000;
      text-decoration: none;
      }
      </style>
      <!--<![endif]-->

      • Hi Gerard. IE doesn’t support CSS inlined with the <style> tag. So you have to use external stylesheets with Static FBML. This is another reason iFrame support is so welcomed, because you can inline styles. But, to my knowledge, all modern browsers support the call to external stylesheets.

      • I’ve noticed that my FBML pages have suddenly lost support for some tags.

        I would suggest migrating to the (much better & faster loading) iFrame implementation.

        The trickiest part is setting up the actual iFrame app, but once you have the hang of this, it’s so much easier.

    86. Looks like some code didn’t show up on my post….trying again.


      <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="http://www.abc.com/abc.css&quot; />
      <![endif]-->

    87. bimbolera says:

      hi,
      Fan-gating using iFrame was a great article by the way(big help)! keep it up! i would to ask one thing, is it possible that once i “Like” the page there would be a popup option if i want to post it in my wall or not just like in the old FBML?

      • The XFBML Like button, which is what you’d use on an iFrame, does exactly that. When you click it, a small window pops where you can post a comment to your Wall.

    88. Hi Tim,
      Looking to add a promo code or redirect to page of my choice after a fan clicks on the ‘Like’ button. Example: http://www.facebook.com/sittercity?sk=app_11007063052 This is great, how do I do this?

      Thanks

    89. John Heywood~ A man may well bring a horse to the water but he cannot make him drink.

    90. I have some troubles with my browsers! Someone said up here that he tried to implement browser detection but IE still seems to have an issue!
      It’s really annoying cause i’ve never had such problems till now, and i guess i miss something. If someone could tell me where i’m wrong, i’ll be very thankful!

    91. I swear, once I get the hang of a new Facebook design they change it! I wish they would leave well enough alone. I know engineering types are always looking on how to improve things, but some of us have other things to do!

    92. very helpfull article, thanks for sharing!

    93. Thank you for such a fantastic blog. Where else could anyone get that kind of info written in such a perfect way? I have a presentation that I am presently working on, and I have been on the look out for such information
      I would like to see more posts like this.

      Regards.

    94. I am new to Facebook.  I created a page a while ago and can post to my page etc.  I can Like other pages and write comments when I am logged in but when I go back to the page my comments are not there.  My comments also have a blank thumbnail.  I don’t seem to have a thumbnail on my admin account.  I don’t have any other Facebook account – is this anything to do with the blank admin thumbnail?
      Thanks for any help.

      • Did you create your Page while logged in to your Personal Profile, or did you do it as a standalone Business Page? If you want the full features of a Page, you have to create it while logged in as your Profile.

    Speak Your Mind

    *