Tuesday, December 21, 2010

Tutorial: The Facebook fan page squeeze page

Amplify’d from fbfanshop.com

Tutorial: The Facebook fan page squeeze page

What is a squeeze page?

A squeeze page is the first page user sees when they click on your marketing link. It is designed to drive home a sale, or in our case to get the user to click on the "Like" button. In facebook by default the first page a user sees when they go to your page is the wall application. In order for more users to like your page it is absolutely essential that you change this to a more attractive page.

So here is a little tutorial we have put together because we want to help you have the most successful page possible so that you keep coming back!

What is a squeeze page?

A squeeze page is the first page user sees when they click on your marketing link. It is designed to drive home a sale, or in our case to get the user to click on the "Like" button. In facebook by default the first page a user sees when they go to your page is the wall application. In order for more users to like your page it is absolutely essential that you change this to a more attractive page.

So here is a little tutorial we have put together because we want to help you have the most successful page possible so that you keep coming back!

Step 1 - Install The Static FMBL Application

The FBML application is a great little application that you can install on your page to show your own HTML code.

To install this app click on the edit you page link:
 

In the edit screen scroll down to the "More Applications" section and click on Static FBML::


Then click the add to my page button:

Then click the add to page button below

So now we have FBML installed we need to configure it and code up the page. Head back to your page and click on Edit Page once more. 

Then click the "Edit" button in the new FBML application section.

The box title you give you page has to be short and sweet or the text wont fit. Pick something straight to the point, but something that will get the users attention.

Now here is where the magic happens. The following is the code for our own KFC page that we put together as a demonstration of what we can do with a simple page. Some of the text is hidden from the users until they have clicked like and it is set out in such a way that it shows users that they will get the juicy bit of information once they click like.

The trick here is the "<fb:visible-to-connection>" and the "</fb:visible-to-connection>". Any HTML between them is hidden. If you are a band or an artist or any one with some HTML from your site that you want to show you can throw in HTML directly from your sites source code as we have done with our own facebook page for this site to your right.

Just in case you want to see how the whole code hangs together here it is in all its glory. 

Now you have FBML installed you need to configure it. The first thing you should configure is the settings that tell Facebook which page to show your users first. Right now this is set to your wall, to show off the funky squeeze page were about to make you should set the new FBML tab to be the first page. To do this click the Edit Page link like we did before.

<STYLE TYPE="text/css">
#wrapper
{ width:520px; margin:0 auto; border:0; padding:0; position:relative; }
#non-fans
{ width:520px; position:absolute; top:0; left:0; }
</STYLE>

<center>
<img src="http://ezs335fa370baf692e63b96c2b7a0162d060.s3.amazonaws.com/GoogleSwitchReport/FBarrow1small.png">
<br/>
<p style="font-family:tahoma;font-weight:bold;line-height:1.2em;font-size:24px; text-align:center;color:#000000;">
<span style="color:#FF0000">Want to learn to cook KFC original recipe chicken at home?!</span>
<br/>Secrets are revealed below!
</p>
<br />
<br />
<img src="http://ezs335fa370baf692e63b96c2b7a0162d060.s3.amazonaws.com/GoogleSwitchReport/FBarrow2.png">
<br />
<p><span style="font-size: 18pt; color: #000000;">Why is the colonels 11secret herbs and spices so damn delicious?! Why hasn’t anyone managed to replicate his recipe? After months of testing I have found the secret! If you have "Liked" this page you will see the recipe bellow!</span></p> <br><br> <p> </p> <br><br> </center><fb:visible-to-connection> <p></p> <br /> <p>
<span style="font-size: 12pt;">1 Beaten Egg</span></p>
<p><span style="font-size: 12pt;">2 frying chickens with skin cut up into 6 pieces</span></p>
<p><span style="font-size: 12pt;">2 Cups of Milk</span></p>
<p><span style="font-size: 12pt;">2 Cups of flour</span></p>
<p><span style="font-size: 12pt;">6 Cups of Cooking Oil</span></p>
<p><span style="font-size: 12pt;">2 teaspoons of black pepper</span></p>
<p><span style="font-size: 12pt;">1.5 teaspoons of Accent Flavor Enhancer</span></p>
<p><span style="font-size: 12pt;">3.5 tablespoons of salt</span></p>
<p> </p>
<ol> <br />
<li style="text-align:left;"><span style="font-size: 12pt;text-align: left;">Put oil in a pressure fryer and heat on medium to 400 degrees</span></li>
<li><span style="font-size: 12pt;text-align: left;">Combine egg and milk in a bowl</span></li>
<li><span style="font-size: 12pt;text-align: left;">Combine remaining ingredients in a second bowl</span></li>
<li><span style="font-size: 12pt;text-align: left;">Dip each chicken piece into the milk and egg mix until its fully moist</span></li>
<li><span style="font-size: 12pt;text-align: left;">Roll the chicken piece in flour mixture until completely covered</span></li>
<li><span style="font-size: 12pt;text-align: left;">Carefully drop the chicken into the pressure cooker... WITHOUT burning yourself</span></li>
<li><span style="font-size: 12pt;text-align: left;">Cook for 10 mins</span></li>
<li><span style="font-size: 12pt;text-align: left;">Release the pressure, remove chicken and sit on a rack or paper towels.</span></li>
</ol> </p>
<p><span style="font-size: 18pt; color: #000000;">11 herbs and spices my ass!</span></p></fb:visible-to-connection>
<p>
<br>
<br>
</div>

Now click on the edit button under the "Wall" box:

Now set the default landing page to your brand new FBML tab:

You are now done! Enjoy your spunky new page! We know your fans will.



Posted in Fan Page Design

Read more at fbfanshop.com
 

No comments:

Post a Comment