Contact Us
  • Tutorial: Customize Facebook Pages with "Static FBML" application

    Static FBMLNEW: HyperArts Comprehensive Static FBML Guide — Adding, Testing & Troubleshooting!

    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 articles:

    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 a custom tab page is 520px;
    • 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.

    Adding Static FBML to your Facebook Fan Page

    1. Click “Edit Page” under the Page’s large avatar image
    2. If you don’t see “Static FBML” then scroll down to “More Applications” and you’ll probably see Static FBML listed:

      If not, click “Browse more”;
    3. Click on “Static FBML” to go to the Static FBML application;
    4. On the Static FBML application page, click “Add to my Page” in the left column
    5. If you are the administrator of more than one page, you’ll get a pop-up list

      Click “Add to Page” next to the page to which you want to add the Static FBML application, then click “Close”;
    6. You have successfully added Static FBML to your Page.

    Adding Your FBML Box or Tab to Your Public Profile Page

    • click on “Edit Page” in the left column right under the logo/avatar
      ;
    • Under “Applications” scroll until you see the “FBML – FBML”

      Click  “Edit”;
    • Enter in the “Box Title” field the name you want your tab to have
      Static FBML Box
    • Enter the CSS, HTML or FBML content in the “FBML” field;
    • As of late summer 2010, you’ll no longer be able to add this to your Wall box in the left column, as Facebook is removing the boxes altogether. In your code, do not set the width any wider than 520 pixels, as this is the maximum width for “application tabs” (which Static FBML allows you to create). (View the HyperArts Fan Page example — the “HyperArts” tab);
    • After you’ve added in your HTML/FBML — Click “Save Changes”
    • To add addition FBML boxes, just click “Add another FBML box” link at the bottom of any of your Static FBML instances, below the “Save / Cancel” buttons. You can create a number of FBML boxes with the Static FBML application, although there seems to be a limit which you’ll know when you don’t see the “Add…” link anymore!);

    Having Your FBML Appear Either in the Tabs or Left Column
    Although this will be a moot point after Facebook eliminates boxes altogether, at this point you still need to edit each Static FBML instance’s “Application Settings” to add it to your top tabs.

    • On your Page’s main page, click “Edit Page” under the logo/avatar
    • Locate the FBML application (it will be called whatever you entered into the Box Title field, plus “FBML”), and click “Application settings”
    • Next to “Tab:” it will probably have “Available (Add)”

      If it says “Added (remove)” then it’s fine and it’ll be added to your top tabs.

    Creating Additional FBML Boxes

    • Click “Edit Page” under the logo/avatar of your Fan Page
    • Locate the FBML box you have created
    • Click “Edit”;
    • Below the fields for the box you created, after the “Save / Cancel” buttons, locate and click “Add another FBML box”

    Comments

    1. Ooh, good to know Tim. I’m in the middle of setting up a Word Press blog attached to my regular site, then I figured I do the same on Facebook – create a business presence, I mean. If I can’t get backlink credit, it wouldn’t make a whole lot of sense.

    2. I’m struggling with static fbml at the moment–maybe you can help? I’ve been able to display images & links just fine, but I have a little html/css page I’d like to display on the Boxes tab and I can’t figure out how to get it to display. I’ve tried iframe, but nothing shows. I thought maybe I could embed the code & css right into Static FBML, but that doesn’t work either.

      I’m just trying to run a simple html menu that’s highly graphical, and each menu item links to a different external web page. There must be something simple I’m missing, right?

    3. Savannah Brentnall :

      I’m struggling with static fbml at the moment–maybe you can help? I’ve been able to display images & links just fine, but I have a little html/css page I’d like to display on the Boxes tab and I can’t figure out how to get it to display. I’ve tried iframe, but nothing shows. I thought maybe I could embed the code & css right into Static FBML, but that doesn’t work either.

      I’m just trying to run a simple html menu that’s highly graphical, and each menu item links to a different external web page. There must be something simple I’m missing, right?

      Any CSS needs to be inlined into your HTML code on your Static FBML box. Here’s a snippet of code from our “Websites” box that appears in the left column of our HyperArts Fan Page:


      <div style="border:1px solid #73a641; width:180px; margin:0; color:#777;">
      <h1 style="background:#73a641; color:#fff; padding:3px; font-size:12px; text-align:center; font-family:arial,helvetica,sans-serif;">HYPERARTS WEBSITES & PROJECTS</h1>

      <div style="padding:10px 5px;">
      <p><a href="http://www.hyperarts.com/" title="HyperArts Web Design & SEO" rel="nofollow"><strong>HyperArts Web Development & Marketing</strong></a><br />
      HyperArts is a full-service Web shop providing website design, Web programming & development, Search Engine Optimization (SEO) and Social Media consulting .</p>

      I hope this helps. Let me know if you still have questions.
      Tim

      • Thanks so much for the quick response. I think I understand how to embed the actual tags, but it’s the other stuff that’s confusing me. For example, my css file contains this:
        “#womensshoesbutton a:hover {
        background-position: -193px 0%;
        }

        #mensshoesbutton a:hover {
        background-position: -154px 0%;
        }

        I’ve tried adding that to Static FBML but it interprets it as text.

        • You can’t put styles in like that. They have to be inlined within the HTML tags, using:

          style=”background-position: -154px 0%;”

          or for links: <a href=”filename” style=”color:#900;”>

          which will give you the link color. I wouldn’t try to control hover states on links. Just remember that all CSS has to be properly imbedded in the HTML tags.

          Tim

    4. i think this works for business pages only? hmmm…

    5. Thanks for the lesson – I had loaded the Static FBML App and was heading in the same direction as you, but you seriously just saved me an afternoon’s worth of trial and error to figure out for myself exactly what you’ve posted. Sweet little customization for Fan Pages.

      The capacity to customize platforms that seem so familiar to people makes things stand out so much. People hit the page and an oddly named tab with content formatted in a different manner really stops them and makes them pay attention.

      Ben

    6. Are there any required tags that MUST go into the FBML box? Like , or anything like that?

      The reason I ask is that regarless of WHAT code I put into the fbml box while editing, when I view the tab from “normal view” (as a visitor would see it) it just shows me a blank canvas page….

      • You just need properly formatted HTML in the FBML box. If you don’t know HTML very well, then you will have problems. You don’t need all the HTML header elements; just whatever you want to display, using standard HTML markup.

    7. Great post, thanks! I’ve seen some very nice Facebook pages/tabs made with Static fbml and the images all seem to be pulling from facebook somehow. If I click to view the image, the url is some crazy fb url. Do images have to be uploaded into fb to use them in fbml? If so, how does one go about doing that? I don’t see any options anywhere for uploading the graphical elements to be used in the fbml page/tab. Thanks.

      • You would have to upload any image you use in an FBML page to a server, so that you can reference it from your FBML page with the standard image call:

        <img src=”http://www.yoursite.com/images/fbml-image-you-use.gif” />

        You can use the Photobucket, an image-hosting service and I believe after you upload an image, they provide the code you need to call that image from a Web page or FBML page.

        • I’ve played with FB hosted images as well as images called from other servers and the FB hosted images always load while the external images are a little hit and miss in terms of loading. YMMV

    8. I added a few boxes under our business page, but cannot seem to control how the size of each box is to be. If I move them around, it seems to auto-size it and if they appear one under another, it only takes up half the width of the page. How can this be increased/decreased so I can tell it what size the box is to be, then auto-fill in the text in the box?

      • I’m not sure what you’re talking about. If you know HTML, and that’s what I use in my FBML boxes, then you’ll know how to control width, etc. And I don’t understand what you mean about auto-fill text. Sorry!

    9. james ireland says:

      hello

      ive formed the boxes as the image links fine on facebook, yet when seeking to move the boxes onto the left column on the profile page, there is no tab to “move to wall tab”.

      Any pointers?? Thanks for any input… :-)

    10. A good read! How do you change the name of the tabs at the top like your portfolio one?

    11. Hi Tim

      Great post – and saved me a lot of research! So thanks.

    12. Thanks for this post – created a simple tab and will work on this more later

    13. Hey,

      When I get to the static fbml website – The only option I have is to add-to-favourites.

      I’m sure there is something I need to do, and after 3 hours of searching… I’m losing the plot.

      Any ideas? Have I missed something simple?

      Cheers.

      • You can only add Static FBML to a Fan Page (aka Public Profile). You can’t add it to a Personal Profile. So perhaps that’s why you’re not seeing “Add to my page”. When I’m on the Static FBML page and logged in to Facebook, I see the “Add to my page” option above the “Add to my Page’s Favourites”.

    14. I have been trying to figure this out for the last couple of days and can’t get it. After clicking on the link for Static FBML page.
      I can’t find where to click “Edit Page” under the logo/avatar.

      At the FBML Static page, I’m not able to add to my page.

      • I hope you read the above: you can only add Static FBML to a Fan Page, not a Personal Profile or Group. If you’re logged in to your Fan Page and can’t see “Edit page”, I’m not sure what the issue is.

    15. Hi there,

      thanks for the great post. Perfect Information and guideline.

      But I have one mor question. Is it possible to to change the order of the tabs? For example bring my tab next to the wall tab in the center column.

      Thanks for your help.
      Michael

      • You can change the order of your tabs, *except* for “Wall” and “Info” which permanently occupy the far-left positions.

        • how do i do this?…for eg i set up a custom tab after photos. now i want to move the custom tab Before photos. Thanks.
          And fab tips btw, on FB..you guys come up on the search for every query i had:-)
          Raj

    16. Simerpreet Singh says:

      Hi All,

      I hv been trying to run Javascript in my page but its not working.Can i add my own JavaScript on my page or facebook doe’t allow this. I have to implement ajax on my page for reading data from some url and display on my page,Is it possible????

    17. Hi,
      How did you add the My del.icio.us box on the left side of the Wall page? Can something similar be done with Twitter?

      Also, how did you add the Website Projects box on the left side of the Wall page?

      I have downloaded the FBML app and have successfully added a new tabs and boxes. I just can’t figure out how to add left side Wall page items.

      • I believe the Delicious box on the left is the “My del.icio.us” app for Facebook.

        Instructions on adding the boxes in the left side column are in this blog post.

    18. Brenda Williams says:

      My first roadblock was not knowing how to get the “BOXES” tab on my page to use the static FBML in (along side of Wall, Info, Discussions, etc). A Facebook “How To” guide told me the Boxes tab was one of the default tabs that just showed up. This did not happen for me. I did some more experimenting. This is what I did:
      •Went to “Edit Page” under the photo at top left where we placed our logo.
      •After selecting “Edit Page”, I chose “Applications, and then Browse More”.
      •A page of apps came up and in the search box, I typed static fbml.
      •This resulted in only the static fbml app appearing.
      •I selected it, clicked, and it took me to a static fbml page with that icon.
      •Under the icon, it had a link that said “Add to My Favorites Pages”, but no other link was available•In “How To Guides” it says two links are available and to select “Add To My Pages”. But that wasn’t available.
      •So I went ahead and chose “Add to My Favorites Pages” and a “Boxes” tab did appear on my page. I selected it, and saw the static FBML icon/app. I selected the little pencil and tried to choose “Edit Box” – but it was disabled.
      •So even though I have the Boxes tab, and the static fbml icon/app showing in a box on the Boxes tab page (within a box that says My Pages Favorites) – it doesn’t appear I can do anything with it.
      •I have sent a couple of notices to Facebook static fbml developers, but haven’t heard anything back.
      •Any suggestions?

      • Brenda Williams says:

        I found an answer on the developer’s forum. You can’t add the static fbml from a business account. I added my personal account email as an admin on my business account. Then I logged in to my personal account and downloaded the static fbml. It had the “Add to my pages” link from here. When I clicked that, a dialog box popped up and asked if I wanted to add it to my business account (it recognized me as an admin). So that worked.

        • Yup, that’s right. You need to be logged in to your personal profile in order to add Static FBML to your Fan Page. I’m glad you sorted it out, Brenda!

    19. thanks, this was very helpful!

    20. Mark Nestor says:

      Is there a way to set what the visible tab is when someone goes to your biz page? I have setup the static FBML tab as I want it, but I want that to be the tab that is active when someone goes to the page. In the wall settings, I set the default landing tab for everyone else to this tab, but it doesn’t seem to work. It always goes to the wall tab. Am I missing something?

      • When logged in to your Facebook Page, click the “Edit Page” link under the main logo in top left. Then click the “Wall Settings” Edit icon; Then select the preferred landing tab using the pulldown next to “Default landing tab for everyone else.”

    21. I just figured out how to post an image to a Static FBML box (took a few days – it seems like such a simple thing.) However, FB is changing my link on me. Is there special FBML code that I need to use to make it go to my site?

    22. I was using a Static FBML box as my pages pic/avatar. When it was clicked it linked to our actual website. I changed back to a regular pic, but now want to use the static FBML box, but it doesn’t work now.

      When I select “change profile pic” and selet the “use this application” hit “save” it still keeps the normal picture and not the static fbl box.

      Is this still possible to do? Has something changed in FB?

      Thanks for the help!

      • I’m not sure I follow you, Dave. I don’t have “use this application” as an option on our Fan Page if I click “change picture” on our page profile pic (the large one at the top left of the page.

        • if you select the profile pic, then select “choose from album”, then “change profile pic”, scroll to bottom and “use an application as profile pic”

          How are others using a picture with a link for their profile pic? Open to all options :) Thanks!

          • Dave, I just don’t see where, in changing the profile pic for Fan Page (or Personal Profile), there’s the “use an application as profile pic” option. I followed your exact instructions above, but couldn’t find it. Can you show me a Fan Page where the logo/profile pic links anywhere other than to the various pictures?

      • Same for me Dave! I’ve been having this problem for over 6 months now!

        • Since Dave never responded to my reply, Bart, maybe you can send a screenshot of what he’s talking about. As I said, I didn’t see any “use an application as profile pic”?

    23. I found this code on w3schools.com website…

      Can I use this in the fbml box and change it to my website and have it display properly?

      • What code? You didn’t attach any or provide a link. If it’s standard HTML with inlined CSS, it should work. No JavaScript, no iFrames. You *can* use getElementByID, however.

    24. Hi is there a way of adding an iframe to my fan page? Ive tried but it just displays blank.

      Im using

      Im looking to do something like this: http://www.facebook.com/ChelseaFC?v=box_3&ref=search

      Thanks!

    25. Yes I’ve tried that, but it appears blank. WordPress also seems to have removed it from my post too:

    26. <fb : iframe src=”http://www.google.com” />

    27. Turns out i was doing nothing wrong. you cannot use iframes with static fbml. Im not as stupid as your last comment made me look :)

      • No, you can’t use iFrames in Static FBML, neither <iframe></iframe> nor <fb:iframe></fb:iframe>. I thought that the Chelsea page uses an app called My Info, as it appeared you can use iframes with the app. BUT it turns out that although the iframes will work in the “preview” they don’t render when you actually add a tab. And the developer of the My Info app, Tim Nicholson, states: “Facebook specifically forbids [iFrames] and they will strip out all references to an iframe. It probably looks like it will work when you are in the My Info box editor, but it won’t display on your actual profile.”

        So I’m not sure how the Chelsea page is getting around this. They’re using something that is pulled into the Boxes tab, but that’s as far as I can discern.

    28. Hi everyone!
      I’m creating a Facebook Fan Page for my company.I’ve found it very useful to use Static FBML app.However, it is really difficult for me to write codes for FBML because I’m not a web-designer. I really need some advice from you !
      Thanks!

    29. Caroline Hudson says:

      I have added Static FBML app to my page and I wish to move it to the wall instead staying at the tab, but when I clicked on the pencil icon, there is no options other than to delete it. Am I doing anything wrong here?

    30. Caroline Hudson says:

      And yes I have added the tab and wall function in the application settings. Hope you can help me on this.

      Thanks a lot,
      Caroline

      • So you’re on your Fan Page, in “Edit Page”, and when you click on the pencil next to the instance of the Static FBML app, both “Box” and “Tab” say “Added (remove)”? And it’s not appearing in the left column of your page as a Box? What’s the URL of your page?

        • Caroline Hudson says:

          Tim, I have figured. I have clicked on the stastic fbml tab instead of the box. It all contained there.

          Thanks for your help.

          Best regards,
          Caroline

    31. Tim,
      I’ve been able to successfully embed .swf files using your instructions, but do have a quick question. I’m having issues with the rest of the Flash movie loading and I assume it is because the flash movie loads certain components from an xml file. Do you think that I need to use absolute paths instead of relative paths? Also, would setting a crossdomain.xml policy to accept facebook.com hostname be necessary.

      Thanks in advance for the help.
      -Adam

      • I would certainly try using absolute URL paths. So inside the .swf there are calls to XML files? Of course, you’d think that if the paths are correct relative to the .swf file, then that wouldn’t matter. Or *maybe* it’s something to do with those add’l components. Not sure, Adam.

    32. I can’t seem to add more than two wall tabs. Any tricks out there to bypass this?

      • Nevermind…I forgot I had to go to the “boxes” tab to actual move the tab ot the wall, and NOT go to the tab itself.

    33. Hi there, your posts have been very helpful! i really appreciate it! I am not great at html coding, but I have given it a go. I created a simple text file in dreamweaver, I embedded all of the styles within the body and then i copy/pasted the code into the appropriate FBML tab on my facebook page. now it is blank, and I don’t know where I went wrong. I am sure it is a simple mistake, i just can’t figure it out!

      here is a link to the page, that i supposedly copied code into.
      http://www.facebook.com/pages/PULSE-Art-and-Technology-Festival/171724774081?v=app_7146470109

      could you please help!!! thanks so much!

      • First, I can’t really view the source of your Facebook Page to see the HTML you put into the Static FBML page. However, I’ll tell you that you should just include the content between the opening and closing <body></body> tags, and NONE of the other tags that precede or follow the body tag.

        And NO JavaScript or include files, etc.

        Let me know if this helps.

    34. Help. I was able to add the FBML page, and bring it from the left side of my facebook page up to the top tab area, but it won’t let me edit it to change the name or input my code. WHY??

      • To edit your FBML page, you have to click the “Edit Page” link under your logo on your FB Page landing page, then locate the instance of the Static FBML page you created and click the edit pencil icon and there you should see the option to edit the app. (Each FBML page you create is an “instance” of the app). The edit pencils in your tabs or wall just allow you to move the FBML from your wall to a tab (or vice versa) or remove it.

    35. I’m attempting to add FBML to my Fan Page. However, when I get to the step to Add to My Fan Page it only says Add to Favorites. Is this because I only have a Fan Page and no Profile associated?

      • You need to have a personal profile added to the Fan Page as an administrator. Then log in to the personal profile and you should then be able to add the Static FBML app to your Fan Page.

    36. Hi I was wondering if you knew how to customize the titles/headers of the static boxes. I renamed them but I wanted to add color like on this page: http://www.facebook.com/lucy#/lucy?v=box_3

      Also I wanted to know if you knew about moving static boxes into wall tabs. Once I do it, I cannot make a new box under a new tab! PLEASE HELP! I’ve been doing it for hours and im lost!

      • As far as the titles and headers on the page you linked to, I’m assuming you mean the headers with the orange backgrounds. If so, those are just created using the Static FBML app and coding it with CSS/HTML. As far as telling you how that’s done, I don’t want to start providing support for basic CSS/HTML, but there are plenty of sites that provide tutorials. Here’s one.

        As for your boxes question, you can only have one boxes tab, as far as I know.

    37. I typed in the CSS code for the header background but got nothing…. i used this code:

      /* Facebook Box Header */
      {
      background-color:#D8DFEA;
      border-top:1px solid #3B5998;
      color:#3B5998;
      font-size:11px;
      padding:1px 6px;
      margin:0;
      font-weight:bold;
      }

      • You can’t put in CSS styles like that. You have to inline them. For example, if your header tag is <h2>, you’d style it like this:

        <h2 style=”background-color:#D8DFEA; border-top:1px solid #3B5998; color:#3B5998; font-size:11px; padding:1px 6px; margin:0; font-weight:bold;”>

        Make sense?

    38. yes it makes sense but it will only change the color of the header of my text in the FBML box not the header of the box itself

    39. ok sorry to be a pain.. i’ve been working on this project for 2 weeks now for a business and im REALLY stuck! Do you have any idea on how to change the color and font of the header of the box at all? That’s what I am having trouble with.. also when you do tabs inside a static box, how would you link them to switch between tabs?

      • Your questions are going outside the scope of what I’m willing to support here. And I don’t have a link to your page to see what you’re talking about. (Also, please reply inside my reply so that the thread is obvious … thanks.)

    40. Great post. Is there any way to change the icon that shows up next to the tab titles when you click the “>>” More button? I’d like to change the dotted box to something more personalized. Any thoughts?

    41. Short and sweet. Awesome post! I’ve been looking for information from a designer regarding FBML and this post gave me that little bit that I was missing. Thanks for an awesome post! I’ll keep you posted on my progress…

    42. I couldn’t hold myself… It’s 1:45 am, and have been working on it for a few hours… Here is the result :

      http://www.facebook.com/mdostudio?v=app_4949752878

      I worked on 754 pixels in width, instead of the 600 suggested above…

      It’s pretty simple if you can hand-code XHTML and know your CSS… Although I have to say that I am so used to having external style sheets, that at first I was a bit confused…

      The other issue I had was that I’m sooo used to working with DreamWeaver’s color coded code, and instead I worked on their small box with black code and black text… Really easy to make mistakes… Next time, I’ll work on DreamWeaver and copy/paste to their box to preview.

      Again, thanks for your post, I wouldn’t have finished it tonight if it wasn’t for it… Thanks!

      • Nice looking page, Marco! I’m really glad this post helped you out. That’s the reason I wrote it (and to help me remember & learn!). Cheers.

    43. I tried using the following your steps to add custom boxes on the left side of my public profile facebook page like this site – http://www.facebook.com/pages/The-Lanier-Law-Firm/48570030993?v=wall – but I was only asked to become a fan of fbml and was unable to customize/add boxes on the left? Can fbml help me with this?

      • It sounds like you set up your Fan Page (aka Public Profile) directly and not through a personal account. As you should have read above, you MUST have a personal account associated with your Fan Page as an admin in order to add applications.

    44. Great thread!!!

      Hi, I set up a fanpage for a friend using my personal profile as an admin.

      How do I include him as an admin??
      I thought it would be as simple as adding a group officer but am at a loss.

      • When logged in, click “Edit Page” under your avatar/logo in upper left corner of Fan Page. On the next screen, below the green “Promote your page” button, you’ll see in that narrow column, after “Promote your page,” “Admins”. Click “Add” then select the friend(s) you want to become an admin. Viola!

    45. Wow, what a wealth of information. One of the visitors to my blog was having the problem where the option to “Add Static FBML to my Pages” wasn’t appearing under the picture. Thanks to your blog, I found my answer. You first have to click on the “Add to My Favorites Pages”.

      Thanks again,

      Rebekah Owens

    46. I am an educator setting up a Facebook page for our grant recipients to keep in touch and share their service-learning projects. I like the page setup when I click on the Hyperarts tab on the Facebook page that you reference above. I have set up web pages using html and CSS for our schools, but I am self-taught and not a professional. Do I have to have access to a server to set up the pages? I want to showcase each school like you have done with your profiles page under the Hyperarts tab. Any help or direction would be appreciated. Thanks a bunch.

      • Hi Jana, If you want to use images in your Static FBML tab, you’ll need to have those be online on a server somewhere. If the images are already online, you could just link to them with absolute URLs (using the full “http://www.domain.com/image-name.gif”). As for creating tabs like we did with HyperArts, that’s a combo of CSS, HTML and FBML and doing that is beyond the scope of this post. However, my company HyperArts can be hired to help with this.

    47. This is the code that I have for the page and I can’t seem to figure out why it won’t display.

      Also do you know how this fan page gets video onto it??
      http://www.facebook.com/crowdconversion?v=app_7146470109&ref=ts

      Here’s my code:

    48. Your code didn’t come through because, as I mentioned above, you can’t paste HTML code or JavaScript into a blog comment. You have to use the ISO character equivalent for the opening “< " of the code, which is: &lt;. It's okay to have to closing tag "/>, just not the opening tag because the software tries to interpret it as mark-up, not an example of mark-up. As for how to embed video in an FBML page, check out this post I did: http://bit.ly/BB9PE

    49. I wish we had the money in the grant to hire someone, but it is all allocated for environmental service-learning projects at the schools. I’m so new at this that I don’t fully grasp all the details, so if I ask something that is beyond the post, please tell me. I completely understand and appreciate your response. One more question. When a person clicks on one of the tabs and it takes them to a new page, are those pages hosted by your server or by the Facebook server? Thanks.

      • All the content is on the one FBML page, but clicking each tab shows some content and hides other content, so it appears that you’re seeing different “pages” but it’s just done with an FBML markup that does show/hide of content. I’ll have to do a blog post about it at some point :)

        • Our page is coming along, but I could not have done it without your help, so a big thanks. I have set up a menu bar and have set it up to click and show. I have one more question. I am currently working on one fbml box, but it is getting rather full when I add all the content that has to be shown on each page when it is click to show.

          My question is this. Would it work if I set up fbml boxes that correspond to the tab titles, and copied their url from the direction bar when I was on those fbml boxes and then entered that as a target in the click to show? Then instead of everything being on just one fbml box, when the tab was clicked it would go to the FB address with the other fbml box. I hope I am being clear and not too confusing. If you would like to take a look at my page it is Service Learning Texas Healthy Habitats. Go to the test2 tab and you will see what I am doing. If you click on the profiles tab in the test2 box, you will see what I have set up. You can probably look at page source and decipher the coding, and you will see how all the coding is in the fbml box test2. It will continue to grow as I add code, and I don’t know if that is okay or too much in one box. If this is getting too much into your company’s business, I understand if you can’t discuss it. Thanks.

    50. steevithak says:

      Everything is working great as described in your tutorial except for one thing. I can’t get an FBML app box moved onto the wall of my fan page. I can put it on a custom tab and the box appears on the “boxes” tab. But there’s no edit/pencil icon in the header of the FBML app box on the boxes page. Do I have to do something special to make the edit/pencil icon show up on the FBML app box? I’ve been playing with this for hours and just can’t figure it out!

      • steevithak says:

        Finally made some progress on this one. Found out why the pencil/edit icon doesn’t appear on the FBML boxes on the Boxes tab, allowing them to be moved to the wall. (or at least one reason, there may be more)

        If the main (center) column of the wall doesn’t contain enough content, it’s shorter vertically than the left column where the wall boxes live. In that case, FB decides there’s no room for more boxes and silently disables moving boxes to the wall by removing the pencil/edit icon from boxes on the Boxes tab. There is no warning or explanation given (which is definitely a bug in my opinion).

        The fix is to add a bunch of content to your wall so that it becomes longer vertically than the left column. This opens up more room for boxes on the left and FB will turn the pencil/edit icons back on and you can move boxes to the wall normally.

        • Thanks for making your findings available here! I hadn’t time to research the issue you had described, so thanks for covering for me :)

    51. Check out some codes for using Iframes, drop down menu, invite friends
      +
      a tutorial on how to integrate an external page on to a tab of your facebook business page.

      http://www.facebook.com/webwhispers?v=app_6009294086
      (become a fan to check it out – ur comments r welcome)

      • I see that if I click “Domain Booking” or “Hosting” that page is in an iFrame. But I don’t see where you explain how you did this? Your step-by-step tutorial on pulling in an external page via a tab is as close as I can see you got. But you say “Check out some codes for using Iframes.” So how did you do it?

        • Select the “Drop down code” under the drop down menu. The code is there

          • Are boxes in the sidebar even possible anymore? I’m having trouble creating anything but tabs. Help!

            • I just added FBML box to the sidebar. If you go to your “boxes” tab on your FB Fan page…it should show your FBML static box…then hit the edit button in the corner and assign it to your profile page…usually it shows up under your fans by default.

    52. Static FBML has some issue with IE.
      when accessed with IE it will not recognize the CSS within code.

    53. Have same IE CSS issue – if you login, the CSS works!?
      Strange.
      Anybody know of a way to solve this?

      • Using the <style type=”text/css”></> tag with the style rules will work in most browsers, but NOT Internet Explorer 6, 7 or 8 (and probably 9 when finally rolls around). However, you CAN call an external style sheet using:

        <link href=”http://yoursite.com/styles/layout.css” rel=”stylesheet” type=”text/css” />

        and it works (I tested to make sure). Of course, you’ll have to upload that CSS file to your server.

        It shouldn’t matter whether or not you’re logged in. IE just doesn’t like the <style> tag.

        Alternately, you can inline the style rules in the HTML tags like this:

        <p style=”font-size:14px”> (just an example)

    54. Oh, what I am trying to achieve is at this tab:
      http://www.facebook.com/brandswithbite#/brandswithbite?v=app_6009294086

      As you can see, it works like I want it to on every browser but IE. If I sent you code would you be able to help? This seems like it should be a quick fix. Thanks!

    55. I created a test code which allows fans only to view content. However this does not seem to work in IE. Any ideas.
      http://www.facebook.com/webwhispers?v=app_10442206389

      • Hi Glenn, I’m a Fan and I see the green fan message. I checked on IE 7 on a machine where I’m not a fan and the “testing” tab has no content, so I guess this is the issue. Can I see the contents of the code? Post here and also email it to tim @ hyperarts . com.

    56. Andrew, Please email the code to tim @ hyperarts . com.

      Andrew :

      OK, it’s pretty long, although you probably would be most concerned with the front part. Would it be easier for me to email it? Would it be sales010@hyperarts.com? I’ve spent about a month trying to figure this IE issue out. It gets pretty demoralizing. Any help you can provide would be amazing.

    57. IS there a way to add a guestbook to the FBML tab? We could achieve what we need to by linking to a discussion, but would rather not have the viewer leave the tab page.

      • Well, you can’t include it with an iframe. It really depends on what you want your “guestbook” to do. If it’s a form that someone sends to you, that can be done. If it dynamically adds someone’s name and comments to your Facebook FBML page, I don’t think that can be done, except by either building an app or searching Facebook to see if there’s an app available that does what you want. A quick app search turned up these Facebook guestbook applications (untested):

        Super Guestbook
        Say Hello!
        SocioApp

    58. I’ve successfully been able to add images to my static fbml tab. I haven’t been able to implement css into my page. I want to add images and position them via an external stylesheet.

      Example(this is what’s in my stylesheet->styles.css:
      #apDiv1 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 759px;
      height: 166px;
      background-image:url(‘http://…/welcome01.jpg’);
      }

      This is what’s in my tab:

      I triple checked all of my urls and everything is there but doesn’t show in my tab. A simple “img src=” works to show an image but as soon as I wrap it in a div, it no longer shows. I’m barely just getting the hang of coding and hopefully you can spot something simple I’m missing.

    59. oops…here’s the static fbml tab code:

      <link href=”http://pranceandswagger.com/styles.css” rel=”stylesheet” type=”text/css”>

      <div id=”apDiv1″></div>

      • I see a couple problems. First, in your stylesheet, don’t put quotes around a URL in an image call: url(http://domain.com/images/my-image.gif), NOT url(‘http://domain.com/images/my-umage.gif’).

        Second, you’ve positioned everything using absolute positioning. Is the containing element position:relative? It has to be.

        As a rule, I’m not going to provide support for using CSS and stylesheets, but these two things really jumped out.

    60. Hello Tim,
      I’m struggling with starting my FBML coding. I`ve read your tutorial, i`ve looked through each comment on both pages and am just not getting it. I know html somewhat, but cant figure how to add a background color to my fbml project.

      do i just use <background-color: (etc) as a tag? I read what you wrote about not using a or tags and just adding your html in the body without the tags – this confuses me. I already have a header image on my fbml box but want the background color to be other than white.

      any help would be great. thanks.
      fb page is nightmair creative if that helps.

    61. I’m not sure what you’re doing from what you provided. I will say the answer is definitely either in my post or the comments. If you inline the background color, it’ll work:

      <div style=”background-color:red;”></div>

    62. thanks for the quick response. not sure what you mean by inline the color background.

      here is a direct link to my page:
      http://www.facebook.com/pages/nightMair-Creative/219559784972?v=app_4949752878

      i intend on adding more photos under the banner/header and want the background behind the thumbnails to be colored rather than white.

      I tried the code you gave me – it didnt work. which means i’m doing it wrong. do i put this code at the beginning before my header/banner code? or can i put it after my header/banner code? and the would go at the end of all coding for the entire page, yes?

      thanks,
      donna

    63. i’m using this so far (i think this is what you mean?)

      Click on a photo below to view entire album


                 *Bullets in Overdrive*               *Stone Temple Pilots*           *Carly’s Angels*

      • oops. my code of course changed.

        try again – i’ve changed all the to [ ] just so you can see the coding.

        [img src=”http://img.photobucket.com/albums/v504/Donna_mair/greenday1.jpg” border=”0″ alt=”myspace header” width=”760″]
        [p]
        [p]
        [p]
        [font color=”Blue”] [font size=”4″]Click on a photo below to view entire album [/font] [/font] [br]
        [p]
        [p]
        [br]
        [center][a href=”http://www.facebook.com/pages/nightMair-Creative/219559784972?v=photos#/album.php?aid=164089&id=219559784972″ target=”blank”][img src=”http://photos-f.ak.fbcdn.net/hphotos-ak-snc3/hs112.snc3/15945_219849964972_219559784972_4101284_5759824_n.jpg” height=”200″][/a] [a href=”http://nightmairphotography.com/” target=”blank”][img src=”http://nightmairphotography.com/wp-content/gallery/stone-temple-pilots/dsc_0528-1.jpg” height=”200″][/a] [a href=”http://www.facebook.com/pages/nightMair-Creative/219559784972?v=photos#/album.php?aid=164340&id=219559784972″ target=”blank”] [img src=”http://photos-b.ak.fbcdn.net/hphotos-ak-snc3/hs112.snc3/15945_221589389972_219559784972_4108922_5398474_n.jpg” height=”200″] [/a] [/center]
        [font size=”4″]           *Bullets in Overdrive*               *Stone Temple Pilots*           *Carly’s Angels*

        • Phew! Well, I think you need to study up on HTML/CSS markup before getting into Static FBML. Your markup is full of deprecated tags — <font>, for example — and you’re not using <p> as containers. My advice would be to study up on CSS/HTML and then try your FBML page. I just don’t have the bandwidth to coach folks on this. Sorry!

    64. thanks. i guess my biggest issue with the static fbml is that everything i google on it says something different – this works but that wont. next site contradicts and says that works but this wont. i’ll keep at it though. I’ve also found sites that say CSS wont work on FB’s fbml so it is abit confusing. I’m determined :)

      • Well, hang in there, Donna. My post is pretty specific on what does & doesn’t work. But your big challenge is in learning how to properly code in HTML. Simple HTML markup works fine with Static FBML. And judging how far you are from understanding how to use CSS, you might (and I shudder to suggest this!) just use tables to layout your page. “Inlining” styles means putting the styles *inside* the HTML markup, as I showed in the example above with the <p> tag (which, btw, should be a *container*: <p>text text</p>). A great read is Jeffrey Zeldman’s Designing with Web Standards (3rd Edition).

        • thanks. ive read. i’ve learned what u meant by depreciated tags. i’ve cleaned it up :) i have background color! (but only when i use ‘blue’ and not the actual color code) and tables are something i have used so will possibly look at using here too. (and i do actually have a blog where i’m trying to learn CSS -but yes thats a ways off yet)

          thank you very much for all the free help – its people like you that make it enjoyable to be online

    65. Oops. I added the image using img src=”imagename.jpg” ) enclosed in .

    66. Hi! I’m having a problem trying to work with the FBML on a fan page… the only placement options I have are Boxes and Tabs. Here is a screenshot below – there isn’t a pencil/edit box that everyone seems to mention and I tried to check all my settings. Actually I had this problem with the Extended Info application as well….

      http://img.photobucket.com/albums/v282/renhuijun/Picture1.png

      I would like to place it on the page wall like the Websites Box for your page. Do you have any advice? I can’t figure this out.

      Also thank you for such a thorough tutorial! I’ll definitely bookmark it for reference.

    67. Okay. I’m going to give this another try …

      I am trying to add use FBML to add a single photo to my fan page. I am using img src code inside of the [p] code as such:
      [p][img src=”http://imagename.jpg”][/p]

      The picture will show up for a little while then it shows as a broken image icon. Not sure what I am doing wrong. =(

      This is a fabulous article and discussion. I’m learning lots here. Thanks so much.

    68. Hello,
      I have added FBML to my fan page.. But I want the same style like you are having in your FB fan page like in (Hyperarts) tab there are many other sub-tabs. like Our portfolio, our servies etc..
      How to add that thing in my fan tab?

    69. I have been unable to get the pencil icon in the boxes tab, therefore, I have been unable to move the static fbml box to the left column of the wall on my wife’s fan page “My Body Joy”. I have no problem doing it on my fan page, “The Growing Practice.”

      Thanks for your help

      • Are you an admin for your wife’s page? Are you allowed to do any editing on her page? You should be able to do this by clicking “Edit page” under the Page’s avatar/logo, then locate the FBML application for her page and click “Application Settings”. If you don’t have these options, then I’d suppose you’re either not logged in or not an admin.

    70. Cyndie King says:

      I am having the same problem that #40 Woody is having. I have the boxes created, but no way to move them to the left column. I am an admin.

      • This may be a Facebook bug. Try these instructions:

        – Open your Fan Page and click Edit Page (located under your logo/picture on the top, left-hand side of the page)

        – Scroll down the list to the FBML box that you just made, click
        Applications Setting, set Box: Added, Tab: Available, click Okay.

        – On the same Edit Page find Links and click Applications Setting, set Box: Added, Tab: Added, click Okay.

        – Go back to your Fan Page.

        – Go to the tabs at the top and click on Boxes.

        – You should now have the FBML box and the Links box (without the pencil icon).

        – Go to the Links box and click the link on the top, left side of the box that is next to Displaying (# Links). This will take you to your Links page.

        – Click Back on your browser (which will take you back to the Boxes page).

        – Your FBML box should now have the pencil icon.

        Let me know how it goes. I found the above here.

    71. Hello. I really like what you did for the “HyperArts” tab of your Facebook page, the one with the subtabs. The tutorial you linked to above in comment #39 is great! You seem to be using a different way to format the tab buttons vs the one in the turorial. May I ask how those tab buttons are fomatted (they blend a lot better with Facebook). Thanks!

    72. I was looking at your fan page and think the extra tab feature is great.

      I’m new to coding – would you be able to provide a rough template to have four tabs in the FBML similar to yours (e.g portfolio, services contact us)

      Essentially what I want to have is

      1. about us
      2. press releases
      3. contact us
      4. newsletter

      Cheers

      Luke

      • I could certain do that, Luke. It is one of the services my company offers. Send an email to iam [at] hyperarts . com to inquire further.

    73. For some reason my fanpage is now showing the box in both the tab and the sidebar. I do not want it to show up in the sidebar ~ just in the tab. I have reviewed the instructions here a couple times and can’t seem to figure out what I”ve done wrong. I don’t want to click something and disappear it forever lol ~ please let me know what I can do.

      • Everything about doing this is in the original post or discussion thread. You go to “Edit Page” (under your top-left avatar/logo), then scroll down to the FBML app instance and click on “Application Settings” and the popup window will show, under the “Profile” tab you’ll see where it’s showing up. So if “Box” indicates “Added (remove)” click to remove it.

    74. Rafeeque MOhamed says:

      Sir,

      Is there any way to play a sound file using FBML or in FaceBook page.

      With Thanks in advance
      rafeeque

      • I’m certain their is a FB app for this. As for using it on an FBML page, have you tried just linking directly to the MP3? Of course, it will have to be online somewhere.

    75. I’ve made a widget on widgetbox.com that works correctly on their site. The full html works correctly on my computer when opened with Firefox and Explorer. But when I insert the html (without the and tags) into Facebook’s FBML app, it doesn’t show anything – except the Title – in its Box. Can you help? Here’s the html – http://www.irclibrary.org/sebastianlibrary/facebookwidget.txt

    76. The comment software deleted my tags in the parentheses. I meant the beginning and ending html and body tags.

    77. Hello! Very nice blog here…Helped me a lot setting up some facebook pages…

      Can you please help me with this? I’ve noticed that your facebook page has a very simple url (facebook.com/hyperarts), but whenever I setup a new page it gives me a lot more complex url…like facebook.com/anything/2123123123…

      How can I have a simple url?

      Thanks in advance!

    78. I added static FBSL to my facebook page and now I am working on adding a graphic to the “Welcome” tab and then embedding a video on top of it. I am not a developer. . . your instructions helped me to add a video (I took it out because it wasn’t mine. . I am working on one. Can I put the video in the graphic?? If so, how? Thanks!!!

    79. I found the app and added to my favorites (it did not state add to my page but it did go to Boxes tab). It does not appear under Edit Page. My question: I am the admin of the Fan Page but DO NOT have a personal FB. Will I need to join, then add myself as an Admin to accomplish this? Seems that you are very limited if you don’t join as a person rather than just the Page.

      • That question is explicitly answered in this post, right at the top under the red “Please Note”! –>

        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.

    80. Excellent stuff! Thanks for all the work!

      OK, I’ve installed Static FBML, successfully linked to an external style sheet, and moved my FBML to my left sidebar. Oddly, the CSS doesn’t seem to load most of the time. If visit the Tab for my Static FBML I see the layout with CSS–and even it’ll be correct when I return to the main page.

      Any suggestions?

    81. Should I have taken out my content within the tags? If so, I can re submit if you delete. Again, thanks for any insight!

      • Yes, please repost without all the content. But I looked at the code you sent. You might use:

        <style type=”text/css”></style> instead of just <style> and there’s a missing quotation mark before the http in the last image on the page.

        You said you used <body> tags but I didn’t see them in the code you provided. Definitely don’t use them in the Static FBML app.

        Other than that, it looks fine.

        • The tag was in the CSS. I tried without and I get all of my information on the page but the CSS does not apply the bg color or font size, type or width.

          I tried your suggestion above about using style type=”text/css”, yet it did not work.

          What tag should I use instead of body in FBML?

          Thank you again for your help and replies. It is good to know there are people out there willing to help.

          • You don’t need a body tag at all because FB supplies that. You might try uploading your styles as a .css stylesheet and then call it per the instructions in this post.

    82. Thanks for your insight and knowledge that you have shared in this and you other blogs. I am new to FBML but am trying to set up a fan page with it for a orthodontic practice my family works with.

      Even though I have read your blogs and purchased FBML Essentials, I am still at a standstill with CSS. I can get it to geenerate in a HTML generator but not in Static FBML. Could you take a look and let me know what I might be missing?

      Any help would be appreciated…

      <style>
      body { background-color:#D0E1F5; color:#000000;
      font-family:, sans-serif;
      font-size:18px; width:500px;
      }
      </style>

      <img src="http:...">

      <p>....</p>

      <p>....</p>

      <p>....</p>
      <center>....</center>
      <center>.....</center>
      <a href=....</center></a>

      <img src="....">

    83. I’m having trouble adding a second FBML tab and then having the content actually show up. I’m trying to add a contact form. I’ve gone through the steps of creating the new tab but when I put in the code for the form (I’ve used by FormSpring and Wufoo) nothing shows up. I successfully had added a form in the first page using Mail Chimp’s code so I don’t know why this isn’t work.

      The other thing I noticed is that even though I keep deleting the tab that doesn’t work, when I go back into FBML and create a new static page tab it automatically names and populates it with the code I was previously using. Not sure if that has anything to do with my issue.

      • I’ve tried doing the same thing, and I’m having the same issue with Wufoo forms. I don’t think this is an issue with how many FBML tabs you’ve used. I’ve heard that FBML doesn’t work with iframes, and I’m actually looking for a work around to get Wufoo to work. Ever find a solution?

    84. Hi…thanks so much for your info…it is right on!

      We are musicians….and I would like my discography info on a tab, as well as my music….got any ideas?

      I’ve heard that FB does this for bands, but in the musician arena, it’s defaulted to the boxes or on the left hand side of the wall.

      Thanks so much!

    85. Hello

      First lots of great info. My question simple, I wanted to add a banner to my fan page using
      Static FBML. Do I need to upload the banner to a photobucket first, then bring the code from photobucket over to my static fbml box?

      I tried pulling the code for the banner from my other websites, but it would not appear.

      thanks

      • Yes, the banner images have to be on a server on the Internet, and Photobucket works fine for this. Remember, it would have to be the *full* URL to the image from your FBML page.

    86. I am using atbles to insert background color in my custom, it is working in firefox, but the background color is not working in IE & Chrome

    87. Hi Tim

      Thanks for writing this blog! I am working on a Fan Page for a Scandinavian eco friendly small business.

      The FBML Fans page seems to open fine at the moment on Internet Explorer, but not on Firefox and Google Chrome (which seems to be the opposite experience of most people here!) With Firefox, there is a white horizontal line between the images; and with Chrome, there is a total of two horizontal lines (between the table rows). I am using this FBML to create a landing page with email subscription opt in form.

      If possible, could you please let me know what may be the problem or if there’s simply a bug in these browsers? I’ve attached my relevant code below:

      [ CODE DELETED BECAUSE IT DIDN’T RENDER PROPERLY ]

      Thanks in advance! Any help is appreciated!

      • Hello. Your code didn’t render properly and thus didn’t provide much helpful info, so I cut it out. But, honestly, I just don’t have time to troubleshoot HTML cross-browser display issues. You should hit one of the many HTML-help forums out there. I always check my FBML pages locally (for the CSS/HTML) and there’s also the Facebook FBML Test Console.

    88. Rokhan Jehangir says:

      Hi

      I have 2 queries if you can help me out with.

      1) I have a fb fan page with a fbml page on it. I have embedded an fb video on that page and would like to include the comment box from the main video below the embedded video. Is that possible.

      I used the fb:comment tags and got a new comment box. I want to include comments from people who comment directly at the main video.

      2) If I cant copy the comment box in part 1, can I make the new comment box look the same as the normal one? Right now the look involves a big “Add a comment” button followed by all the comments below.

      The look I want is the normal comment box in every facebook post.

      Thanks a lot.

    89. I have created the FBML tab and have been able to add pictures. What i want to do is just embed the home page to my smugmug page. I copied the code and pasted it in the FBML tab but nothing shows. Any help would be great. I’, a new at this.

      pistonsup.smugmug.com home page, not just a link. is what i would like to see in my FBML tab. Here is an example of the type of content i would like to be able to render.

      http://www.facebook.com/pages/VICTORY-MOTORCYCLES/125034104954?ref=search&sid=687860529.1891303514..1

      • If you want to embed your home page using an iframe and Static FBML, you’re out of luck. If you want to utilize the same HTML/CSS from your home page in your Facebook fan page, then you just have to make sure you change any relative URLs to pages, images, etc, to absolute URLs (http:// ….). For the CSS, you should use an external style sheet instead of embedding styles in the HTML.

    90. Janet Marlow says:

      I am trying to add FBML in Facebook to my business fan page – I have followed your instructions above and I don’t seem to get the same results. I got to Edit My Page, go to Applications and at the very bottom of the page it says More Applications and lists Static FBML and The Visa Business Network. I click on Static FBML and it takes me to the Static FBML page with the option to Add to My Page’s Favorites (which is different then what you have). I click on that and a box appears that says Add Static FBML to my Page’s Favorites, click Save then okay – it says it has added it to my Favorites. At this point I am still on the Static FBML page (it does not close) and there is no way to easily get back to my page. I manage to get back to my page, click on Edit Page and there is no Static FBML link with edit or a pencil next to it – it shows the same thing as before (More Applications with Static FBML at bottom of page). The only difference I see is that on my page now I have an extra tab called Boxes – when I open it I have the option to move it to my Wall tab, but that only puts a box that says Favorites Pages on my wall with Static FBML within it. I never get access to the application box so that I can enter my code. I’m sure it has something to do with the fact that it is adding the Static FBML page to my Favorites Page and not the application, but that is the only option I see on the whole page. It looks like I am going to their page and not the application. Any help would be greatly appreciated as I am totally confused/lost as to how to add the application to my page. Thank you.

      • Do you have a personal profile page? Under the red “Please Note” it says: “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.” It sounds like you’re not logged in to your personal profile. If you were, you’d see “Add to my page” and when you click this, you’d see a list of the pages for which you’re the admin.

    91. Excellent tutorial.. Thanks alot

      can I have multiple Static FBML tabs in a single fan page?

    92. Glenn :
      Check out some codes for using Iframes, drop down menu, invite friends
      +
      a tutorial on how to integrate an external page on to a tab of your facebook business page.
      http://www.facebook.com/webwhispers?v=app_6009294086
      (become a fan to check it out – ur comments r welcome)

      • Yes, I became a fan to see what you were doing. I just checked some of your features in the dropdown and, alas, they’re broken, not working anymore. It was strange … the iframe dropdown worked the first time but now it doesn’t. I think Facebook’s changes are propagating and these now-deprecated methods are dropping like flies.

    93. I am using the static fbml app to create a tab.
      Is there a way to have multiple tabs using this app?
      Since FB changed the way it handles iFrames, I’m looking for a workaround.
      Thanks,
      Terry

    94. Hi Tim, thanks for sharing this information… it’s one of the most complete (and best explained) tutorials I was able to find.

      I’m not an expert, but I was able to put together a couple of pages using:
      – Link to upload fan photos
      – Clicktoshow / clicktohide
      – Share page with friends
      – Youtube video and Flickr slideshow
      – Fb:name & Fb:profile-pic.

      One of the pages is still a test (I’m waiting till facebook finally changes the page width to 520px) but I’d love your feedback if you want to take a look.
      Also if you have any questions about the code I used, I’ll be glad to help.

      My page is: http://www.facebook.com/hiltoncaribbean. The test page is only visible when clicking on the arrow at the very right of the tabs.

      Thanks!!

      Ruth

      • Very nice, Ruth! I’ll certainly take you up on your offer if I have related questions. Can I get a discount :) ?

    95. Hey there :)
      How can I change or design my facebook page kind of like you did? :http://www.facebook.com/webwhispers?v=app_6009294086#!/webwhispers?v=app_400427955808
       I have heard i can change the intier design of my main page, not only in tabs..

      • We didn’t do the webwhispers page. But if you become a fan of his page you can see how he does what he does.

    96. Hi!

      I’m trying to create some boxes in the left column of my Facebook fan page. I’m referencing an external stylesheet in the FBML, and everything seems correct as a tab. However, as a box, none of the CSS seems to take effect. Is there a workaround for this?

      • I haven’t experimented much with this, Sam. But I will say that I wouldn’t invest too much effort in the boxes in the left column of your fan page. In my post about upcoming Facebook changes, you’ll see that FB sez: “Boxes will no longer appear on Pages or Profiles. This means that Pages will no longer include the Boxes tab, or the Boxes that currently exist on the left-hand column of your Wall/Info tab, underneath your Page’s profile picture. You can move the content that currently exists in Boxes to a custom tab.”

        As for those side boxes, you might try inlining the styles.

    97. alexander says:

      hi. is this code still working after the facebook changes and stuff ?

    98. alexander says:

      Can you post please a 3 step code with iframe facebook fbml ? i really need something like that. or if you don’t want to make it public, can you sent me the code via e-mail ? i’m a really noob on facebook but I promise I will learn. thanks a lot

    99. Hi there, I’ve been pulling my hair out on this as I’ve tried a million things to fix my problem, hoping you might have some insight :)

      I am putting together a FBML tab for my business. I have put everything together locally with an externally called css file. Everything works well on the HTML page. Here is the code.

      [ code deleted ]

      • Tony, the problem is with your reliance on absolute positioning for all the elements. You contain them in a div that is positioned “relative” which is correct. However, absolute positioned elements are taken out of the flow of a document and because your containing div (#bodybox) has no height value, and everything inside it is absolutely positioned, there is nothing to give it height, so it’s invisible. Add a height value to #bodybox and it’ll work. I tested it.

    100. alexander says:

      still no answer to my request :(

    101. I cannot get the static FBML to be edited in my org’s fan page edit section. I can see it under more applications but it will not let me edit it and when i click on the Static FBML app it just takes me to their app page. Please help!

      • You have to add it to your Fan Page first. If it’s added you’ll see it in the list when you click on “Edit page”, under “Applications.” If you’ve added it, but can’t edit it, make sure you’re logged in under your personal profile that is associated with the Fan Page.

    102. I’m having trouble using the external CSS to style my fan page. I’ve made sure I’m only using code from WITHIN the body tags of my .html and I’ve made sure that I can can find my external CSS via the server address. You said that it may take some time for FB to cache the CSS. Could that be my problem, and if so how long should I wait to see results? And should I load the images that I’m looking to use as “background:URL…” to my server or insert them elsewhere?

      Otherwise, here is what I have posted in the Static FBML box (so far):


      <link href:"http://www.buzzlmedia.com/css/fanpages/cm/casmanifest.css" rel="stylesheet" type="text/css" />

      [ Rest of code deleted ]

      Thank you so much!!!

    103. Will: Your stylesheet’s calls to images are NOT full URLs. Remember, Facebook caches your CSS file on *its* servers, so you have to make your image URLs full, eg: src=”http://www.buzzlmedia.com/css/fanpages/cm/assets/CMfanpage2_02.jpg”. Then your images will show up.

    104. I`ve created a facebook landing page using dreamweaver CS4. The problem is that the page it is look ok in IE8 but not ok in firefox. I must mention that the looks ok in both browser before it was transfered in fbml. Please give me any sugestion how can i handle this.

      • Alin, I don’t really have the bandwidth to troubleshoot CSS issues, which is what you seem to be having. I assume you’re calling the stylesheet with the <link> tag? Different browsers and platforms handle styles differently on Static FBML pages, and, if you already haven’t, you should read my post on stylesheets, CSS and browsers.

      • The thorn in the side of designers is that IE6 and IE7 are quite different in how they present CSS. IE8 is pretty similar in functionality to Firefox.

        I recommend laying-out/designing with Dreamweaver as you set width of the FBML page (760px) for example. Then testing and tweaking on all the prominent web browsers (mostly Firefox, IE7 and IE8) will cover 80%+ of people.

        You can tweak and work at developing a clean site via best practices or write IE6 hacks instead, to make it cooperate. I would suggest always using absolute URLs and cross browser testing as habit =) Good Luck!

    105. Hello! I figured it out….thanks.

    106. When I click the “Add to My Page” link, a box opens that says “Add Static FBML to Page”, also “Select which Page you wish to add Static FBML to.” The problem is that it then says:

      “No Results.”

      Why would this be? I have added 3 other static boxes, but can’t see to add any more.

      Thanks for the help.
      Marc

      • You can *add* the Static FBML application ONLY once to a specific fan page. From then on you just create new Static FBML boxes from the same app. How to do this is in this tutorial.

    107. Hallo,

      I have succeeded in creating the tab but my problem now is to keep the tab at the top permanently. i have followed the process indicated but after i refresh my page the tab disapears aganin. please help

    108. I would like to add my website to my Fan Page. I have already created a Tab.. but not sure how to code it so that it appears.
      http://www.facebook.com/pages/Jeannie-Capellan-Photography/110613878646

      My website hosting company does not give us access to to the HTML codes.

      It is a Flash Website with a Splash Page. The Splash page has 3 links WEBSITE / BLOG / client proofing.

      How do I add this. I have tried several ways. I even tried my my Blogspot Blog codes… just copy pasting everything in there but doesn’t work.

      HELLLLLPPPPP !!

    Trackbacks

    1. […] is a list of blogs that have already covered some of the details. HyperArts with some step by step instructions 20bits gives you an introduction to FBML Snipe tells you when FBML is all you need Duct Tape […]

    2. […] Customizing Facebook Pages with “Static FBML” application by HyperArts […]

    3. […] HyperArts.com has a guide on how to implement the Static FBML application. […]

    4. […] detailed in my previous blog post on the Facebook application Static FBML, this Facebook app is a great way to create custom pages with layouts created in CSS/HTML, or by […]

    5. […] Static FBML Facebook Page Application «Design, Coding, SEO and Social Media Marketing, WordPress &#… […]

    6. […] mean something like this : Static FBML Facebook Page Application Design, Coding, SEO and Social Media Marketing, WordPress &amp… […]

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

    8. […] my post on adding the Facebook application Static FBML to your Fan Page, I laid out in detail how to use this very useful app to create very nice page layouts for your […]

    9. […] facebook pages with static FBML. Nice tutorial with step-by-step […]

    10. […] main concept is to build a simple HTML page, with rollovers that are controlled by CSS positioning. For a solid start on creating the actual custom tab for yourself on Facebook please refer to this li…, or start searching on your own for “fbml custom […]

    11. […] kan man jo ikke kalde en FBML tutorial, men kort sagt kan du lave en almindelig dødelig HTML side, så kan du også lave en Facebook […]

    12. […] Stumped again with Facebook Try this link… http://www.hyperarts.com/blog/custom…l-application/ Just go to google and enter –> FBML. There is several explanations there. However, one must […]

    13. […] HyperArts – A short tutorial on customizing Facebook pages with the static FBML application. […]

    14. […] Tutorial: Customize Facebook Pages with “Static FBML” application […]

    15. […] refer to my tutorial on adding Static FBML to your Facebook Fan Page. This tutorial shows you how to add a Flickr slideshow, created from one of your “Sets” […]

    16. […] my earlier post on embedding Flash or YouTube videos on your Static FBML page, I described how Facebook’s Static FBML application supports the embedding of Flash objects, including YouTube […]

    17. […] Adding FBML to a Fan Page is fairly simple: Search for FBML from the Facebook search bar, and then click “Add to my page” in the upper left corner. This adds another tab to your page with the FBML application, which can then be edited as desired. A full tutorial can be found at Hyper Arts: Tutorial: Customize Facebook Pages with “Static FBML” application. […]

    18. […] Adding FBML to a Fan Page is fairly simple: Search for FBML from the Facebook search bar, and then click “Add to my page” in the upper left corner. This adds another tab to your page with the FBML application, which can then be edited as desired. A full tutorial can be found at Hyper Arts: Tutorial: Customize Facebook Pages with “Static FBML” application. […]

    19. […] **EDIT** Tim has kindly posted below tha Facebookis planning to reduce the available screen real estate for these tabs from 760px to 520px. Check out this post over at tutorial for Static FBML, […]

    20. […] If you’re already using an HTML editor like Dreamweaver, you can design your page with it and then drop the HTML code into the FBML application. You might have to tweak it a bit for Facebook’s size and display restrictions, which is why I have my designer do it for me. Learning how to manipulate HTML and CSS in FBML can be a little tricky, but you can check out a helpful tutorial on using it at HyperArts. […]

    21. […] a Static FBML tab that explains the change from current page to a new one, asking fans to go there […]

    22. […] Tutorial: Customize Facebook Pages with “Static FBML” Application […]

    23. […] 2. Once you have a Google Form you will need to setup a tab in Facebook to allow you to paste HTML code into it. Here is a good tutorial to set that up. Adding a Static FBML tab to your Fan Page […]

    24. […] Pages before you do them.  It will pay off for you later. Here’s a tutorial on boosting your Facebook Fan Pages’ visibility here, thank me later! Take a look at a few of the Facebook Fan Pages I’ve created: Wine LoversAll […]

    25. […] Customize Facebook Pages with “Static FBML” application […]

    26. […] Add the FBML application to your Facebook page. FBML is Facebook’s coding language and the application allows you to create new, customisable tabs on your fan page. You’ll probably want to call your new tab “Video” or “YouTube”. […]

    27. […] Read more information about Facebook Fan Pages. […]

    28. […] folks over at HyperArts offer several really good posts on customizing Facebook Pages with FBML and embedding YouTube/Flash in […]

    29. […] app (also make sure it’s the first thing fans see when they click on your page) Check out the Hyperarts Website that gives lots of great tips & tutorials on how to implement the FMBL […]

    30. […] Design a code up an HTML page (safest bet is inline styling), but more tips about coding here. […]

    31. […] like games, you are sure to find something to help you sell. To customize your site, add the Static FBML (Facebook Markup Language) […]

    32. […] out our popular Static FBML Tutorial and, if you don’t see a solution here or you want more detailed information, check out our […]

    33. […] is an application called FBML that allows you to customize your Facebook Page so that you can add a landing page that people see […]

    34. […] via FBML – Facebook’s own version of HTML I guess. There’s a great tutorial here – this is what I followed to get started with this application. It will help to know some […]

    35. […] widget, a standard Facebook app, to create a custom tab for your profile or company page. See: Tutorial: Customize Facebook Pages with “Static FBML” application. This can be a pretty easy way of adding some additional images or styling to a tab on your Facebook […]

    36. […] you are using a Box tab then you should really convert that into one Static FBML tab and encompass all the boxes information into one tab. Watch for the width in your design as the […]

    37. […] Tutorial: Customize Facebook Pages with “Static FBML” application […]

    38. […] Make a Facebook Page (not to be confused with a profile) for your company. Use the FBML Facebook App to create a landing/welcome page that captures leads. Use Involver to connect your blog feed (not […]

    39. […] sure what all this static FBML business is? Here’s a great introductory tutorial and video from super helpful website […]

    40. […] Make sure that you have a customized landing page where you allow individuals to leave their email address and opt-in to your newsletter or regular email updates. You can offer a free report or other enticement to encourage them to do so, but the goal is to have them give you their email which basically says, “contact me.”  If you’re a DIY’er (Do It Yourself), check out this page with instructions for customizing your Facebook page. […]

    41. […] Make sure that you have a customized landing page where you allow individuals to leave their email address and opt-in to your newsletter or regular email updates. You can offer a free report or other enticement to encourage them to do so, but the goal is to have them give you their email which basically says, “contact me.” If you’re a DIY’er (Do It Yourself), check out this page with instructions for customizing your Facebook page. […]

    42. […] your own app! You can just use an excisting FBML Application, that lets you use simple HTML too! – http://www.hyperarts.com/blog/tutorial-facebook-pages-with-static-fbml-application/ – How to show/hide content to “fans” (people who likes your shit): […]

    43. […] Facebook Fan Page Make a Facebook fan page. Again you can showcase your brand, use all the same logos and pictures you used on your website. In my experience making a fan page on Facebook is a pain in the ass, but it is just one of those things that needs to be done. If you want to learn how to make a fan page or just want to buy a template check out these fools they have a lot of great information HyperArts […]