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
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.