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/wordpress/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.

Posted In

Tutorials