How to Hide Content From Non-Fans on Custom Facebook Page Design

A very popular technique in Custom Facebook Fan Pages is to hide content from users who have not yet liked your page. That is to say, if someone isn’t already a fan of your page, they won’t see the content you set for fans only. This can be done pretty easily, using the Static FBML application that you already installed on your Fan Page.

This is just a basic example, but with some imagination and creativity, you can create some really amazing hidden content landing pages.

It’s important to focus on height when designing and coding the hidden content fan pages. If you want to make your life easy, set both the hidden page and the visible page at the same height. You can use CSS to set a background image or you can just place the image/text right inside the HTML. Here is all you need to make this work:

<fb:fbml version=”1.1″>
<fb:visible-to-connection>
Place Fan-Only Content Here
<fb:else>Place Non-Hidden Content Here</fb:else>
</fb:visible-to-connection>
</fb:fbml>

This would result in non-fans only seeing the text “Place Non-Hidden Content Here” while Fans (those who have liked your page) will see “Place Fan-Only Content Here.”

Going back to the note about height, if you were to create two landing pages, one for non-fans and one for fans, and set them both the same height, you could replace the content with the HTML for the image and you’d be good to go.  Example:

<fb:fbml version=”1.1″>
<fb:visible-to-connection>
<img src=”URL OF IMAGE” height=”400″ />
<fb:else><img src=”URL OF IMAGE” height=”400″ /></fb:else>
</fb:visible-to-connection>
</fb:fbml>

Pro Tip: Try removing the first and last lines of the above code if you’re having issues.
Pro Tip: If you’re the Admin of the Page, you will always see BOTH hidden and non-hidden content so test it out with another account to see how the user would view the page.