Love marketing journalism? Apply here to become a full-time associate editor of our sister publication, Marketing Dive.

Explore more: 

How To Make a Facebook Reveal Page with iFrame

This post is by request, is about how to make a facebook reveal page and builds upon the previous blog about managing a facebook Advertising campaign.

A facebook reveal page is a custom landing page hosted on your server and linked to a facebook app which creates a custom tab on your facebook page which shows one sales message to a non-fan and encourages them to click “like” at which point they receive a new “fans only” message.  An example of how this works would be going to a new band’s facebook page, seeing a picture or content which promises a free download if people click “LIKE” and once those people do click “LIKE” the page changes so they see a link to the free download.

The marketing potential of this is obvious and Page’s which use custom Reveal tabs convert a lot more users than pages which do not. So how do you start? Well its a tricky process if you’re a small business owner and not a web developer, but you’ll have to become a developer (quite literally) to accomplish this task!

Step 1: Become a Facebook Developer

It sounds fantastic- but really anyone can become a facebook developer  by searching “Developer” and choosing the App marked “Developer”. You will need a verified Facebook account to become a developer, meaning you must have at some point provided Facebook with a credit card or phone number. If you have not yet done so you will be prompted to Verify your account during this process.

Step 2: Create Your First App

What? No training? None needed! Just click on the “Apps” button of http://developers.facebook.com/ and then on the Create new App tab in the upper right.

You will be prompted to input the App Display Name (Why not choose “My First Landing Page” ?). You do not need to worry about the Namespace option as custom tabs do not necessarily require this function. Once you have chosen your App Display Name and agreed to Facebook’s terms click Continue. You will be prompted to answer a Capcha for security.

You will be taken to your App’s editing page. There’s a lot on this page but take special note of the two strings of random numbers at the top marked APP ID and APP SECRET- you will need them soon!  For now, however, you can put this page aside and move on to creating your actual landing pages.

Step 3: Create Your HTML landing pages.

What the Facebook App you created in Step 2 does is take an actual HTML website you host on your server and tell Facebook to take that website and drop it on your Facebook page.  But there’s some funky code and special PHP files involved with doing this. I’ve done this work for you so if you want to work from a template please download my custom template from the following link:  http://dl.dropbox.com/u/19566792/landingpagetemplate.zip

In this zip file you’ll find the following items:

likeimage.jpg – Element of yourlikepage.html

notlikeimage.jpg – Element of yournotlikepage.html

yourlikepage.html – What users see when they LIKE your page

yournotlikepage.html – What users see BEFORE they LIKE your page.

index.php – A bit of code to help facebook figure out what to show when

facebook.php – A lot of code to help facebook out

addtext.txt – A link to help associate your app and html with your page.

The images I provided are crude, and you can change them at your discretion keeping in mind that a maximum width of 519 pixels will work best on your facebook page. The HTML files are fully editable meaning you can place video, links, slideshows and anything else allowed by HTML documents. Go wild- the design end and marketing end of this is all you, kids! When you’re done creating what your pages will look like go on to the next step.

Step 4: Using your APP ID, APP SECRET and UPLOADING YOUR PAGE

Use notepad to open index.php from the template. You’ll see a bit of code but all you have to worry about is copy and pasting your APP ID and APP SECRET from your Facebook app where prompted

$app_id = “APP_ID_GOES_HERE”;
$app_secret = “APP_SECRET_GOES_HERE”;

Click “Save” and then open “yourlikepage.html” in note pad and copy and paste your APP ID where indicated

appId : ‘APPLICATION_ID’,

Click “Save” and then do the same for “yournotlikepage.html”

Once finished use an FTP program to upload all the files to a unique web directory. I suggest using “http://www.yourdomain.com/facebook/” to keep things straight.

Step 5: Creating Your Tab

Assuming you followed the directions in Step 4 and uploaded your files to ”http://www.yourdomain.com/facebook/” go back into your Facebook Developers account and start to edit your App’s BASIC settings. You can leave most of it alone, but scroll down to the bottom and where Facebook asks you to select how your app will integrate with Facebook select “Page Tab” which should be the very last option.

For your Page Tab Name choose something like “Welcome” as users will see this name.

Under page tab URL input: ”http://www.yourdomain.com/facebook/

Under page tab SECURE URL input: ”https://www.yourdomain.com/facebook/

If your web host does not offer HTTPS then get a new web host and join the rest of us in 2012.

You may leave the final field blank as you do not want users editing your page.

Click “Save Changes” and then click on “ADVANCED” under settings in the top left hand corner.

There are many fields here, but you only need to change one. Scroll all the way down and under Canvas Settings make sure that the HEIGHT option is “settable” or you’ll get ugly scroll bars on your landing page!

Step 6:  Enable Your App & Set it as the Default Landing Page

You’re almost there! Remember that addtext.txt document in the template? You will need that to enable your new fancy App on your Facebook Page. Open the text in notepad and where it asks for APP ID input your APP ID

https://www.facebook.com/dialog/pagetab?app_id= APP_ID_GOES_HERE&display=popup&next=http://www.facebook.com

Copy and paste the text into your web browser’s Address Bar and click “enter” and you will be taken to a page which lets you install the App to any Pages you administrate. Select the desires page and you’re almost there!

Once the App is installed go to your Facebook Page and click “Edit Page” and go to the “Manage Permissions” tab.

There should be a field titled “Default Landing Tab” which has a drop down menu. Click on the drop down menu and your new app should be listed among the other selections. Choose your App and then save your progress.

And that’s it! Now when new users see your page they’ll be greeted with a unique message and when they click “LIKE” a new message will appear! Have fun kids.

English: The Facebook Man. Facebook is celebra...

Image via Wikipedia


Join The Conversation

  • Mar 18 Posted 3 years ago k0sMa5

    Link is dead. Can you reupload it pls? Thanks

  • Feb 8 Posted 5 years ago digitalpressure

    Hey Michael,

    Can you send me the zip file. The link provided is dead :(.

     

    Thanks!

    Jason

  • Feb 2 Posted 5 years ago vdvp

    Hi Michael, Thanks for your clear explanation!

    I got pretty far but no cigar at the end. When I push 'like' it does not go to the page I want it to go to. It basically returns to the same landing page.

    I used to have a landingpage (made of an app) with my portfolio. Thats the page I would love to have for the likers.

    Maybe you can have a look and give me a hand?

    Thanks!

    Vincent

  • Michael Pallante's picture
    Jan 13 Posted 5 years ago Michael Pallante

    Hi!

    Unfortunately I'm not familiar enough with .cfm to do that. I do know that you do not nessescarily need the PHP files if you just want a static landing page- but I'm not sure how to get the reveal function with .cfm format!

    You do have some other options - I know there are some fantastic low cost services out there which provide reveal page apps for a monthly feel. The benefit of these types of services is that they take all the code-work and design-burden off yoru hands. The drawbacks are of course the up front cost and the lack of direct control over your code. 

    Its something you'll have to work into your cost benefit analysis of a facebook reveal page.

    Best of luck, friend!

    M. 

  • Jan 13 Posted 5 years ago wlcohen

    my server does not have php

    can you offer the files in .cfm ?

     

    thanks

Webinars On Demand

Whitepapers