How To Hide Content On A Facebook Fan Page

Posted by ken in Web Design | 6 comments

So do yourself a favor, use two browsers and two Facebook accounts. I use Chrome to login as the administrator and do all my coding in. Then I open up Safari to view my Fan Page using a different Facebook account. If you do this, it will save you lots of headaches in the long run. Ok, here we go.

You can copy this code below:

<fb:visible-to-connection>
  Fan-Only content will be shown here
    <fb:else>
      Non-Fan content will be shown here
    </fb:else>
</fb:visible-to-connection>

Simple isn’t it? Remember, the changes won’t show up in the browser you are logged in as the administrator. Make the changes, then refresh the screen in your other browser. There, you will see, and can test your changes.

The example above was easy. It was just plan text of a single sentence. But what if you’re displaying graphics, and paragraphs and paragraphs of text? Many times you will notice an empty space above the Non-Fan content. This is because the Fan-Only content is still there. Facebook just hides the Fan-Only content using the CSS “visibility: hidden”, which hides the content, but reserves the space as it were visible.

The solution again is easy. We’ll wrap the entire code with a DIV and use CSS to style it as “position: relative”. Then we’ll wrap the Non-Fan content in another DIV and use CSS to style it as position: absolute”. Then we’ll position the Non-Fan DIV to be flush with the left and top margins of the containing DIV.

Here is an example:

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

<div id="wrapper">
  <fb:visible-to-connection>
    Fan-Only content will be shown here
    <fb:else>
      <div id="non-fan">
      Non-Fan content will be shown here
      </div>
    </fb:else>
  </fb:visible-to-connection>
</div>

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.

Testing your Fan Page Code

It’s important to remember that you will be logged into Facebok as the administrator of the Fan Page that you are editing, and you will see BOTH the Fan-Only and the Non-Fan content. So, to properly test your new code:

1. Setup another Facebook account for testing purposes
2. Login to Facebook in different browser as the new test user you just created
3. If you see the Like button on the top of the page, you’re not a fan yet (duh!) So you should be seeing the Non-Fan content
4. Now click on the LIKE button on the top of the page. The Non-Fan content will disappear, and the Fan-Only content will appear

Most of all, have fun! If this worked for you, let me know.

Other Resources
Facebook Developers fb:visible-to-connection