In the course of posting so many Static FBML tutorials on our blog, and then responding to visitors’ questions in the comments, I now have a good idea of what are the most common problems people encounter when either adding Static FBML to their Fan Page or trying to get the tab to look and function as they wish. So I’ve put together this list of common questions and my answers.
NOTE: Check out our popular Static FBML Tutorial and, if you don’t see a solution here or you want more detailed information, check out our Static FBML FAQ which also has links to all our Static FBML tutorials.
NOTE: When I refer to “FBML box” I mean the box/field where you put your CSS/HTML/FBML content:
The Most Frequent Problems with Static FBML … and the Solutions
- I can’t add the Static FBML application to my Facebook profile, group or fan page.
Static FBML can only be added to Facebook Fan Pages (aka Public Profiles, aka Business Pages). You cannot add the Static FBML application to a personal profile or Group.
A Fan Page administrator must be logged in to their personal profile in Facebook in order to add Static FBML to the Fan Page for which they are an admin (a Fan Page can have multiple admins). In order to add applications to your Fan Page, you MUST have a personal profile associated with the Page and be logged in as that user.; the Admin can add applications when logged in.
You need to edit the application’s settings to include it as a tab:
Click “Edit Page” and under “Applications” scroll down to locate the tab you have created. Click “Application settings” and, in the popup window, make sure that next to “Tab:” it says “Remove” (this means it’s been added as a tab and the option is then to remove it from your tabs). If it says “Add” then click to add it.
Facebook allows a maximum of 6 tabs on Pages. You can re-order the tabs to display your preferred 4 tabs (the Wall and Info tabs can’t be moved or removed), but a total of 6 is all you are allowed.
When code you’ve put into your FBML box isn’t displaying properly (or not at all), it usually has to do with one of the following:
- The text you pasted in includes “formatted” quotes or other non-ASCII characters: If you’ve copied code from this blog (or wherever) and pasted it into your FBML box, you must make sure that the text is in plain-text format, NOT rich text. This is especially crucial with quotation marks; if they’re angled or curly or anything other than straight up and down, they’re not plain text.The best way to edit your code is in a plain-text editor like Notepad on PCs and Text Edit on Macs — NOT Microsoft Word!
- Your URLs are incorrect: Make sure that the URLs to your images, external stylesheet, Flash, video, whatever, are correct. You can test a URL by copying and pasting it into your browser’s address bar at the top of your browser screen, then hitting the Return key to access the URL directly. If your URL is correct, this will result in the content (video, image, SWF, photo gallery, slideshow, CSS) rendering in your browser. If you get a “file not found” error or the file does not otherwise display, then your URL is probably incorrect.
- You didn’t change the example values in the sample code: Make sure you replace my (or anyone else’s) placeholders in their sample code with the actual values (URLs, file and directory names, etc.) for the files you’re pointing to.Also, when embedding media such as Flash (video, slideshows & galleries), make sure you modify the dimensions in the FBML tag to be the actual dimensions of your media.
- You included HTML tags that should not be included: With the exception of the call to an external stylesheet using the <link> tag (which should be the first code in the FBML box), include ONLY the HTML/CSS that would go between the <body> and </body> tags; DO NOT INCLUDE <html>, <body>, <head> or meta tags. Facebook provides these tags when it renders your Page.
When using the fb:visible-to-connection FBML tag, which allows you to have Page content that only fans can see, REMEMBER: if you’re an administrator of the Page, you will see the content for both fans and non-fans when viewing the tab while logged in.
When working with this FBML tag, the best way to test it is to set up a test-user account and log in to that account to view the tab and experiment with liking/unliking the tab.
Unfortunately, you can’t auto-run JavaScript or Flash in an FBML tab — a user action is required to trigger it, usually a click. This is why the FBML tags for embedding media — eg Flash (fb:swf), Flash video (fb:flv) — requires an “activation” image the user must click to load the video or Flash file.
Try adding “&autoplay=1″ to the URL of your SWF (Flash) file (.swf is the format of many YouTube videos, or all Flash objects except Flash Video) will cause the file to start playing when it loads. (If it doesn’t, it may mean that the file itself is “hard-coded” to not autoplay):
You should make sure the URLs to the XML files are full/absolute URLs (that they include the “http://”). Facebook doesn’t play the Flash file that’s on your server. Instead, it makes a copy of it which is stored on a Facebook server and it serves that. So any URLs to XML files need to be absolute in order to work.
First, remember that Facebook requires a user action (usually a click) to trigger any JavaScript. So you can’t have JavaScript run when the tab loads without that user action.
Also, Facebook has its own proprietary flavor of JavaScript — FBJS (Facebook JavaScript) — and you should become familiar with this and use it in your Static FBML. If you’re already comfortable with JavaScript, FBJS should be very easy for your adapt to.
Facebook does not render the images and stylesheet you call in your code. Instead, it makes a “proxy” (a copy) and stores that on its own servers.
In order to force Facebook to refresh its stored (cached) version of your stylesheet, you need to append “?v=10.0″ to the end of the stylesheet URL:
<link rel="stylesheet" type="text/css" href="http://URL-TO-YOUR-STYLESHEET/stylesheet.css?v=10.0" />
Each time you update your stylesheet, you must increment that number and then re-save your Static FBML tab. Thus, 10.0, then 10.1 … 10.9, 11.0 …..
Facebook does not allow iFrames within Static FBML tabs. You can use iFrames in a canvas application, and even then it requires a user action to actually load it. I’ve seen one hack that facilitates iFrames in Static FBML, but I wouldn’t recommend using it as Facebook will likely soon catch on and it’ll be disabled.
Facebook allows you to set a custom tab as the default landing page for non-fans. However, the default tab for fans is the Wall, and this can’t be changed.
Facebook no longer allows animated GIFs on Static FBML application tabs or canvas applications.
Internet Explorer, particularly the old-and-in-the-way Internet Explorer 6, are very “buggy” in interpreting CSS. But other browsers have their quirks, as well. Here is a good place to start when debugging your CSS.
article from: http://www.hyperarts.com/blog/facebook-static-fbml-problems-solutions/#ixzz0xV2mQxbk
Related posts: