One of the most common uses of FBML is to allow your fans to see some content while non-fans see other content. Hey – why not right? You want to reward those who take action right. So here is a great way to use FBML to do just that.
Of course you have to have an FBML tab in order to do this. Once you have your FBML page in place use the following code to separate your content…
How to Show Different Content to Fans and non-Fans
<fb:visible-to-connection>
Reward your fans with this stuff
<fb:else>Everyone else can see this</fb:else>
</fb:visible-to-connection>
A little aside: If you’re logged in and happen to be an administrator of the Fan Page where you’re using this FBML, you will see the friend only content even if you’re actually a fan.
It is all pretty simple. However – you might have a little trouble with excess space above your “no- fan” content. It turns out that if you use this code – any code that you put in the fan content – does not show up to non-fans – but it does create a large blank space. So how do we fix that? Pretty simple really – just
Absolute position your non-fan content to the top of the page
If you know a little about css positioning – then you know you can position a block element – like a div – absolutely using css.
So what you need to do is put a relatively position wrapper around the whole thing. Then you place your non-fan content in an absolutely position div that is flush top and left. Kind of like this….
FBML Code
<div id=”wrapper”>
<fb:visible-to-connection>
Reward your fans with this stuff
<fb:else>
<div id=”non-fans”>Everyone else can see this</div>
</fb:else>
</fb:visible-to-connection>
</div>
CSS
#wrapper {
width:520px;
margin:0 auto; border:0; padding:0;
position:relative;
}
#non-fans {
width:520px;
position:absolute; top:0; left:0;
}
I hope this helps some – if you want to learn even more – I grabbed this info from Tim Ware over at HyperArts – check him out.
God Bless and Give with Passion!!!
Chris