The ability to use the fan/no-fan tags in FBML has been around for a while, but the way it’s set up has been clunky to make look nice. If content is meant to be shown only to fans, non-fans will see an empty box where that fan-only content will appear.

Showing some content to fans, and other content to non-fans is handled by the fb:visible-to-connection FBML tag.

If you’re showing certain content to fans, and other content to non-fans (for example, a message reminding people to “like” the page to be sure they receive updates), without a little CSS trickery, it can still look kinda crappy.

In this CSS, we’re not actually doing anything that complicated – just specifying through CSS that the message to fans should be in the exact same location as the message to non-fans. We do this by using the position:absolute attribute in CSS. The code below just sets a main container div with a dark red background (#660000), and then uses fb:visible-to-connection and fb:else to set what should be displayed to fans, and what should be displayed to non-fans.

<div style="background-color: #660000;padding: 0px;margin: 0px;width: 520px;height: 30px">
	
		<div>Visit our website at <a href="http://www.mysite.com" style="color: #cc9999">www.mysite.com</a></div>
	
		<div>Don't forget to "like" this page for updates!</div>
	
</div>

The important part in all of this is the style="position:absolute; top:5; left:15;" bit on each of the divs. By setting an absolute position, we’re basically stacking the fan/no-fan spaces on top of each other. Since only one will be seen at a time, this isn’t a problem for your users, and avoids the awkward spaces or padding issues you’d run into otherwise. You don’t have to make the message occupy the same sized space, just tweak the CSS to position it where you need, so that both are on top of each other.

Important Notes

As far as I know, this is not currently working for FBML apps. I’ve gotten an FBML error every time I’ve tried. This is intended for Static FBML tabs only.

If you’re a page admin, you will see BOTH the fan and the no-fan messages when you preview your Static FBML. Don’t freak out – open the page in a non-logged-in browser, or use an alternate profile that isn’t set as a page admin to be able to test whether or not your code is working.

Advertisement

468x60_makemoney
ssd-virtual-servers-banner-468x60
fb-api
Previous post

Hate Facebook Games? Turn Off the API

Next post

Facebook New Application Tool Facacta

snipe

snipe

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I'm the CTO at Mass Mosaic and the CEO of Grokability, Inc. in San Diego, CA. Tweet at me @snipeyhead or read more...

  • If you don’t mind me adding, the fan content does actually work for Facebook FBML Apps (I use it in ours). However, the App may have to be in a Page Canvas as opposed to the Application Canvas.

    Dig the site dedicated to fbml non-sense, btw 🙂

    • Hi Nathan – thanks for the comment. I’ve consistently gotten an error when I try to use it in a page tab via app, but then again, it *is* facebook, so it could have just been wonky at the time.

    • Also – a quick question… if it’s an app tab, which is it that the FBML is checking to see if the user is a fan of – the page or the app? I believe it checks against the app, not the fan page, so that may not be wanted behavior.

      • That’s odd you’re getting that error.

        In both the case of a Static FBML App and a Custom App, I can do the visible-to-connection and it functions properly. Even with custom apps, it’s checking against the Facebook Page whether the user is a fan, not the app. I think for it to check against the app, it would have to load in the application canvas (or check if the user has added the app).

  • In attempting this for my Facebook Page, I can only get to work and am unable to execute the action. I tried both placing the open & close tags inside my and separate or outside the .
    Any suggestions? thanks!

  • Brenda

    I’m a bit of a newbie when it comes to all of this so bare with me. I want to have the effect that this fan page has: http://facebook.com/wealthwithrachel . I have everything created and my question is: is it possible to do without creating a facebook app? Can I simply put the code of for the visible to connection in between the tags: ? Thanks

    • Yes you can use Static FBML

  • Alex

    Hi Snipe,

    I’ve managed to get this working (after a lot of tweaking to fit it around my design) but I’m having trouble making it look nice. The problem I’m having is that the wrapper div holding both the fan and non-fan content has a background colour. The image I’m using for non-fans is considerable shorter than the fan content, so the background colour is still showing beneath the non-fan image where the fan content will appear.

    There’s a screenshot here: http://bit.ly/ahbcMk

    Is there any way to hide the fan content behind the non-fan image until the user Likes the page?

    • You should be able to tweak that using CSS

      • Alex

        Yep, got it working in the end.

        Thanks!

  • cbkman

    Im having trouble using this same code on multiple elements throughout my page, Im using the CSS just as you have it, and then labeling anything I want hidden for non fans, works just great, thing is, upon liking the page, all the elements that should be hidden now are either fully showing up, or are leaving their regular side spaces, so any idea why it might work for all elements while ‘non-fan’ but as soon as you become a fan it fails?

    • You’re checking this on an account where you are not the page admin, correct?

      • cbkman

        That is correct, I am doing this on a separate system, simultaneously within three different browsers, IE, Firefox, and Chrome. All result in the same exact behavior

        http://codepad.org/EKNOiQiR

        Is an example of my code itself

        http://www.facebook.com/pages/Mehhorg/162031013818509?v=app_135505959834810&ref=sgm

        that is where I am doing the testing, for now Im trying to deal with some other issues as well, but you should be able to see my cosmetic problems by liking / unliking the page. I appreciate your time and help!

      • cbkman

        Guess I stumped the master :-/

  • Chasebadkids

    Not sure if I was understandable in my first post so Im trying again,

    Im using the code about to hide / show various pieces of content on my page for fans / non fans, As far as hiding the stuff FROM fans, it works great, non fans see exactly what I want them to and nothing more, thing is, once they ARE fans, the stuff that was PREVIOUSLY hidden from non-fans, is STILL hidden, and the stuff that is visible to non-fans is invisible as well, I understanda this is happening because no matter which state the page is in (fan or non-fan), ‘fan’ stuff is consntatly hidden, so what Im trying to do is figure out a way to switch out the stylesheet, or any other suggestions!

  • Alex

    Tx for sharing this, i am using the table background method. But your solution is more solid.

    Now for my question:
    Is it possible to show a fan page after “x amount of likes”?

    So something in the line of: “Sorry you can only see this secret part if 15 people like it”
    After click saying “14 more likes to go”

    Should i create a counting-likes.php on my server and use the returned value ?

    Any thoughts?

    Regards

  • Do you know if this has stopped working with the new facebook page layout (as of March 10,2011) ? I can’t seem to get it to work. Is there a new way to do it with these new pages?

    • FBML is still supported after the page switchover, so it should still work. Are you logged in as an admin of the page? Remember that it won’t display correctly for you if you’re an admin.

  • bytecod3r

    Is it possible to use a smilar code in a external website to check weather someone is liked a fanpage or not?