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

Ads by Google

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 developers.facebook.com 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.

Ads by Google

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:

print_r($signed_request);

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'] != '127.0.0.1') {   header('Location: https://'. $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);   exit();  }

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:

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

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:

include("secret.html");

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:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&redirect_uri=YOUR_APP_URL_ON_HEROKU

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, and consider adding Pinterest to your strategy too.

Join live MakeUseOf Groups on Grouvi App Join live Groups on Grouvi
Pinteresting Conversation
Pinteresting Conversation
4 Members
Can't Live Without WhatsApp
Can't Live Without WhatsApp
6 Members
Facebook Addicts
Facebook Addicts
8 Members
Instagrammer Central
Instagrammer Central
2 Members
Top Twitter Tips
Top Twitter Tips
4 Members
Hot Social Apps
Hot Social Apps
6 Members
Ads by Google
Comments (22)
  • Maulik

    heroku is no longer free now !

  • Mark

    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

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

    • Mrak

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

  • Ravi Shanker Reddy

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

  • JB WU

    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

      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

  • Mark

    Excellent work!

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

    • MakeUseOf TechGuy

      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

      Ok, good solution! Thanks

Load 10 more
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.