Facebook Fan Pages - Show Content to Fans - Hide from Non-Fans - FBML - Reveal Tab

[Facebook FBML] 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: 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, seeing either both fan and non-fan content, or one or the other images covering each other.

ALSO NOTE: You no longer need to have the <fb:fbml version="1.1"> </fb:fbml> tags, as much documentation on the Web specifies.

FINALLY: If you want to copy and paste my code, MAKE SURE you convert all quotes to plain-text (straight up and down) quotes! Otherwise, your code will not work!

See the Troubleshooting Your FBML Code and Testing Your FBML Code sections, below.

How to Show Different Content to Fans and non-Fans - Reveal Tab

Code:

    <fb:visible-to-connection>
    Fans will see this content.
    <fb:else>Non-fans will see this content.</fb:else>
    </fb:visible-to-connection>

Removing the Space above the Non-Fan Content

The best way to prevent the non-fan content from pushing the fan content down the page, use this method:

Use "position: absolute" CSS which takes the non-fan content out of the document flow (See this article on using the CSS absolute-position element) and positions it relative to its containing element (usually a DIV).

In the following example, I have given the containing DIV the ID "wrapper" and used CSS to style it "position: relative". Then the non-fans content is in the DIV with the ID "non-fans" and is "position: absolute" and is set to be flush against the left and top margins of the "wrapper" DIV:

The code in the FBML box:

Code:

 <div id="wrapper">
    <fb:visible-to-connection>
    FANS-ONLY CONTENT
    <fb:else>
    <div id="non-fans">CONTENT FOR NON-FANS</div>
    </fb:else>
    </fb:visible-to-connection>
    </div>

The CSS:

Code:

  #wrapper {
    width:520px;
    margin:0 auto; border:0; padding:0;
    position:relative;
    }
    #non-fans {
    width:520px;
    position:absolute; top:0; left:0;
    }

When using the "position:absolute" in CSS the crucial thing to remember is that the element you're positioning absolute will be positioned RELATIVE to the element in which it's contained.

Troubleshooting

If you aren't having success implementing this code, it is most likely due to one of the issues described below. PLEASE carefully read this post and the troubleshooting tips below before asking questions via the comments.

* IF YOU SEE BOTH FANS-ONLY & NON-FANS CONTENT: To test whether you've implemented this feature correctly, you MUST NOT be logged in as an admin for the page you're adding this to, or you'll see both the content for fans and for non-fans. The best way to test is to create a user profile for testing and log in as that user. You can then "Like" the page and "un-Like" the page to test the display of content. To "unlike" a page, click on the Wall tab for the page and at the bottom of the left column you'll see an "Unlike" link. Click that to unlike the page;

* NO "CURLY" OR "FANCY" FORMATTED QUOTES: Your quotes, whether single or double — and ALL your code — MUST be plain-text. If your quotes aren't straight up and down, then they're formatted quotes and should be fixed or your code will NOT work;

* MATCHING QUOTES: Make sure quotes around values are both the same, either single or double, but they have to match!

* HEIGHT SETTINGS: My fix for the extra space above the non-fan content uses an example height. Make sure you set the height value and the "margin-top" negative values for your individual case.

* TEST YOUR URLS: If you can't access the URL for an image or file directly in your browser, it won't work in your code. Make sure your URLs are correct;

* URLS must be properly formed: After the domain name ("TLD"), URLs are CASE SENSITIVE. They should also contain NO SPACES or, as mentioned above, no specially formatted characters.

# IF YOU SEE BOTH FANS-ONLY & NON-FANS CONTENT: To test whether you've implemented this feature correctly, you MUST NOT be logged in as an admin for the page you're adding this to, or you'll see both the content for fans and for non-fans. The best way to test is to create a user profile for testing and log in as that user. You can then "Like" the page and "un-Like" the page to test the display of content. To "unlike" a page, click on the Wall tab for the page and at the bottom of the left column you'll see an "Unlike" link. Click that to unlike the page;

Testing your Show/Hide Code

It's important to remember that if you're logged in to Facebook as the user who is the Page admin, you will see both the fans-only and non-fans content.

To properly test your code:

* Set up a new Facebook personal profile, to be used just for testing purposes;
* Log in the Facebook as that new test user and view your Page;
* If you see the "Like" button at the top, then you're not yet a fan (duh!);
* Assuming you're not yet a fan, you should see the content of <fb:else>
* Click the "Like" button; you should then see the fans-only content and the non-fan content will be invisible;

If you need to do tweaking to the code and re-testing, you'll have to log out as the test user and log back in as the admin to edit the Static FBML.

TIP: Open, say, Firefox and be logged in there as the page admin, and do your testing in a different browser (Internet Explorer or Safari) logged in as the test user. Then you can just switch between browsers to edit and test.

To "Unlike" a Page you've Liked, click on the Wall tab and scroll down to the last links in the left column. You'll see the "Unlike" link:
[unlike]
So you can toggle back and forth between being and fan and not being a fan to test your code.