Creating Your Fans-only Content on Your Custom Tab

Once you’ve added the Static FBML application, the implementation of this FBML tag is pretty easy. The only part that is somewhat tricky is getting rid of the white space the fans-only content creates even though it’s not yet visible.

Facebook uses the “visibility:hidden” style to hide the fan content until the user Likes the page. However, this style rule still reserves the space for the content; it just doesn’t show the content. Consequently, the non-fan content is pushed down the page! However, this is easily solved with a bit of CSS “absolute positioning.” I incorporate this approach into the following examples.

The code for the FBML box:

<div id="wrapper">

<fb:visible-to-connection>

FANS-ONLY CONTENT GOES HERE

<fb:else>

<div id="non-fans">NON-FANS CONTENT GOES HERE </div>

</fb:else>

</fb:visible-to-connection>

</div

As shown above, all the tab content will be contained in the “wrapper” DIV.

<div id=”wrapper”> opens this containing DIV. CSS styles are applied to the ID “wrapper” via the stylesheet.

All the fans-only and non-fan content is placed between the opening <fb:visible-to-connection> tag and closing </fb:visible-to-connection> tag. This content can be HTML, FBML and CSS.

The fans-only content comes first, followed by the non-fan content which immediately follows the opening <fb:else> FBML tag.

The non-fan content is contained within the <div id=”non-fans”> and </div> tags. CSS styles are applied to the ID “non-fans” via the stylesheet.

Immediately following the non-fan content is the closing </fb:else> tag, followed by the closing </fb:visible-to-connection> tag and, finally, the </div> tag to close the “wrapper” DIV.

Here is the Static FBML box with the above code, and the link to an external stylesheet:

Here is the CSS for the external stylesheet (with example URL):

#wrapper {

width:520px;

margin:0 auto; border:0; padding:0;

position:relative;

}

#non-fans {

width:520px;

position:absolute; top:0; left:0;

}

Your external stylesheet should have only the CSS style rules. Don’t include the<style> … </style> tags!

If you can’t use an external stylesheet

If you don’t have a server where you can upload a separate stylesheet, you can“inline” the styles inside the HTML tags. Although this isn’t ideal, it’s an option if you can’t create a separate stylesheet, host it on a server, and link to it with the <link>tag.

Here is the above example, with the styles for the <div> tags inlined (notice we don’t need the IDs if we use this approach):

Testing and Troubleshooting

Testing and troubleshooting this particular FBML tag is a bit tricky, because when logged in as a user who is a page admin, you will see both fans-only and non-fan content when viewing the tab.

Create a user account for testing: The most efficient way to test is to create a Facebook account for testing only, or use a friend’s or colleague’s account. (Creating a new personal profile for testing may violate Facebook’s Terms of Service — See #4, Registration and Account Security — even if done with good intentions.) You can be logged in to Facebook as one user (the admin account) in one browser and logged in as the test account in a different browser (I use Firefox and Safari). Then you don’t have to keep logging in and out of Facebook as admin, then as tester, etc.
When testing, you’ll need to toggle back and forth between Liking and Unliking a page. To Unlike a page, click on the Wall tab. Near the bottom of the left column of the Wall, you’ll see “Unlike”:

§  Click that to Unlike the page, and you can click the Like button to re-Like the page. Repeat as necessary.

§  Use an external stylesheet, NOT inlined styles: Most browsers will correctly display your page if you have inlined the CSS with the <style> tag, but NOT Internet Explorer 8!
Because millions of people use this particular browser, your CSS should be in its own file (with the extension “.css”) and be referenced from your FBML page, with the <link rel=”stylesheet” type=”text/css” href=”URL-TO-EXTERNAL-STYLESHEET” />. You’ll need to have this file hosted somewhere on the web where you can link to it.

Double-check all URLs: If any files (images, CSS, etc.) are not being displayed or accessed, be sure to test the URLs for these files directly in your browser, typing or pasting the URL in the address bar to make sure you can access the file directly.

§  If you can’t access the file directly, then your URL is incorrect.

§  Check for proper syntax: Make sure that URLs are surrounded by matchingquotes (single or double is fine, but they must match) and that they are plain-text, straight-up-and-down quotes (not “fancy” or “curly” quotes).

§  Check your Tab on the Most Popular Browsers and on Mac AND Windows: You want to be sure your tab is displaying properly on the most popular browsers (Firefox, Internet Explorer, Safari and Chrome, at the very least) and on both Mac and Windows. What displays well in Firefox, Chrome and Safari may not (and often doesn’t) display well on Internet Explorer.