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.

Content for Fans Only

Wrap the content you want to hide from non-fans within these tags:


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

Removing the Space above the Non-Fan Content

Many folks complain that before a user becomes a fan, and the “non-fan” content is displayed, the “fans-only” content still takes up the space it would if it were being displayed. To fix this, put paragraph tags (<p> … </p>) around the image or the text for the non-fan content, and set a negative margin on the paragraph tag, eg (where the fans-only content is 100px tall):

<fb:else><p style=”margin-top:-100px;”><img src=”[IMAGE URL]“></p></fb:else>

OR

<fb:else><p style=”margin-top:-100px;”>Text content for fans only</p>

If your fans-only image is bigger than your non-fans image, and you find that your image is getting cut off:

Surround the entire <fb:visible-to-connection> … </fb:visible-to-connect> with a <div> tag that includes a style setting the height to the height of the tallest image (600 pixels in the below example):


<div style="height:600px;">
<fb:visible-to-connection>
[content]
</fb:visible-to-connection>
</div>

Read Full Article with more details HERE