How To Make a Facebook Reveal Page with iFrame Wednesday, Jan 11 2012 

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

Pretend To Be A User Wednesday, Dec 21 2011 

This (attributed to ) originally appeared duri...

Image via Wikipedia

I was recently working with some partners on a charity’s Facebook page. We were having a little trouble getting everything we wanted in place because, like any good Americans, we wanted it all and we wanted it now! We wanted our landing page to have reveal tabs and donations page to have “tweet to friends”, our posts to be written by Benjamin Franklin and our art carved by Michaelangelo! Erm. Yes.

Well the one thing we were forgetting is that community development is a long term goal, not an instant conversion. We should be happy we get a “like” to start with and thrilled to get a donation down the road.

We’d gotten in so deep at that point our page plan was a mess! So what did we do?

We took a step back, had a couple beers and logged out of facebook went to our facebook page and said, “Lets pretend we’ve never heard of this charity ever. It doesn’t matter how we got here, but now we’re here. What do we see?”

Then we started asking questions: Having looked at our landing page for 2 seconds do we know what the page is about? is it worth a like? Why not? What can we do to make it worth a like? Ok, now we liked it- now what? And so on…

In short we went through the “conversion” process and decided exactly how a completely uninformed lead should be nurtured to becoming a donor / spokesperson for our cause.

And that, really, was our goal- to create donors! But we’d forgotten our strategy and gotten mucked up in tactics. Always remember a tactic supports a strategy! On their own tactics are a waste of bandwith. We all love new toys but what good is Voltron’s sword arm without the head? Savvy?

@pallanteMichael 😉