So I spent a grand total of around 7 and a half hours today trying to get Facebook’s latest abortion of an API to give me something a client and I wanted, the term is coined as “like gating” or “fan gating”, making someone press like before they get to the good stuff.

I managed to drill down on how to do this considering they made something incredibly easy, incredibly difficult and convoluted and I need to spread the love because all of the “iframe applications” actually do f*ck all and most of them don’t even give you anything good to work with.

This solution will let you use ANY web page on your website within Facebook as an application.

Step 1

Firstly start by heading to the Facebook Developers website and setting up your account, you’ll need either your mobile phone or a credit/debit card to verify your existence within the human race.

Once you’ve done this you need to head over to the app corner and set up your new Facebook application.

Step 2

Once you’ve created your application you need to set the type, which is at the bottom of the applications page, set the page type to  Page Tab and set the url’s as necessary like the screen grab below. Its worth noting that 30% of Facebook users will HAVE to view this over a secure connection so you’ll need an SSL certificate. Its also worth noting that your URL’s MUST have a trailing slash, for whatever reason Facebook refuses to load it without it.. (well done guys)

 Step 3

This is pretty much where I fell over, the next few steps are a bit “odd”,  But I’m sure you’ll pull through

Once you’ve set and saved your URL’s as necessary you’ll see a link to the left titled View App Profile Page, click this link and you’ll see the url that you put into the previous screen in Facebook’s layout. Cool!

NOW, open a new tab because you need to make a page in which to host this application, head over to the page creation form and create your page. Head back to your application’s page tab and on the left hand side of that screen you’ll see a button that says Add to my Page, if you click this link a new box will pop-up with a list of your pages such as the screen grab below

When you find your page click the Add to Page link, this will spin for a bit then grey out and say added.

Well, we’re making good progress so far! Lets soldier on (get a cup of tea!)

Step 4

Head over to your page tab again and refresh the page (just because), at the top right of the page should be an “edit page” button, click this button and you’ll be taken to a whole new screen of options.

Down the left hand side is a menu, one of the items is “apps”, Click this link and you’ll be presented a list of applications attached to your page. I normally delete all of the ones there (except the one we’ve added, if you deleted yours by accident. Well done, repeat step 3 and don’t do it again) Click the link that says Edit Settings this will pop-up a new window such as the screen grab below

Click the add button, you’ll see it change to “added” you can close this window if it didn’t already disappear and press the View Page button at the top right of the page.

You’ll see underneath your pages profile picture your application’s name appear as a link, if you click this link you’ll see your site appear in Facebook! Cool!

If you wanted to make your application tab the default tab for your page press go back to edit your page and press the Manage Permissions half way down the page you’ll see a drop down labeled Default Landing Tab, change this to your app tab and save.

To add the fan/like gate you’ll need to decode the Facebook signed_request post variable (when Facebook loads the iframe it posts this variable to your page)

Obviously I can’t cater for every language out there but below are a few helpful links to help you out! Good luck on like/fan gating!

•  Coldfusion [edit - I wrote one]
• PHP – $data = json_decode(base64_url_decode(–second element of signed_request–), true);
• ASP.NET