Internet Social Media

Like To Unlock: How To Build A Basic Facebook Fan Gate Without Paying For Hosting

James Bruce 15-03-2013

facebook fan pagesLove it or loathe it, everyone and their dog is on Facebook nowadays; so like anything that’s popular in life, it has been utterly subverted by marketing types. One incredibly effective use of a Facebook hosted brand page is to incentivise people to like the page by creating some secret members-only content; commonly referred to as a “fan gate”. This is filled with exclusive videos, downloads or perhaps a shopping coupon – we use one here at MakeUseOf to give our fans easy access to all the current competitions.


This kind of basic Facebook app was relatively simple to create in the past, but Facebook now requires all page tab apps to have a secure version – an HTTPS access url – but that’s another $100 a year on top of your existing hosting costs for your site. Even if you run a small e-commerce store, you might use PayPal as a payment provider and therefore have no need of SSL certificates. But worry not, as Facebook has also partnered with Heroku – a cloud hosting company – which means you can create your own basic Facebook app, and host it for free, on a secure server. Want to know more? Read on as I make a basic Facebook fan-gate page tab app, hosted for free, on Heroku.

Register as a Developer

Before making any apps, you’ll need to be a registered developer. Go to to get started, and click the green Register button on the top right if haven’t already. You do need a phone number to register, but otherwise it’s free.

facebook fan pages

If you’re already registered, great – click Apps on the top toolbar to get an overview of your current apps.

facebook fan page


Create a new app

Here’s where the fun starts. Click on Create New App. The naming doesn’t really matter, but obviously choose something relevant. The namespace field will be appended to your fan page URL when the user clicks on that tab; you can leave it blank, but then they’ll see the app ID in the URL instead, which is a little uglier. The namespace must also be unique, so don’t even bother with something like “testapp” or you’ll get an error. Finally, check the box that says you want free hosting from Heroku.

After filling in the captcha you’ll be invited to choose the type of hosting you want from Heroku – select PHP, and accept. Facebook will automatically create a new account for you at Heroku if you don’t already have one, and pre-populate the URL settings in your basics, which is nice of them. In fact, it’s very hard to mess this step up.

facebook fan page

From the app details page, you would also want to set the type of app to be a “Page Tab”, and ensure the relevant URLs are entered there too – again, this should be automatic. Then save.


facebook fan page

Heroku First Steps

When completed, you’ll get an email from Heroku with details of how to change your password, and download the Heroku “toolbelt” for your system. For those of you not familiar with Heroku, it’s not a traditional host in the sense that you can login to an FTP address and upload files; instead Heroku works with Git, a version control system. Once you have the toolbelt installed, you first need to clone the site to your local drive – this gives you a directory that’s a mirror of what’s hosted on Heroku. Whenever you make changes to these files, you sync them all back again to update Heroku.

The instructions to do this first sync are contained within your welcome email, and it’s a simple one-line command unique to your hosting address – just copy and paste from the email. Your hosting URL is completely arbitrary – in my case it was dry-woodland-7743 – it’s randomly generated and doesn’t matter at all because users won’t see it. Open up the newly created directory, and take a look around.

Heroku has put in quite a lot of functionality, but we don’t need most of it. Open up index.php and take a look around. Find the following lines near the start of the file:

$facebook = new Facebook(array(
 'appId' => AppInfo::appID(),
 'secret' => AppInfo::appSecret(),
 'sharedSession' => true,
 'trustForwarded' => true,

and immediately after that, copy in these:

$signed_request = $facebook->getSignedRequest();
$liked = $signed_request['page']['liked'];

Don’t worry if this is all too complicated for you – I’ll give you a finished template soon. A signed request is sent to your app from Facebook which includes some information about the user – whether they have admin access and whether they have liked the page or not. If you want to know precisely what is sent, add the following:


and you’ll get a full printout of the signed request object.

At this point, I should admit that I was having real trouble getting the signed request working – it appeared that Heroku was stripping the data on page load, and it was only after loading the JS API (a good 10 second after the initial page load) that the page would refresh and indicate the correct “liked” status. Thanks to this Stack Overflow question, the solution appeared to be stripping out the code that enforces HTTPS for unsecured users. Delete the following block of code at the start of the template:

// Enforce https on production
if (substr(AppInfo::getUrl(), 0, 8) != 'https://' && $_SERVER['REMOTE_ADDR'] != '') {
 header('Location: https://'. $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);

Now, when the page is loaded, you have a Boolean variable – that’s a true or a false – which tells you whether the user has liked the page or not. You can use this with a simple if statement to show either content a or b:

 if( $liked ):
 //this is your secret content
 else :
 echo('not a fan ') ;
 //this is shown to potential fans

Place that just after the opening <body> tag in index.php. Now, if you’ve previewed your page on Heroku, you’ll notice it has an awful lot of additional functionalities, showing pages you’ve liked, buttons to post updates etc – we don’t need any of that really, so I stripped it all out including the JavaScript SDK for Facebook, leaving only the CSS and our fan-gate. Here’s the stripped down code I ended up using (this is an image – copy paste from PasteBin if you wish):

custom facebook fan page

You should edit the sections that say “not a fan” and “fan” to contain your default and secret content respectively. If you prefer to keep your content in a separate file, use:


to import external files.

Sync With Heroku

Once you’ve made all the necessary edits to your file, you need to sync back up with Heroku – we do this by “pushing” our local copy to the “master branch” at Heroku. Making sure you’re in the correct directory from the command line, type:

git commit -am "changes messages"

(you can replace changes message with a note to yourself of what changes you actually made this time – it’s good practice to keep these records)

custom facebook fan page

and then

git push heroku master

Wait for the command to finish, as it may take a while.

Final Step: Add the App To Your Page

Now that the app is built, we need to actually add it as a tab to your brand page. Curiously, this is done using a specially crafted URL:

Replace YOUR_APP_ID with the ID listed on your app details, and YOUR_APP_URL_ON_HEROKU with the URL for your Heroku hosting. Loading this special URL will then initiate the “add to your page” dialog, from which you can select the right brand page to add your page tab to.

Then hey presto – it’ll be a new button on your page, like this:

custom facebook fan page

As you can see, we haven’t specified an image for the tab yet so it’s left as default – you can do this from your app details page. That’s basically it though; if you load that tab, my replacement index.php will either show you as a fan or a not fan. Or whatever you customized it to show:

facebook fan pages

I’ll admit – this process was harder than I expected, but it does completely avoid the need to host anything on your own server or get SSL-certified. If you have any questions or issues, ask away in the comments and I’ll try to help out. If the comments are closed, head on over to our Answers site; and please, if you found this tutorial helpful, do share it on your favourite social network. Also, you’ll probably want to check out our free, complete guide to social media marketing Your Guide To Social Media Marketing Right now, there is an onslaught of both people and companies turning to social media outlets. The competition is fierce, and no company can waste time or money doing it wrong. Read More , and consider adding Pinterest The Unofficial Pinterest Guide This Pinterest guide will quickly show you how to use Pinterest and all of its features. This guide outlines everything there is to know about Pinterest. Read More to your strategy too.

Related topics: App Development, Facebook.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Maulik
    January 8, 2015 at 1:05 pm

    heroku is no longer free now !

  2. Mark
    August 31, 2013 at 11:39 am

    Hi - I want to allow access to an mp3 for fans. I've include the url point at the mp3 on an external site but the page is blank when I test it?

    • MakeUseOf TechGuy
      August 31, 2013 at 12:18 pm

      You would need to give me a URL I could check...

      • Mrak
        August 31, 2013 at 3:28 pm

        Thanks. It was the hosting web site rejecting the request. Now fixed. Great work by the way. Saved me a lot of time.

  3. Ravi Shanker Reddy
    August 27, 2013 at 7:28 am

    Thankyou So Much.. This Helped me a lot!!

  4. JB WU
    August 21, 2013 at 11:49 am

    Hi, James,

    I'm a novice and decided to try to learn this. I've been following your instruction till this:
    Open up the newly created directory, and take a look around.

    I'm working on the git bash windows and do not know where to find the directory and how to open up.

    Would you be able to tell me please? (I have no background in coding thought I follow pretty well so far:))

    Thanks and kind regards, JB

    • James B
      August 21, 2013 at 1:14 pm

      I'm afraid I can't test this at the moment, but I believe it's something like C:/program files/git/htdocs/your app

  5. Mark
    August 8, 2013 at 3:24 am

    Excellent work!

    Can I use an iframe/external url page with the include function? if so how do I achieve that?

    • MakeUseOf TechGuy
      August 8, 2013 at 2:04 pm

      No, you can't. Include is for adding in a page and processing the code stored locally, but elsewhere. You can still add an iframe as you would on any HTML page though, using iframe tags.

      • Mark
        August 8, 2013 at 11:38 pm

        Ok, good solution! Thanks

  6. Rick
    July 29, 2013 at 1:23 am

    trying to do this self hosted, but can not get anything to display, seems I need AppInfo.php that I do not have. can anyone provide a basic self host index.php file

  7. Bastien
    July 10, 2013 at 11:29 pm

    Wowowowowow !!

    Thanks a ton James, this worked like a charm and you saved me DAYS of work, THANKS !!

    I only had 1 issue : when adding the app to the page with the "" I first had an API Error Code: 191... which turned out to be because you needed backslash at the end of each Heroku URL (on this URL code but also on Facebook app details) ==> check this for more info : (2nd answer)

    • MakeUseOf TechGuy
      July 11, 2013 at 8:01 am

      Great tip, thanks Bastien. In my case, the URLs were added automatically though - with a slash. Didn't this happen for you?

  8. Jared Forkner
    March 20, 2013 at 1:20 am

    so I figured out how to do the push... But I can't figure out where to put the HTML files that I upload.

    • MakeUseOf TechGuy
      March 20, 2013 at 1:28 pm

      Put them into the working local directory, but then you have to add them to the tracked repository by using the command "git add somefile.html", then do your commit.

      • Jared Forkner
        March 24, 2013 at 9:34 pm

        I figured out the commands and such by digging around on the git / heroku help areas. Works now without a stitch!

  9. Jared Forkner
    March 20, 2013 at 12:50 am

    I don't really know much about terminal but I'm getting an error.

    git commit -am "changes messages"
    fatal: Not a git repository (or any of the parent directories): .git

    What am I doing wrong?

    • MakeUseOf TechGuy
      March 20, 2013 at 1:27 pm

      This error means you're not in the correct local directory, I believe.

      • Ana
        July 20, 2013 at 12:51 am

        Please, how do I fix that? :(

        • MakeUseOf TechGuy
          July 20, 2013 at 1:28 pm

          type "cd " and the name of the directory where your GIT repo is. The name of the package you cloned.

  10. macwitty
    March 16, 2013 at 11:44 am

    Great guide! Even if I'm a bit tired of this "gates"