Like To Reveal Fanpage

A like to reveal script can be used to get more likes on your fanpage. The landing page is shown to the visitors with a message thats says content will be available only if they like the page. So you get more likes.

This type of a page can be created with the fbml code. This code uses two separate images for fans and non fans of the page. Image can be replaced by other content like videos or text.

Example Page: http://www.facebook.com/Hair2GoHB?sk=app_11007063052

Screenshots

Page Before "Like"

Page after "Like"

<style type="text/css">
#non-fans {
width:520px;position:absolute; top:0; left:0;
}
</style>

<fb:visible-to-connection>
<img src=’FAN IMAGE/’>
<fb:else>
<div id="non-fans">
<img src=’NON-FAN IMAGE/’>.
</div>

</fb:else>

</fb:visible-to-connection>

When a new visitor lands on the fanpage they see the content between  <fb:else> and </fb:else> tags
The content between the <fb:visible-to-connection> and  <fb:else> will be shown only to those who like the page. Adding position:absolute; top:0; left:0; to the non fan section on stylesheet prevents a blank space being shown above the content for non fans

Note: The admin of the page can see both the fan and non fan content. So you may need to test it with another Facebook account.

Mini Site On Facebook Fanpage

 This is a screenshot of facebook fanpage minisite. It is placed on a static FBML tab. You can add image gallery, contact forms and many other features to this tab site.
 

To make a mini-site on the static FBML tab of your fanpage page you can use this basic code

<!-- navigation elements -->

<a href="#" clicktoshow="nav1" clicktohide="nav2,nav3,nav4">Home</a>

<a href="#" clicktoshow="nav2" clicktohide="nav1,nav3,nav4">Specials</a>

<a href="#" clicktoshow="nav3" clicktohide="nav1,nav2,nav4">Locations</a>

<a href="#" clicktoshow="nav4" clicktohide="nav1,nav2,nav3">About</a>



<!-- Content to display when user clicks on the Home tab -->

<div id="nav1">

Homepage text

</div>



<!-- Content to display when user clicks on the Specials tab -->

<div id="nav2" style="display: none;">

Specials text

</div>



<!-- Content to display when user clicks on the Locations tab -->

<div id="nav3" style="display: none;">

Locations text

</div>



<!-- Content to display when user clicks on the About tab -->

<div id="nav4" style="display: none;">

About text

</div>

This is just the basic code to make such a site. By adding a style sheet it can be made better.

Here is an example style sheet to make the menu tabs.

<style type="text/css">

#body
{
background-color:yellowGREEN;
}

#coolmenu{
margin: 0;
    padding: 12px 0 12px 0;
  
}

#coolmenu a{
    text-decoration: none;
    font-weight: none;
    background:black;
    color: silver;
    padding:8px 10px;
    margin: 0 1px;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color:brown;
color: white;
}

</style>

Internet explorer doesn't support <style type="text/css"> so you may need to add external stylesheet like this

 <link ref="stylesheet" type="text/css" href="http://yourdomain.com/style.css" />

Some other screenshots

A contact form embedded on fanpage

A popup dialog box

A Like to reveal page

Video Tab

Play snake on youtube

Youtube has a secret surprise for viewers. Now you can play the classic "snake" game on Youtube.

Go to any video on YouTube use any of the below key combinations

1) press left and up arrow keys on your keyboard simultaneously

2) hold the "1" key and press up arrow on the keyboard

3) click the left arrow key for 3 seconds and click on the paused video

This trick may not work on internet explorer