Design, Coding, SEO and Social Media Marketing, WordPress & Facebook

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.

ALSO NOTE: If you follow the below instructions and it's not working, try removing the <fb:fbml version="1.1"> </fb:fbml> tags. I don't believe this is necessary now.

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!

Content for Fans Only

First, on your Static FBML page, begin with the following:

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

Then end your page with:

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

Originally, I had proposed using negative margins to make sure the non-fan content isn't pushed down the page by the invisible fans-only content. (Facebook hides the fans-only content using the "visibility: hidden" CSS which hides the content but reserves the space it would take were it visible.)

However, an alternate and perhaps easier method to remove the fans-only content space is to use "position: absolute" CSS which takes the non-fan content out of the document flow (See this article on using the CSS 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:

<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:

#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.

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:

So you can toggle back and forth between being and fan and not being a fan to test your code.

Other Resources

Facebook Developer Wiki - fb:visible-to-connection