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.

FBML Fanpage Creation Part 1

This is a step by step guide to teach you how to make a Facebook fan page (landing page) using FBML. 


We know that Facebook is the number one source of real and targeted traffic on the entire web. You will get exactly the type of customers we are looking for if you know how to market your product in Facebook. The most effective way is to make a fan page for your company or product or service that is appealing to the Facebook users. Make the page attractive with FBML, and drive traffic to your website. You can also add your affiliate links and make more money when people visiting your page click on them. All you need is simple FBML knowledge.
Click on the Images to view full size

Step 1

Login to facebook and create a new official page
Go to www.facebook.com/pages and click create page

Step 2

Create and Official Page on the next page as shown below. It is important that you make an Official Page rather than a Community Page to make sure that the visitors land on the FBML tab you are about to create. Give the page a name.

Step 3

Search for Static FBML application page

Step 4

Go to the Static FBML Application Page

Step 5

Add it to the page you just created

Step 6

Now you can see the FBML tab on your page. Click Edit Page (under the picture)

Step 7
Now on the next page click Apps on the left panel and you will get the below page. Find FBML under the Added Apps and click Go To Apps

Step 8


On this page you can edit the FBML code. Add the codes and save. You can also add more FBML tabs to your page here.

Step 9


Enter codes as given below. Just copy paste the code you made. Give the tab a name.

Add whatever code you want and save changes.
I will provide codes in the next tutorial.

Step 10


Now go to your page's Wall and click options and you will get Settings menu in that change the Default Landing Page to the FBML tab you created as shown below so that the new visitors will land on your FBML tab first.

That's it you have made an FBML page. Now you can add photos, videos, gallery, whatever you need to show the visitors. Upload a page photo and share the page with friends!!


Here are some pages I made with FBML tabs. Check them out :)


Example 1


FrndzCafe  <-- Click For Live Demo

This page has lots of features. The content is hidden from the non-fans. The visitor is asked to walk in through the door. When the click the door they are asked to like the page. When the visitor likes the page a mini site is revealed to them. There is a popup music player and a video player. You can also provide feedback through the comment box at the bottom of the page.

Example 2

Financepoint.co.nz Page <-- Click For Live Demo

Here is another page I created for the website financepoint.co.nz

This is the page the visitors land on when the visit the page for the first time.

Now most visitors are compelled to click the "More info" Button which will bring up the following dialog.

Clearly they are asked to like the page to learn more and they do which will open the contents of the page

Now the visitor has liked the page and the content is open to them. This is also a mini-site like fanpage with different tabs.

Here are some other pages I have made. Just click to open them

Example 3
Example 4
Example 5
Example 6
Example 7


If you need to have any pages designed just contact me via the contact page. I  charge $25 for a page.


In the next part I will provide FBML codes. So check back soon.