Blog

How to use a Fan Gate on your Iframe Tab to Hide Content until Someone ‘Likes’ Your Facebook Fan Page

Back in February we released the tutorial ‘How to Hide Content until Someone ‘Likes’ Your Facebook Fan Page’ for FBML Facebook Fan Pages. With how rapidly Facebook changes the way things look and operate, we have been doing the same when designing for Facebook. The February tutorial explains how to use a Fan Gate to reveal specific content only to those who ‘Like’ your FBML page. Since FBML has basically become extinct and will soon be phased out completely the new current method for creating Custom Fan Pages is the Iframe method. Creating a Fan Gate for the Iframe method differs greatly from the old FBML method. In this tutorial we will teach you the correct way to setup a Fan Gate for your Custom Facebook Iframe tab to show and hide content to Fan and Non-Fan users.

*PLEASE NOTE: The web is constantly changing and while we are currently using HTML5 on all of our projects not everyone is, for this reason we will still use the HTML that most are familiar with in our tutorials. If you are currently using HTML5, you can easily adapt this tutorial’s code to reflect the new and improved HTML5.

Before You Start

Before getting started on this tutorial you should currently already have a Custom Facebook Iframe Tab already set up for your Facebook Fan Page. If you do not already have one set up, complete our previous two tutorials ‘How to Set Up a Facebook Application for your Custom IFrame Tab’ and ‘How to Create a Custom Facebook IFrame Tab’. After completing these two tutorials you should have a fully functioning Facebook Iframe Tab and your code should look like the code below, which will be the basis for this tutorial.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YOUR PAGE TITLE HERE</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

<base target='_blank' />
</head>

<body>

<div id="container">

  START YOUR CODING HERE

</div>

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'INSERT YOUR APP ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});

window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>

</body>
</html>

Step 1: Download and Setup Facebook PHP

In order to retrieve information from Facebook on whether or not the user is logged in and has ‘Liked’ your Facebook Fan Page you will need to download the current Facebook PHP file and set it up for reference. You can download the most current version here https://github.com/facebook/php-sdk, after you download the zip file, find the facebook.php file. Copy and paste this file alongside your current Iframe files. Next open up your index.php file, make sure your file has a .php extension, if it does not make sure to change it now. Copy the following code below and paste it at the absolute top of your file above the :

<?php
require 'facebook.php';

$app_id = "INSERT YOUR APP ID HERE";
$app_secret = "INSERT YOUR APP SECRET HERE";
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));
?>

You will need to change two items in the code, insert your Iframe tabs specific ‘APP ID’ and ‘APP SECRET’, these can be found by visiting your Facebook developer page. Also make sure that the path to the facebook.php file is correct.

Step 2: Set Up the PHP Variables

The next step is to set up 2 PHP variables that will retrieve the appropriate information from Facebook about the user’s status. Update the PHP code from Step 1 with the following two lines of code:

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

Your PHP code should now look like this:

<?php
require 'facebook.php';

$app_id = " YOUR APP ID";
$app_secret = " YOUR APP SECRET";
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));

$signed_request = $facebook->getSignedRequest();
$like_status = $signed_request["page"]["liked"];
?>

The first variable, $signed_request, simply checks whether or not the user who is visiting your Fan Page is actually signed into Facebook. The second variable, $like_status, takes the first variable and uses it to find out whether or not the signed in user has ‘Liked’ your Facebook Fan Page.

Step 3: Using the Variables in a Conditional Statement

We now know whether or not the current visitor ‘Likes’ your Fanpage, let’s now use this information to build a conditional statement to power the Fan Gate. Copy the following code and paste it inside your ‘container’ DIV in your HTML code:

<?php if ($like_status) { ?>
FAN CONTENT HERE
<?php } else { ?>
NONFAN CONTENT HERE
<?php } ?>

This is a very basic conditional statement; it simply states if the user has ‘Liked’ the page do this, otherwise do this instead. The content under ‘if ($like_status)’ is revealed to viewers that have become a fan of your page. If viewers have not become a fan of your page, then they will see the content under ‘else’. You should now have a fully functioning Fan Gate on your Custom Facebook Iframe Tab.

Bonus Step: Using a ‘Like’ Button on your Iframe Tab

When using a FanGate on your Facebook Iframe Tab, it is best to have the ‘Like’ button readily available within the design. This way your viewers do not have to scroll upward to find the ‘Like’ button. Thankfully, Facebook provides simple coding to add a ‘Like’ button to any website.

Get your Facebook ‘Like’ button plugin code here http://developers.facebook.com/docs/reference/plugins/like/. While filling out the necessary information to complete the look of your ‘Like’ button, be sure to use your Facebook Fanpage URL. After you grab the final code, place it anywhere in your Facebook Iframe Tab code where you want it to show up. Also, you do not have to include the Facebook JavaScript code that is referenced at the beginning since we are already communicating with Facebook through other methods.

Now that you have a ‘Like’ button inside your actual Facebook Iframe Tab coding there lies one very big problem with functionality. If a visitor uses the ‘Like’ button inside your actual code, only the ‘Like’ button updates and shows that the visitor has ‘Liked’ the page. This is a problem because the page needs to refresh on ‘Like’ to show the Fan content, which means the user has just ‘Liked’ your page but is still stuck viewing the Non-Fan content. So in order to get our ‘Like’ button synced up with our Fan Gate and make it all work properly we need to force the page to refresh when a user clicks the ‘Like’ button. Copy the following JavaScript code and paste it before the body end tag:

<script>
FB.Event.subscribe('edge.create',
function(response){
top.location.href = 'FACEBOOK URL TO REFRESH';
});
</script>

You will need to insert the full Facebook URL to the tab containing the ‘Like’ button so that the proper URL is refreshed and the Fan Content is shown. The URL should look something like this:

http://www.facebook.com/yourfanpage?sk=app_###############

Complete Code Including Bonus ‘Like’ Button JavaScript:

<?php
require 'facebook.php';

$app_id = " YOUR APP ID";
$app_secret = " YOUR APP SECRET";
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));

$signed_request = $facebook->getSignedRequest();
$like_status = $signed_request["page"]["liked"];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YOUR PAGE TITLE HERE</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

<base target='_blank' />
</head>

<body>

<div id="container">

<?php if ($like_status) { ?>
FAN CONTENT HERE
<?php } else { ?>
NONFAN CONTENT HERE
<?php } ?>

</div>

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'INSERT YOUR APP ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});

window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>
<script>
FB.Event.subscribe('edge.create',
function(response){
top.location.href = 'FACEBOOK URL TO REFRESH';
});
</script>

</body>
</html>

Demo

Click Here to view one of our pages in action.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.