The ability to use the fan/no-fan tags in FBML has been around for a while, but the way it’s set up has been clunky to make look nice. If content is meant to be shown only to fans, non-fans will see an empty box where that fan-only content will appear.
Showing some content to fans, and other content to non-fans is handled by the fb:visible-to-connection FBML tag.
If you’re showing certain content to fans, and other content to non-fans (for example, a message reminding people to “like” the page to be sure they receive updates), without a little CSS trickery, it can still look kinda crappy.
In this CSS, we’re not actually doing anything that complicated – just specifying through CSS that the message to fans should be in the exact same location as the message to non-fans. We do this by using the position:absolute attribute in CSS. The code below just sets a main container div with a dark red background (#660000), and then uses fb:visible-to-connection and fb:else to set what should be displayed to fans, and what should be displayed to non-fans.
The important part in all of this is the style="position:absolute; top:5; left:15;" bit on each of the divs. By setting an absolute position, we’re basically stacking the fan/no-fan spaces on top of each other. Since only one will be seen at a time, this isn’t a problem for your users, and avoids the awkward spaces or padding issues you’d run into otherwise. You don’t have to make the message occupy the same sized space, just tweak the CSS to position it where you need, so that both are on top of each other.
Important Notes
As far as I know, this is not currently working for FBML apps. I’ve gotten an FBML error every time I’ve tried. This is intended for Static FBML tabs only.
If you’re a page admin, you will see BOTH the fan and the no-fan messages when you preview your Static FBML. Don’t freak out – open the page in a non-logged-in browser, or use an alternate profile that isn’t set as a page admin to be able to test whether or not your code is working.
