Loading...

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.

Leave a Comment

66 comments
Avery
Avery

This tutorial is awesome! I tried to set up a facebook fan gate for my client and found this blog. Followed all 3 tutorials and it works like a charm. Thank you so much!

Barry
Barry

Hi, all good but I only get the non fan page even after the page has been liked, I printed the value of '$like_status' and it's returning null. I have the facebook.php and base_facebook.php in the root directory, can't think what else could be causing it, I have set the app_id & app_secret correctly. I have read previous posts but not found a solution.

Tanner Hobin
Tanner Hobin

Love this post and have used it many times. Thanks for publishing. We're doing a joint promo and need to create a tab that requires "liking" both fan pages from one custom tab. Anyone know of a way to accomplish that function?

Scott
Scott

Amazing work, and they say nothing comes free in life!

matteo
matteo

thanks for the tutorial, i got a newbie question, how to implement the "like" button code from facebook: (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); if i already have another for the: FB.init({ appId : '448899301825416', 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(); } i mean, should i go for a fb-root div once and put both scripts under that? or how? thank you very much

Yarmo
Yarmo

Hey there, Is this possible to do on an actual website, not just on a facebook tab??? Because that's really what I need, and I can't find it on the net! Great tut, btw!

JJJ
JJJ

Dear Sirs, Thanx for app but i've got a major problem. When I'm putting code from Step1 and/or Step 2 to index.php, app on facebook turns into blank page. If i delete code from these steps the rest appers to be OK (showing words "NON FAN CONTENT"). PHP seems to be working (tried "echo" - OK) I'm using Heroku free service for FB apps if that matters. I'm a bit lost with that.... Could you help please? What should i fix? Thank you in advace!

Priya
Priya

Thanks a ton for the tut...always has been a live saver!!

Dustin
Dustin

I'm getting the code showing starting at $app_id, "secret" => $app_secret )); all the way to $like_status = $signed_request["page"]["liked"]; ?> at the top of my tab and all the content no matter if it's fan only is showing

borlinio
borlinio

great tutorial, really helped me a lot! I just quickly wanted to share a small thing were I lost quite some time: In the shared source code there is an unneeded space before YOUR APP ID and YOUR APP SECRET. Just make sure you delete it and everything will work perfectly! i.e.: $app_id = " YOUR APP ID"; 05 $app_secret = " YOUR APP SECRET";

siraz
siraz

Hi thanks for sharing this, a really completed and detailed tutorial. Is this possible to apply this mechanism on mobile phone browser... i've try your example with android phone and the url get redirected to the m.facebook.com/4oh4.php?id=256746481021134&_rdr stating that the page not found. Thanks

krishna
krishna

well i cant understand i dont have much knowledge on it,i want to know how to setup fan gate i mean only people who liked our page can view posts ,thanx in advance hope for your reply asap

blocki
blocki

Hello daddydesign, I use this code in several pages and I must say, just like gwk, that it does not work anymore. I had a slightly different code and changed it into your code, but no go... I tried several browsers, but that's not the problem. Do you have a link of a Fan Page where this still works? Thanks, blocki

gwk
gwk

I've noticed the Javascript Like Button redirect you define in the "Bonus Step: Using a ‘Like’ Button on your Iframe Tab" section of this article no longer works. Do you have any suggestions?

shambhu
shambhu

is this pare is returning page : href = 'FACEBOOK URL TO REFRESH

CP
CP

I keep getting this error: "Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /homepages/21/d112329034/htdocs/uticaod/Summertix/facebook.php on line 35" Any ideas?

jesse
jesse

Sirs - you just saved my ass! It's incredibly difficult to find this code that is for the iframe version - not fbml! 5 hours of searching and trying different methods... and in 5 minutes, this is working. Thank you sooo much!

Willy
Willy

I get the fangate to work .. kinda. It works when I am in FB as the admin of the page i put it on. However, if I use another login (FB), I am only getting the NOFAN content. It appears as if FB is not sending the "signed_request" data. When I check request variables and I am logged in as the Apps developer, I am getting the "signed_request" data. When logged in as any OTHER FB user, I do NOT get a "signed_request" back. Any ideas.

antho
antho

Hi. Does anyone know how to fix the error: "for security reasons framing is not allowed"? Thanks for your help! facebook.com/pages/Designledlight/130975577028289?sk=app_391533607525225

Senff
Senff

For some reason, when I put it on one server it works all fine. divlr.com/sf/lgtest/ apps.facebook.com/likegate-testing/ facebook.com/EdelSenff?sk=app_180485125402067 <-- WORKS! yay But!! It doesn't work when I put it on my own (HostGator) server. Then it does show the non-fan content if you go straight to the URL, but as soon as it's added to my Page, it shows nothing: senff.com/facebook/ <-- works apps.facebook.com/likegate-test-senff/ <-- DOESN'T WORK! boo :( facebook.com/EdelSenff?sk=app_318618394859477 <-- DOESN'T WORK! :( Between those two pages, the code is exactly the same (apart from the two lines of app ID and one line of app secret), so what gives....? Raw code of the page can be seen here: senff.com/facebook/index.txt My PHP should be fine, no? senff.com/facebook/phpinfo.php Thanks for your help.

Ross
Ross

ok i got it, it wwas the vertion of php running on my server... nvm then... tbw great tutorial

Ross
Ross

For some reason web i put the php code at the top of the code, the page distapear and don't show anything.... i followed all the instrucctions also double read the entyre post and still nothing..... can you help me?

Tom
Tom

I've tried what you recommend, but apparently you need SSL on your site where the PHP code is hosted. Is this true? Have you had to get SSL for your site where you host the apps?

Willy David Jr
Willy David Jr

Hi, I am getting this error: Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 4864 bytes) in /home/pinoytia/public_html/facebook/facebook.php on line 2 I have everything, from up to bottom, but I think I am the only one who gets this error. Are you familiar with this one? Kindly advise, thank you. Best regards, Willy

Isaac Ben
Isaac Ben

Hi Daddydesign, Wow! Amazing! It took some time, because I used an old app I had created and moved it to iframe. So, when migrating from a FBML app, you must activate the parameter "iframe Page Tab" to make it work! Just in case somebody is facing the same scenario! Really nice blog!

Michelle
Michelle

Thanks so much for the tutorial! I started with the custom iframe tutorial as suggested before completing this one. The content displayed in the iframe until I updated the code from this tutorial to hide/reveal content if my fan page is liked. Nothing displays now. I went back to the app and adjusted the Page Tab URL to using the "domain.com/appdirectory/index.php" file instead of just "domain.com/appdirectory/" I had triple checked the steps in the tutorial and pretty sure I covered them all properly. Didn't see anyone with the same issue in the thread. Any help? Thanks in advance

Dan
Dan

Hi, I got this working with no problem but now I'm trying to implement an email form on my page within Facebook. Do you have any suggestions on how to do this. This would just allow a fan to send us an email directly from our page. I have attempted to do this via php and sendmail but I am not receiving the email. It doesn't give me an error or anything so I'm wondering if this could possibly be a server issue where my html/php pages reside? Just curious as if you have done this yet? Thanks, Dan

Silvia
Silvia

...I've checked several times and it seems to me that I've correctly follwed all the steps, but I keep on showing the same non-fan content inside the iframe...then searching for bugs I've tryied echoing $signed_request and $like_status and I've discovered they're actually empty (?!?)... any suggestion on what I should try to double-check again ? thanks a lot in advance for a little help... S.

metrathon
metrathon

Dude, your tutorials are awesome: concise, easy to read and implement. Not to mention you're offering a great alternative to Wildfire's free (for now) fan gating. I refused to use their app (dont like dependency) so you gave me exactly what i needed. Great job.

Chorazy
Chorazy

@Barry I've the same problem... Any idea to solve?

daddydesign
daddydesign

I am not sure if its possible..If you find out that it is, please let us know!

daddydesign
daddydesign

I'm not not too sure. I have never really seen a page on a mobile phone before, have you?

daddydesign
daddydesign

whats not working for you? Still seems to work for us..

daddydesign
daddydesign

Seems that you dont have a SSL installed on the other server, or your having issues with the SSL/ Once you fix that it should work fine..

MJS
MJS

I am using wordpress and I was able to make it work by adding the header directly to my template page.

admin
admin

Hi Tom, yes this is true. Facebook now requires you to have a SSL on your server where the app files are located.

EURO-SPACE
EURO-SPACE

You need to increase PHP memory_limit with your hosting provider. If you have access to php.ini file, just put/modify this line: memory_limit = 128M Or ask your provider. Cheers!

daddydesign
daddydesign

HI Willy, I am sorry we have not seen this issue before. I will try to look into this for you.

daddydesign
daddydesign

don't have it point to .php file, keep it pointing to the directory: domain.com/appdirectory/

daddydesign
daddydesign

Hi Dan, if you can get a form to work on your website, it should work on your fan page. You can look on the web for many different php form scripts.

Silvia
Silvia

Hello, it's me again :-) I've found my bug and here is what my problem was... just in case someoneelse will experiment it... Basically it makes difference if you close your $app_id and $app_secret between " " or ' ': this don't work: $app_id = 'YOUR APP ID'; $app_secret = 'YOUR APP SECRET'; this works: $app_id = "YOUR APP ID"; $app_secret = "YOUR APP SECRET"; hope it helps... Bye bye and thanks a lot for this very helpful tutorial ! S.

daddydesign
daddydesign

Thank you! We are glad they help you!

blocki
blocki

Well, daddydesign, it must have been a bug, because it was really not working. But... it works again. Thanks for posting the link :)

Michelle
Michelle

Thanks for the reply. I tried both ways with no luck hence the change. May have found out the issue is with our server; i doesnt support the latest version of PHP. We're going to upgrade in the short term so hopefully that will aid my mission :) Thanks again for the help.

daddydesign
daddydesign

Glad you found the fix. We have not needed that file for our pages though. Can you show me where you got the base_facebook file from?

Joao Carvalhinho
Joao Carvalhinho

I found what our problem was... you have to upload base_facebook.php also. It is called from the newer facebook.php file, and if you don't have it in the same directory, it simple stops there. JPC