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

Ads by Google

Android App Facebook Alternatives Intro   Like To Unlock: How To Build A Basic Facebook Fan Gate Without Paying For HostingLove 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.

Ads by Google

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.

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

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

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

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.

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

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.

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

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):

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

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)

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

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:

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

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:

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

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.

Ads by Google

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

21 Comments -

macwitty

Great guide! Even if I’m a bit tired of this “gates”

Jared Forkner

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

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

Ana

Please, how do I fix that? :(

MakeUseOf TechGuy

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

Jared Forkner

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

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

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

Bastien

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 “https://www.facebook.com/dialog/pagetab…” 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 :
http://stackoverflow.com/questions/7382621/facebook-api-error-code-191 (2nd answer)

MakeUseOf TechGuy

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

Rick

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

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

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

Ravi Shanker Reddy

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

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.