Contact Us
  • Comprehensive Static FBML Troubleshooting Guide – Why You Can't Add the App or Why Your Code Isn't Working

    If you’re not on the HyperArts Blog, Click here!

    Static FBMLNow that I’ve answered a gazillion comments to help people with using FBML tags with their Static FBML Custom Tabs, I’ve decided to create a troubleshooting guide that answers ALL the questions.

    If you CAREFULLY go through this article you should find the solution to whatever issue you’re having. If you can’t, I’m not sure I can help.

    And, BTW, Static FBML should be supported for quite some time, perhaps years. Read Expert Speculation on the Future of Static FBML »

    TROUBLESHOOTING Problems Adding the Static FBML Application to your Fan Page

    Adding the Static FBML Application:

    • First, while logged in to Facebook, go to the Facebook Static FBML Application Page. You should see:

      Static FBML Add to my Page

    • If you don’t see the “Add to my Page” link:
      • Make sure you are logged in to the Facebook account that is an admin of the Page. You might want to read:

        Why do I need a Personal Profile to create/edit a Page?

      • Make sure you haven’t already added the Static FBML application. You can only add it once, and you can create up to 10 different custom tabs using the application.
      • Make sure you haven’t accidentally blocked the Static FBML application.
        • Click the “Account” link in the top right corner;
        • Select “Privacy Settings”;
        • At the bottom, under “Block lists,” click “Edit your lists” and make sure Static FBML isn’t a blocked application. If it is, unblock it!
      • You CAN’T add Static FBML a Group or Personal Profile, ONLY to a Page;
    • Click “Add to my Page“;
    • In the popup dialog box, click the “Add to Page” button to the right of the Page to which you want to add the application;
    • Go to your Page, and click “Edit Page” (below your avatar/logo);
    • Click “Applications” in the left navigation;
    • Under the list of applications, you should see “FBML 1” — Click “Go to Application.” From here you can start editing to create your first Static FBML Custom Tab:

      FBML Instance

    Working with Your Static FBML Tab

    Now that you’ve successfully added the Static FBML application to your Page, you can begin creating custom Static FBML tabs.

    • The “Box Title” will be the name of the tab as it appears in your Page tabs;
    • If you’re using CSS styles, enter your link to an external stylesheet (Required for the Internet Explorer browser), your HTML and your FBML in the “FBML” box:

      FBML External CSS with Link Tag

      IMPORTANT: DO NOT use an IP address (ex: 72.47.217.181) for the external URL to your stylesheet! Facebook seems to demand a domain name (ex: www.hyperarts.com).

    • To create additional custom tabs, click “Add another FBML box” that is after the FBML box in the editing screen of any tab you’ve created. You can have a MAXIMUM of 10 custom tabs. When you’ve created 10, you’ll no longer see the “Add another FBML box” link:
      Add FBML Custom Tab
    • NOTE: You can have a maximum of 6 tabs visible on your Page, and Facebook reserves the “Wall” and “Info” tabs — which can’t be moved or removed!

      Additional tabs will appear under the “>>” in the navigation. You can select them and then drag them to where you want them to appear in your navigation AFTER “Wall” and “Info”.

    • To link to tabs that aren’t visible in the top navigation: Go to “Edit Page” and under “Applications” you’ll see your Static FBML tabs listed. Click “Link to this tab” to get the URL for the tab.
    • You CAN’T HIDE tabs using the fb:visible-to-connection FBML. You CAN hide content on a tab, of course.

    TROUBLESHOOTING Why Your FBML Code Isn’t Working

    • NO <html>, <head> or <body> Tags! Your FBML box should have ONLY a link to your external stylesheet, if you’re using one, and what goes BETWEEN the <body> … </body> tags.
    • All URLs must be absolute. Use ONLY FULL URLs when linking to anything unless it’s using an anchor link (#my-anchor) to link to another section of your tab.
    • Check your URLs: Make sure the URLs to all files are correct. This includes both images for the activation image (imgsrc) for fb:swf and fb:flv, and links to videos and galleries on YouTube, Vimeo, Photobucket, Flickr, etc.. Test a URL by pasting it into your browser’s address bar. Example:

      Browser Address Bar

      and accessing the image, slideshow, gallery or video directly (a YouTube video in the above example). If you can’t access them via this method, your URL is incorrect.

    • URLs are case sensitive: All directory and file names after the domain name are case sensitive. One misplaced capital and it won’t work!
    • Avoid using IP addresses in URLS:

      USE:

      http://www.my-domain.com/my-file.css

      NOT:

      http://72.47.217.181/my-file.css

      In the above example, I use “.html”, but the same applies for any file referenced in your Static FBML box.

    • Make Sure You CLOSE Your Tags Some FBML tags, such as fb:swf, contain all their parameters inside the tag. Make sure you have closed this type of FBML tag with “/>” (without the quotes). If the tag isn’t closed, it won’t work. Example:

      <fb:swf
      swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
      swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
      imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />

      Other FBML tags contain their parameters — and sometimes other FBML tags — between an opening tag and a closing tag, such as fb:visible-to-connection. Example:

      <fb:visible-to-connection>
      Fans will see this content.
      <fb:else>Non-fans will see this content.</fb:else>
      </fb:visible-to-connection>

    • Make sure quotes match and are closed: It doesn’t matter if they’re single (‘) or double (“), but they must match and they must be closed (width=’xxx’ or width=”xxx” – NOT width=’xxx or width=”xxx or width=”xxx’ ).
    • NO curly or fancy quotes! You MUST use plain-text, straight-up-and-down quote marks or your code WON’T work! If you copy and paste code, make sure your single or double quotes appear straight up and down and not angled. Example:

      THIS:

      imgsrc="URL-TO-IMAGE"

      NOT THIS:

      imgsrc=”URL-TO-IMAGE”

      Notice in the “NOT” example that the quotes are slightly angled. This will cause your code not to work.

    • When using the fb:swf or fb:flv tag, make sure the “imgsrc” URL points to an image, NOT to a page with an image! One of the most common errors when trying to point to an image on an image-hosting service like Flickr or Photobucket is not getting the URL to the image itself. When on the page for your image at the hosting service, you should see a link to “Share this image” or something similar. That’s where you can get the URL.
    • Getting rid of the 1-pixel gap between images in the Firefox browser: Add this CSS to each image tag (or create a class in your stylesheet and add it to each image):

      <img src="URL" style="display:block" />

      Or to create a class, add this to your stylesheet:

      .nospace { display:block }

      Then add that class to each <img /> tag:

      <img src="URL" class="nospace" />

    Comments are now closed here but, honestly, if your FBML tag isn’t working and the solution isn’t in this article, I probably can’t help you. MAKE SURE YOU CHECK YOU CODING CAREFULLY! Cheers!

    HyperArts Static FBML Tutorials

    Comments

    1. I am new to FBML and CSS and I am trying to get this page looking decent and then add content. The problem I am having is that my background image won’t display behind everything else. I also wanted to make the background image a little transparent so that the text can be easily read. Can anyone tell me what is wrong? Here is my code:


      <link rel="stylesheet" type="text/css" href="http://sites.google.com/site/epicchurchtv/facebook/style.css" />
      <!--start wrapper-->
      <div class="wrapper">
      <!--start content-->

      <div class="content">
      <!--start header image-->
      <center><img src="http://sites.google.com/site/epicchurchtv/facebook/INXS_WEEK_3.bmp" ></center>
      <!-- end header image-->
      <h2>Title Here </h2>

      <p>Text here </p>

      <br />

      <p>text here </p>

      <h1> H1 title tags</h1>
      <h2> H2 title tags</h2>
      <h3> H3 title tags</h3>
      <!--start social media icon-->
      <div class="socialMedia">
      <a href="http://www.twitter.com/epicindecatur">
      <img src="http://sites.google.com/site/epicchurchtv/facebook/twitter.png" alt="Twitter"

      border="0" width="48px">
      </a>
      <a href="http://www.youtube.com/user/epicchurchtv">
      <img src="http://sites.google.com/site/epicchurchtv/facebook/youtube.png" alt="Youtube"

      border="0" width="48px">
      </a>
      <a href="http://www.epicchurch.tv/feedmanager/feed.xml">
      <img src="http://sites.google.com/site/epicchurchtv/facebook/feed.png" alt="Blog"

      border="0" width="48px">
      </a>
      </div>
      <!--end social media icon-->
      <!--start footer-->
      <div class="footer">
      </div>
      <!--end footer-->
      </div>
      <!--end content-->
      </div>
      <!--end home tab content-->

      Thanks!

    2. Vladimir Koller says:

      I have an question that is not covered here and would be happy to get an answer. Is it possible to add an Likebox to custom FBML page. The Iframe version doesn´t obviously work, but when I tried to add the FBML version, it didn´t work either. I´m not very profficient in FBML and rely mainly on HTML and CSS. Is there some quick solution to this or does require some more programming?

      With best regards.

    3. I’ve used a fb:multi-friend-selector code which works perfectly in Firefox but not in IE, or Chrome or SeaMonkey for that matter. It doesn’t show the images of friends to invite. I’ve exhausted every other online resource. Can you please help?

      • Sorry, I forgot to wrap the code properly 🙂
        Here it is again:

        <fb:request-form method="post" action="http://www.facebook.com/pages/Mudgee-Australia/The-Property-Shop-Mudgee/133464137781" type="The Property Shop Give-aways" invite="true" content="Check out the latest FREEBIES from The Property Shop on Facebook!"> <fb:req-choice url='Check out the latest FREEBIES from The Property Shop Mudgee on Facebook!' label='GO' />

        <fb:multi-friend-selector actiontext="Tell your Friends About The Property Shop's latest give-aways" rows="3" cols="3" showborder="true" condensed="false" />
        </fb:request-form>

        • Not sure what the issue is, Lynn. IE is a world all its own. Facebook generates the code and sometimes IE gets it and sometimes not. Sorry 🙁

    4. *sigh* that’s what I thought. What’s odd is that doesn’t work in Chrome either. Considering this code is one that I assume would be widely used, how can we let FB know that IE doesn’t like it; with IE being approx a third of the browser market (unfortunately)

      • Wow. I’m almost to embarrassed to admit it but when you only use Firefox, you’re most likely not to be automatically logged into your Facebook account on any other browser. And when you’re not logged in, you won’t see any friends to select. DOH!

    5. I have a question about anchor links, mentioned here. My problem is I can only get them to work one time.

      The name field stays correct on the link I’m jumping to, but the actual anchor link changes to;

      http://www.facebook.com/randompage?v=app_7146470109#anc

      This makes sense, because it puts the facebook page and tab first, but why will it only work one time?

      Any Ideas?

    6. Anyone else having trouble editing existing FBML tabs? It used to work fine for me, and now all of a sudden I don’t have the option of editing the content any more. I’m “stuck” with what I already have up there. *stumped*

      • No problems on this end, Michael. Make sure you’re not on an application tab when clicking the “Edit Page” link. You need to be on one of your custom Static FBML tabs.

    7. First of all your blog is such an amazing resource for Static FBML developers. Thank you.
      Can someone please help me with the below question.

      Project: Form on a Static FBML page that captures UID and eventually use the UID to display the fan’s profile pic on the static fbml page.

      How do you grab the UID on a form in StaticFBML?

      Someone mentioned
      “In order to capture user data from a tab, you need to pass an “Allow Access” screen asking for basic info.

      In order to do this from an FBJS AJAX call, simply add requireLogin=true to the AJAX object.

      E.g.:

      function form_submit(form) {
      var ajax = new Ajax();
      ajax.responseType = Ajax.FBML;
      ajax.requireLogin = true;
      ajax.ondone = function(data) { ... }
      ajax.onerror = function(data) { ... }
      ajax.post(form.getAction(), form.serialize());
      }

      But I’m not sure how this works? I was under the impression that StaticFBML can not access UID.

      • According to the docs, setting ajax.requireLogin = true; should
        display the authorization popup, and then the UID should be passed to the script that is processing the AJAX data. The resulting UID could then be passed back into FBML using the ajax.ondone function.

        The problem is that it doesn’t appear to actually work. My programmer found lots of posts online where people tried this and it failed, so we’d consider it not supported at this point.

    8. Having the same problem that Ben is having. My anchor links work only once. Any ideas on how to fix this would be greatly appreciated

    9. In regard to the invite your friend FBML tag, I cannot get it to work!

      My issue is either that after clicking send I get a ‘Sorry, your request could not be processed. Please try again.’ message, or, if it does send, when the user clicks the invitation to go to the application it says that the request is ignored.

      I’ve used the following code… Please help!

      • Well, I can’t see your code, Tim, because you didn’t wrap it in <code> … </code> tags. But this feature does still work. The person to whom you send the invite will find it by clicking on the “Home” link at the top right of their profile page, then it’s in the right column, under “Requests” and has the flag icon and “Page suggestion”.

    10. Kiran Shah says:

      Hi there, thanks for al this information. I have managed to get the FBML to work but it loads very slow nearly 5/6 seconds. Is there anything I can do to either make it faster or have the facebook loading screen before it loads?

      The link is:

      http://www.facebook.com/pages/One-Cause/118407394874?v=app_6009294086

      Thanks in advance.

    11. Hey I appreciate all the info on your site. It seems to be the best one out there that covers FBML.

      So my question is:

      Can I change the static FBML icon at all? It is a minor thing but it would be nice to be consistent with branding to have the small icon be my logo and not the [ ] Icon.

      I see that coca-cola has custom ones and was wondering if those are applications they made and not the Static FBML app.

      thanks!

      • Where do you see the Static FBML icon? I believe the only place a user can see it on your page is under the “>>” navigation. If you want to change the “< ->” to something else, you can’t do that. On the Coca Cola fan page, all the red icons you see under the “>>” are canvas app icons, not Static FBML. I don’t think Coke uses any Static FBML tabs on their fan page.

    12. I clicked on the static fbml app to add it and now my sidebar is completely gone on my business page. confused… any help?

    13. Great Blog.
      This is the best code I have been able to find so far for FBML friend invite in terms of layout on the page, however still having a few issues.
      1) Invite comes from ‘Static FBML’ not from my page
      2) When I hot send I’m getting the following error ‘Sorry, your request could not be processed’.
      3) When the recepient recieves the invite and selects ‘go to application’ they are not directed to the application instead they are notified that they have hidden the request.

      the code I used is
      <fb:request-form method="post" action="http://www.facebook.com/pages/Multiple-Sclerosis-Society-Hawkes-Bay/165304586843775" type="Hawkes Bay Multiple Sclerosis Society" invite="true" content="Check out Hawkes Bay Multiple sclerosis society on Facebook!"> <fb:req-choice url='Check out Hawkes Bay Multiple sclerosis society on Facebook!' label='GO' />

      <fb:multi-friend-selector actiontext="Tell your Friends About Hawkes Bay Multiple sclerosis society on Facebook!" rows="3" cols="3" showborder="true" condensed="false" />
      </fb:request-form>

      • You can’t change the “Sent by Static FBML” to anything else. It’s hardwired into the API.

        Your fb:req-choice tag should have a full URL for the value of “url”, not text!

        That’s why you’re having problems #2 and #3.

        • Khalid Amin says:

          Hi I also have same problem:

          <fb:request-form method="post" action="http://www.facebook.com/hangucity" type="Hangu City" invite="true" content="Join Hangu City Fan Page"> <fb:req-choice url='https://www.facebook.com/hangucity' label='GO' /> ">
          <fb:multi-friend-selector actiontext="Welcome to Hangu City Fan Page" rows="3" cols="3" showborder="true" condensed="false" />
          </fb:request-form>

          • @Josh and @Khalid:

            The “content” parameter for fb:request-form needs to have the fb:req-choice *nested* in it, like this:

            content=”Join the Hangu City Fan Page<fb:req-choice url=’http://…..’ label=’GO’ />”>

            @Khalid is pretty close, but needs to remove the “> before <fb:req-choice.

    14. Awesome code and very helpful website. The code helped us gain an extensive amount of fans in short period of time. I wanted to use an external javascript file to use within the code. Do you know if Facebook allows us to do so? The code is just a simple javascript countdown clock code. The code follows:

      <link ref="stylesheet" type="text/css" href="http://www.nba.com/bobcats/css/bobcats_facebook_form.css" />
      <script type="text/javascript" src="http://www.nba.com/bobcats/js/countdown.js" defer="defer"></script>
      <div id="wrapper">
      <fb:visible-to-connection>

      Time is running out.<br />You have only<br /><br /><span id="countdown1"><strong>2011-01-07 14:30:00 GMT-05:00</strong></span><br /><br />
      until we draw the winner.

      <fb:else>
      <div id="non-fans">

      Time is running out.<br />You have only<br /><br /><span id="countdown1"><strong>2011-01-07 14:30:00 GMT-05:00</strong></span><br /><br />
      until we draw the winner.

      </div>
      </fb:else>
      </fb:visible-to-connection>
      </div>

      • Try it out. You can’t have JS autorun, and you have to use FBJS (Facebook’s flavor of JavaScript) for Static FBML. But if the script is activated by a user action, it should work assuming all else is correct.

    15. Hi Tim,

      I just wanted to say thank you for posting all this information for use by the general public. I just found a solution here to an issue I was having, that no doubt would have taken me many more hours to resolve if you had not posted it here in your Troubleshooting Guide.

      With much appreciation for your generosity,
      Miriam

    16. I need a simple code to do an expand collapse in my fan page using the Static FBML.

      Example: http://www.facebook.com/CharlesSchwab
      At Careers.

      Can you help me?

      thanks!

      • Hi João, They do that using the clicktoshow / clicktohide FBML tags. There’s no official Facebook documentation, but that is one of the FBML tags that we provide code + tutorial for in our Static FBML Bible eBook.

        • Tim,

          I found the code.
          I just need a little help to fix it.
          The logic of the code makes that when you open a tab, it closes the other.
          My question is: How can i fix the clicktohide to really hide a tab and not open another?

          thanks.

    17. Tim,

      I found the code.
      I just need a little help to fix it.
      The logic of the code makes that when you open a tab, it closes the other.
      My question is: How can i fix the clicktohide to really hide a tab and not open another?

      Look:

      <p><a href="#" clicktoshow="nav1" clicktohide="nav2,nav3">Link 1</a></p>

      <p><a href="#" clicktoshow="nav2" clicktohide="nav1,nav3">Link 2</a></p>

      <p><a href="#" clicktoshow="nav3" clicktohide="nav1,nav2">Link 3</a></p>

      <div id="nav1">
      <li>Função1:</li>
      <li>Requisito:</li>
      <li>Validade:</li>
      <li>Estado:</li>
      </div>

      <div id="nav2">
      <li>Função2:</li>
      <li>Requisito:</li>
      <li>Validade:</li>
      <li>Estado:</li>
      </div>

      <div id="nav3">
      <li>Função3:</li>
      <li>Requisito:</li>
      <li>Validade:</li>
      <li>Estado:</li>
      </div>

      thanks.

    18. Ok got the code, got it installed on my test page (i.e. me) and I can get the logo to show up but it got a “Your Logo” above it Has to be something simple but hell if I can find it

      Got video to work, Still have to record video but thats what I do

      Got Ajax to work

      Got Twitter / Youtube button working but it took some doing! your code said twitter_24 and the logo (in _social were twitter_48)

      • Matt, Did you get the Package #1 Premium? If so, just delete the “Your Logo Here” text. I’ve updated that template to slightly change how the logo graphic is handled. Send an email to tim at hyperarts dot com, and I’ll send you a replacement, if you’re interested.

    19. I got it working all except the reveal page (I checking it out on my sons facebook page and it (on his computer) and it not working (ie8 or Chrome) I mean the only code is the <img src="

      I replaced the path and I can copy and paste the path and I get the image

      ?

    20. I am having trouble with this code showing up on the non-fan page. The proper graphic shows up on the actual fan page, but this code – #wrapper { width:400px; height:600px; margin:0 auto; border:0; padding:0; position:relative; } #not-fans { width:400px; position:absolute; top:0; left:0; height:600px; } is the only thing that shows up on the non-fan page. Can you help?

      #wrapper {
      width:400px;
      height:600px;
      margin:0 auto; border:0; padding:0;
      position:relative;
      }
      #not-fans {
      width:400px;
      position:absolute; top:0; left:0;
      height:600px;
      }

      <img src="http://i55.tinypic.com/o6ma8l.jpg&quot; width="400" height="600" border="0" alt=""

      <img src="http://i55.tinypic.com/o6ma8l.jpg&quot; width="400" height="600" border="0" alt=""

      • If the styles are showing up for non-fans then you probably haven’t wrapped them in <style> … </style> tags. But those are the CSS styles to force the non-fan content to the top of the tab instead of being pushed down by the fan-only content.

        Also, if you want those styles to work for Internet Explorer you’ll need to have them in a separate stylesheet called with the <link /> tag.

        I suspect you’re not a very experienced coder?

    21. You would guess right. I’m limping along here 😉

      I am simply trying to put one graphic at the top and another one right below it on the non-fan site and then the same exact thing except on the fan site the graphic at the bottom needs to be linked to an outside website. Can you help me?

    Trackbacks

    1. […] NEW: HyperArts Comprehensive Static FBML Guide — Adding, Testing & Troubleshooting! […]

    2. […] You might also check my recent article: Comprehensive Guide to Static FBML – Adding the Application, Testing, and Troubleshooting. […]