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