Facebook FBML Wiki: http://developers.facebook.com/docs/reference/fbml/
1. Add the Static FBML App
The app you need for your custom page is called “Static FBML,” located here. If you’re logged into Facebook, you can add it to your Page. It is essentially a blank canvas where you can add whatever content you want, including custom graphics and links via standard HTML.
2. Set Up Your Tab
The app can function in two ways: As a set of boxes, or as one dedicated profile tab. If you’re building a splash page, you’ll probably want to use it as a tab, so go ahead and make sure that the “Box” setting is removed, and the “Tab” setting is added. You can always experiment with boxes later if you find them more useful.
3. Add Your Content
“Box Title” will be the name of your tab, so you’ll want to change it to something appropriate, like “This Week’s Deals,” “Special Offers,” or simply “Welcome,” depending on how you plan to use your Page.
The main text field is where your content goes, and you can add standard HTML to the page as you would any website, including images, text, links, and other formatting. No need for HTML, BODY, or HEAD tags.
Note that your images must be hosted elsewhere (on your company’s website, for example) and only referenced in your HTML code.
If you want to show content to your fans, and require that a visitor to your Fan Page become a fan in order to view the content, here's a nice bit of FBML to render content on your Facebook Fan Page only to fans. Easy as pie....
NOTE: It is easy to get confused about whether or not this working when you're testing. Remember, if you're an admin of the Fan Page you're using this FBML in, and you're logged in, you will see the content whether or not you're actually a fan of the Page. People get confused about this and think the tags aren't working.
ALSO NOTE: If you follow the below instructions and it's not working, try removing the <fb:fbml version="1.1"> </fb:fbml> tags. I don't believe this is necessary now.
FINALLY: If you want to copy and paste my code, MAKE SURE you convert all quotes to plain-text (straight up and down) quotes! Otherwise, your code will not work!
Content for Fans Only - Reveal TabsFirst, on your Static FBML page, begin with the following:
Wrap the content you want to hide from non-fans within these tags:
Then end your page with:
And that's it! The content contained between <fb:visible-to-connection> and </fb:visible-to-connection> will be visible to fans only.
How to Show Different Content to Fans and non-Fans - Reveal Tab
Fans will see this content.
<fb:else>Non-fans will see this content.</fb:else>
Removing the Space above the Non-Fan ContentOriginally, I had proposed using negative margins to make sure the non-fan content isn't pushed down the page by the invisible fans-only content. (Facebook hides the fans-only content using the "visibility: hidden" CSS which hides the content but reserves the space it would take were it visible.)
However, an alternate and perhaps easier method to remove the fans-only content space is to use "position: absolute" CSS which takes the non-fan content out of the document flow (See this article on using the CSS position element) and positions it relative to its containing element (usually a DIV).
In the following example, I have given the containing DIV the ID "wrapper" and used CSS to style it "position: relative". Then the non-fans content is in the DIV with the ID "non-fans" and is "position: absolute" and is set to be flush against the left and top margins of the "wrapper" DIV:
The code in the FBML box:
<div id="non-fans">CONTENT FOR NON-FANS</div>
When using the "position:absolute" in CSS the crucial thing to remember is that the element you're positioning absolute will be positioned RELATIVE to the element in which it's contained.
margin:0 auto; border:0; padding:0;
position:absolute; top:0; left:0;
TroubleshootingIf you aren't having success implementing this code, it is most likely due to one of the issues described below. PLEASE carefully read this post and the troubleshooting tips below before asking questions via the comments.
- IF YOU SEE BOTH FANS-ONLY & NON-FANS CONTENT: To test whether you've implemented this feature correctly, you MUST NOT be logged in as an admin for the page you're adding this to, or you'll see both the content for fans and for non-fans. The best way to test is to create a user profile for testing and log in as that user. You can then "Like" the page and "un-Like" the page to test the display of content. To "unlike" a page, click on the Wall tab for the page and at the bottom of the left column you'll see an "Unlike" link. Click that to unlike the page;
- NO "CURLY" OR "FANCY" FORMATTED QUOTES: Your quotes, whether single or double — and ALL your code — MUST be plain-text. If your quotes aren't straight up and down, then they're formatted quotes and should be fixed or your code will NOT work;
- MATCHING QUOTES: Make sure quotes around values are both the same, either single or double, but they have to match!
- HEIGHT SETTINGS: My fix for the extra space above the non-fan content uses an example height. Make sure you set the height value and the "margin-top" negative values for your individual case.
- TEST YOUR URLS: If you can't access the URL for an image or file directly in your browser, it won't work in your code. Make sure your URLs are correct;
- URLS must be properly formed: After the domain name ("TLD"), URLs are CASE SENSITIVE. They should also contain NO SPACES or, as mentioned above, no specially formatted characters.
Testing your Show/Hide CodeIt's important to remember that if you're logged in to Facebook as the user who is the Page admin, you will see both the fans-only and non-fans content.
To properly test your code:
- Set up a new Facebook personal profile, to be used just for testing purposes;
- Log in the Facebook as that new test user and view your Page;
- If you see the "Like" button at the top, then you're not yet a fan (duh!);
- Assuming you're not yet a fan, you should see the content of <fb:else>;
- Click the "Like" button; you should then see the fans-only content and the non-fan content will be invisible;
TIP: Open, say, Firefox and be logged in there as the page admin, and do your testing in a different browser (Internet Explorer or Safari) logged in as the test user. Then you can just switch between browsers to edit and test.
To "Unlike" a Page you've Liked, click on the Wall tab and scroll down to the last links in the left column. You'll see the "Unlike" link:
4. Make It the Default Landing Page
From now on, it will be the first thing visitors see when they arrive.
<html></html> Creates an HTML document
<head></head> Sets off the title and other information that isn’t displayed on the web page itself
<body></body> Sets off the visible portion of the document
<body bgcolor="pink"> Sets the background color, using name or hex value
<body text="black"> Sets the text color, using name or hex value
<body link="blue"> Sets the color of links, using name or hex value
<body vlink="#ff0000"> Sets the color of followed links, using name or hex value
<body alink="#00ff00"> Sets the color of links on click
<body ondragstart="return false" onselectstart="return false"> Disallows text selection with the mouse and keyboard
<pre></pre> Creates preformatted text
<hl></hl> Creates the largest headline
<h6></h6> Creates the smallest headline
<b></b> Creates bold text
<i></i> Creates italic text
<tt></tt> Creates teletype, or typewriter-style text
<cite></cite> Creates a citation, usually italic
<em></em> Emphasizes a word (with italic or bold)
<strong></strong> Emphasizes a word (with italic or bold)
<font size="3"></font> Sets size of font, from 1 to 7
<font color="green"></font> Sets font color, using name or hex value
<a href="URL"></a> Creates a hyperlink
<a href="mailto:EMAIL"></a> Creates a mailto link
<a href="URL"><img src="URL"> </a> Creates an image/link
<a name="NAME"></a> Creates a target location within a document
<a href="#NAME"></a> Links to that target location from elsewhere in the document
<p></p> Creates a new paragraph
<p align="left"> Aligns a paragraph to the left (default), right, or center.
<br> Inserts a line break
<blockquote></blockquote> Indents text from both sides
<dl></dl> Creates a definition list
<dt> Precedes each definition term
<dd> Precedes each definition
<ol></ol> Creates a numbered list
<ul></ul> Creates a bulleted list
<li></li> Precedes each list item, and adds a number or symbol depending upon the type of list selected
<div align="left"> A generic tag used to format large blocks of HTML, also used for stylesheets
<img src="name"> Adds an image
<img src="name" align="left"> Aligns an image: left, right, center; bottom, top, middle
<img src="name" border="1"> Sets size of border around an image
<hr /> Inserts a horizontal rule
<hr size="3" /> Sets size (height) of rule
<hr width="80%" /> Sets width of rule, in percentage or absolute value
<hr noshade /> Creates a rule without a shadow
<table></table> Creates a table
<tr></tr> Sets off each row in a table
<td></td> Sets off each cell in a row
<th></th> Sets off the table header (a normal cell with bold, centered text)
<table border="1"> Sets width of border around table cells
<table cellspacing="1"> Sets amount of space between table cells
<table cellpadding="1"> Sets amount of space between a cell’s border and its contents
<table width="500" or "80%"> Sets width of table, in pixels or as a percentage of document width
<tr align="left"> or <td align="left"> Sets alignment for cell(s) (left, center, or right)
<tr valign="top"> or <td valign="top"> Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan="2"> Sets number of columns a cell should span (default=1)
<td rowspan="4"> Sets number of rows a cell should span (default=1)
<td nowrap> Prevents the lines within a cell from being broken to fit
<frameset></frameset> Replaces the <body> tag in a frames document; can also be nested in other framesets
<frameset rows="value,value"> Defines the rows within a frameset, using number in pixels, or percentage of width
<frameset cols="value,value"> Defines the columns within a frameset, using number in pixels, or percentage of width
<frame> Defines a single frame — or region — within a frameset
<noframes></noframes> Defines what will appear on browsers that don’t support frames
<frame src="URL"> Specifies which HTML document should be displayed
<frame name="name"> Names the frame, or region, so it may be targeted by other frames
<frame marginwidth="value"> Defines the left and right margins for the frame; must be equal to or greater than 1
<frame marginheight="value"> Defines the top and bottom margins for the frame; must be equal to or greater than 1
<frame scrolling="value"> Sets whether the frame has a scrollbar; value may equal “yes,” “no,” or “auto.” The default, as in ordinary documents, is auto.
<frame noresize="noresize"> Prevents the user from resizing a frame