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

FBML Fanpage Creation Part 2

In this tutorial I am going to provide you different codes you can use in your FBML page you already created.

This is meant to help even noobs who have no basic idea of HTML


Adding a Link

To add a link to your fanpage use the HTML code below. Replace the text in red with your URL and change the anchor text to your desired text

<a  href="YOUR URL">Anchor Text</a>

For example, using the code

<a  href="http://www.lazyncrazy.in">My Websiste</a>

will result in My Websiste

Adding a Picture

To add a picture to your fanpage use the HTML code below. Replace the text in red with your picture URL

<img src="YOUR PICTURE URL"/>

For example, using the code

<img src="http://www.9mb.com/forums/images/smilies/smiley_rolling.gif"/>

you can display this smiley image

Adding a Video

We can also embed videos from YouTube on  fanpages using the below code

<fb:swf 
 swfbgcolor="000000" 
 imgstyle="border-width:3px; border-color:white;" 
 swfsrc='http://www.youtube.com/v/xxxxxxxxxx' 
 imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' 
 width='340' height='270' />

Replace the green URL with your video URL
Here we have to add an image file in addition to the video URL because facebook pages don't play video unless the user clicks on the video. So it is better to place an image of a video player in the red link
You can get video player images here

To see how the page will look like with a video player click here

Comment Box

Now that you have a wonderful page your vistors would like to appreciate its beauty! So let's add a comment box where your fans and visitors can leave their feedback.
This code is:

<fb:comments 

numposts="4" 

title="My Page Comments" 

</fb:comments>

 All the text in red can be replaced with your own.
numposts means the number of comments to show in the page.

You can make the comment box a little more advanced by adding a title, unique identifier and options to delete comments and share URL. Then the code is becomes

<fb:comments 

xid="UNIQUE NAME"

numposts="4" 

canpost="true" 

candelete="false"

title="My Blog Comments" 

returnurl="http://www.facebook.com/FrndzCafe?v=app_4949752878/">

</fb:comments> 

Pop-up Dialog Box

To make a pop-up dialog when a user clicks on a link or picture on the fanpage use the code below

  <!-- FBML LINK -->
<a href="#" clicktoshowdialog="dialog">[NAME OF LINK]</a>
<!-- END FBML DIALOG LINK -->
<!-- FBML DIALO -->
<fb:dialog id="dialog">
<fb:dialog-title>INSERT DIALOG TITLE</fb:dialog-title>
<fb:dialog-content>
INSERT HTML CONTENT
<fb:dialog-button type="submit" value="Close" close_dialog=true />
</fb:dialog-content>
</fb:dialog>
<!-- END FBML DIALOG -->

 At first we create a link which when the user clicks the dialog should pop-up. The code in green does the job.When the user clicks on the text  in [NAME OF LINK] the dialog box pops up. You can replace [NAME OF LINK] with your required text. Next is the dialog box which can be created by adding the code in red. Replace INSERT HTML CONTENT with your desired content.