Loading...

Blog

How to Hide Content until Someone ‘Likes’ Your Facebook Fan Page

Hiding content from Facebook users until they ‘Like’ your fan page is a great way to increase the amount of fans following your page by giving users extra incentive to actually want to ‘Like’ your fan page. By utilizing fb:visible-to-connection a handy piece of built in FBML code we will be able to easily hide content from users until they ‘Like’ your page and become a fan. While this technique is not new and there are already numerous tutorials around on the subject our approach is different. We have simplified our technique in this tutorial to help alleviate some of the confusion we noticed from other tutorials. We have also solved a major issue for page admin’s who cannot see the actual fan content while logged in, however you still must log out in order to test the non-fan content.

PLEASE NOTE: The tutorial below is for FBML only! To learn how to accomplish this for an iFrame, please check out our Fan Gate Reveal Tab Iframe version here: http://www.daddydesign.com/how-to-use-a-fan-gate-on-your-iframe-tab-to-hide-content-until-someone-likes-your-facebook-fan-page/

Step 1: Building the Fan Content DIV

The first step is to build the DIV which will house all of your content that will be visible to your Facebook fans. In order for the non-fan content DIV to be able to cover up the fan content DIV when a user hasn’t ‘Liked’ your fan page a specific height must be used, this same height will also be used on the non-fan content DIV in Step 2. Also please note the usage of the attribute z-index; this will be addressed in Step 2.

CSS

.fan_content{ 
width: 520px;
height: 500px; 
float: left;
position: relative;
background: #ccc;
z-index: 1;
}

XHTML

<div class="fan_content">Fan Content Goes Here</div>

Step 2: Building the Non-Fan Content DIV

The next step is to build the non-fan content DIV which will house your image or content telling users in whatever way you choose to ‘Like’ your fan page in order to view the hidden content. In Step 1 we set a specific height for our fan content DIV, we are going to use that same height on our non-fan content DIV in order to make sure we cover up all of the content we want to hide from non-fans. We will also use that same height and apply it as a negative number to our margin-top attribute; this will ensure that our non-fan content DIV covers up our content DIV exactly pixel for pixel. Remember in Step 1 we set our z-index attribute to 1, well on our non-fan content DIV we will set the z-index attribute to 0, this will ensure that when you are logged in as admin you will always see the fan content instead of the non-fan content.

CSS

.non_fan_content{ 
width: 520px;
height: 500px; 
float: left;
position: relative;
background: #666;
margin-top: -500px;
z-index: 0;
}

XHTML

<div class="non_fan_content">Non-Fan Content Goes Here</div>

Step 3: Wrapping the Content DIVs

The next step is a relatively simple step and is just a coding preference to keep all of the content contained, it is totally optional. Apply the following CSS and wrap your previous two DIVs with the wrapper DIV. The benefit in doing this step is that by setting the overflow attribute to hidden we guarantee that all of our content stays contained within the wrapper DIV. Please note that if you’ve used any other wrapper DIVs in your code please make sure that none of the code conflicts.

CSS

.wrapper{
width: 100%; 
float: left; 
position: relative; 
overflow: hidden;	
}

XHTML

<div class=”wrapper”>
   <div class="fan_content">Fan Content Goes Here</div>
  <div class="non_fan_content">Non-Fan Content Goes Here</div>
</div>

Step 4: Making it Work with FBML’s fb:visible-to-connection

The last and final step is to make it all work using FBML’s fb:visible-to-connection code to show content depending on whether or not the Facebook user has ‘Liked’ your fan page. Basically all that needs to be done is wrap both of your content DIVs inside of the fb:visible-to-connection tag and then wrap all of your non-fan content inside of the fb:else tag. After you have your final code upload it to your Static FBML tab and test it while both logged in and logged out, while logged in your fan content should be visible and while logged out your non-fan content should be visible. It’s that simple!

<div class="wrapper">
  <fb:visible-to-connection>
    <div class="fan_content">Fan Content Goes Here</div>
  <fb:else>
    <div class="non_fan_content">Non-Fan Content Goes Here</div>
  </fb:else>
  </fb:visible-to-connection>
</div>

Complete Code

CSS

.wrapper{
width: 100%; 
float: left; 
position: relative; 
overflow: hidden;	
}
.fan_content{ 
width: 520px;
height: 500px; 
float: left;
position: relative;
background: #ccc;
z-index: 9;
}
.non_fan_content{ 
width: 520px;
height: 500px; 
float: left;
position: relative;
background: #666;
margin-top: -500px;
z-index: 0;
}

XHTML

<div class="wrapper">
  <fb:visible-to-connection>
    <div class="fan_content">Fan Content Goes Here</div>
  <fb:else>
    <div class="non_fan_content">Non-Fan Content Goes Here</div>
  </fb:else>
  </fb:visible-to-connection>
</div>

Please Note:

This tutorial will only work for Facebook Static FBML.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still can not get it to work please leave us a comment below and we will respond as soon as possible.

Leave a Comment

31 comments
Leonard Vanoli
Leonard Vanoli

Hi there, This tutorial does not hide content until the page is liked. You can still click on the wall, posts, videos ect.. Ho can you make it so someone cannot access any page until the welcome page is liked...?

daddydesign
daddydesign

You do know this is FBML correct? We have a tutorial for iframe version as well.

sean
sean

i'm so lost and confused.. i dont' know where to start... help?? i've read this oer several times and not really undertsanding? :S

Digital Boy
Digital Boy

Nice info ..:D n I loved your article everything about facebook, thanks a lot.!

cass
cass

Do you know any fan page that actually works in "hiding content until liked"? I checked all the page links and so far none work. You just click wall and it shows all content in every case.

daddydesign
daddydesign

Not sure what problem you're having but yes they work, what page links are you trying to view?

anthony
anthony

Can you also hide standard pages like photos & videos for non fans with this?

Cosmin
Cosmin

Hi. Does this mean that this tutorial isn't valid for an iframe app?

daddydesign
daddydesign

correct, once we have free time, we will release the tutorial for iframes.

Garry
Garry

Hi, where is the iFrame version :)

daddydesign
daddydesign

I promise it will come soon, we have been so busy with projects right now that's it's been hard to write that tut.

mike
mike

I'm trying to show one page to folks that don't like us and another page to folks that DO like us.. I'm using iFrame method... how do I do this ?... anyone?

daddydesign
daddydesign

We will be creating the Tutorial for Iframe version in the next couple weeks!

Tony G
Tony G

Can you post a sample of this using facebook iframe? It doesn't seem to be working Thank you!

Tonya
Tonya

So this will not work outside of a Facebook fan page? Is there anyway to get this to work on my Wordpress blog?

daddydesign
daddydesign

Not that we know of. You can do similar coding for a facebook iframe.

DK
DK

Do you have a tutorial: How to Hide Content until Someone ‘Likes’ Your Facebook Fan Page with iFrames?

daddydesign
daddydesign

Yes we are working on it as we speak. Should be up within next week..hopefully

Gemma
Gemma

I really want to have this on my current fanpage for my website but all of this really goes over my head :( I already have just over 100 fans and tons of stuff on my page

Rob
Rob

Great! Definitely gonna try this for my own FBML page.

Stephanie
Stephanie

I don't quite get this. I've inserted both CSS and XHTML code on my fanpage FBML welcome page, but the CSS code is then displayed on the page. Am I missing a step?

Eli
Eli

how do you link to an external stylesheet?

daddydesign
daddydesign

@Stephanie, you must either wrap the CSS code inside of style tags or link to an external stylesheet. We recommend that you link to an external stylesheet because of course IE has issues with the style tags.

daddydesign
daddydesign

[code lang="html" wraplines="false"]<link href="http://yoursite.com/style.css?1" rel="stylesheet" type="text/css" media="screen" />[/code] make sure to change the number at the end every time you update the file.

Portland SEO
Portland SEO

Great tip, a bit techie on the side but can be beneficial for those who already know the codes. Thanks for sharing!

daddydesign
daddydesign

@Portland SEO, all of our tutorials are written for people that should have a basic understanding of CSS and HTML and know how to implement code on Facebook Static FBML tabs.

csabi
csabi

Hi! I just love your tutorial! Congratulations! I know this is not the best way to say it, but I`we just opened a tutorials indexing website and I would like to ask you to submit your tutorials, it will bring you some extra traffic Please give a chance for my website: http://www.tutorialswindow.com Thanks!