NEW UPDATE: It’s available an effective plugin for WordPress that lets you raise fans on your Facebook fan page in an easy way, read more about it here!
The fan gate is a way to raise fans on your facebook page. A fan gate is an iframe tab on a facebook fan page, this tab contains a small piece of code to detect if the user that is watching the page is already a liker. If the user has already liked your page he will see some interesting content, if he hasn’t he will see a blocked content that tells the user to like the page to unlock the content and see it.
If the blocked content is very interesting you can raise many fans with this method.
This page is a tutorial to help you to create a fan gate for your facebook fan page.
HOW TO MAKE A FAN GATE TAB FOR A FACEBOOK PAGE
1) create a new app here: http://developers.facebook.com/apps
2) fill the section “select how your app integrates with facebook”:
3) fill in the “page tab” fields
As you can see the https secure page is required since the most of facebook users connect to the social network with https urls. So, if you didn’t pay for a certified https url you will see some bad alert or bad response page on your fan page. For example if you want to test my Barattalo Fan gate tab, you will not see anything if you’re using https (since my hosting provider simply block every https calls). So if you want the demo go on your account and disable https in your account security settings. If you have to make a fan gate for a commercial site you must buy an https certificate.
4) create the fanpage.php page on your server in the folder specified in the url tab
5) go here to attach the iframe to a page that you admin: https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_PAGE_TAB_URL
This url will open a page with a dialog to chase the page at which attach your fan gate:
After this step you will be redirected to your page outside facebook. This is only the process to attach the page, so don’t worry if you don’t see facebook, it’s ok.
You can than search for your page in facebook and see that you have your fan gate app attached somewhere here:
6) insert this function in your fangate.php:
function parsePageSignedRequest() {
if (isset($_REQUEST['signed_request'])) {
$encoded_sig = null; $payload = null;
list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2);
$sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
$data = json_decode(base64_decode(strtr($payload, '-_', '+/'), true));
return $data;
}
return false;
}
As you can see this code doesn’t use the facebook api but just decode the request from facebook and find the like value, the facebook request is described here.
7) So, in the fangate.php source you just need that function and this small piece of code with the 2 state behaviour (liked / not liked):
if($signed_request = parsePageSignedRequest()) {
if($signed_request->page->liked) {
echo "This content is for Fans only!";
} else {
echo "Please click on the Like button to view this tab!";
}
} else {
echo "This page is a facebook iframe.";
}
You can add any html, jquery, css code, this is your page, here the complete example for fangate.php:
<html>
<head>
<style>
body {
font-family:tahoma, arial;
font-size:40px;
line-height:60px;
color:#333366;
text-align:center;
}
span {
font-size:120px;
}
</style>
</head>
<body>
<?
function parsePageSignedRequest() {
if (isset($_REQUEST['signed_request'])) {
$encoded_sig = null; $payload = null;
list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2);
$sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
$data = json_decode(base64_decode(strtr($payload, '-_', '+/'), true));
return $data;
}
return false;
}
if($signed_request = parsePageSignedRequest()) {
if($signed_request->page->liked) {
echo "This content is for Fans only!<br/><span> :-)</span>";
} else {
echo "Please <span>click</span> on the <span>Like button</span>";
echo "<br/> to view this tab!<br><span>:-(</span>";
}
} else {
echo "This page is a facebook iframe.";
}
?>
</body>
</html>
Great guide to adding a Facebook like app. Thanks!