« PREV: Verde Fan Gate...
ZipRealty Faceboo... :NEXT »

Facebook Fan Gate Iframe

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.

Posted In

Tutorials

66 Comments

  1. Andrei October 6, 2011

    You miss oauth: true; in FB.init.

    Reply
    • daddydesign October 11, 2011

      Thanks Andrei, but it’s not required. We’ve never used it on any of our Facebook tabs and they are functioning with no problems.

      Reply
  2. James October 7, 2011

    OK, Sorry, wasn’t your scripts problem!

    Good to point out though that facebook doesn’t like the page tab linking to the directory.

    The Page Tab URL, has to have index.php after it (in case anyone is having the same issue)

    Great tutorial thanks a lot!

    Reply
  3. Savannah October 8, 2011

    I’m having a bit of a problem implementing this. I keep getting this error:
    Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’

    Any suggestions?

    Reply
    • daddydesign October 11, 2011

      Please recheck all of your code, something is missing, can’t tell you for sure without actually seeing it.

      Reply
  4. Matt October 10, 2011

    So I’ve set everything up (without the like button), but am all I am seeing is the “nonfan view”. when I click like, the page refreshes, but does not show the content in the “fan view”.

    My preview page i’m testing this on is at https://www.facebook.com/pages/GLM-Test-ICS-Michael-M/248575065184869?sk=app_134320126668525

    I followed all of the steps, and even left my main content out of it to make sure it wasn’t making the code stop working.

    Reply
  5. Matt October 10, 2011

    Fixed it.

    Instead of your php code at the top, I found this snippet below and it works now.
    $app_id,
    ‘secret’ => $app_secret,
    ‘cookie’ => true
    ));

    $signed_request = $facebook->getSignedRequest();

    $page_id = $signed_request["page"]["id"];
    $page_admin = $signed_request["page"]["admin"];
    $like_status = $signed_request["page"]["liked"];
    $country = $signed_request["user"]["country"];
    $locale = $signed_request["user"]["locale"];
    ?>

    Reply
    • daddydesign October 11, 2011

      Matt, if you look at Steps 1 and 2, you will notice everything that you have inside your PHP is exactly what we have minus all the unnecessary information. The following variables are useless unless you are doing more complex coding with different signed in information; $page_id, $page_admin, $country, $locale. You’re just running more script than is needed. The two variables needed for the Fan Gate are $signed_request and $like_status, which are the same as ours.

      Reply
  6. Ale October 10, 2011

    This is not working for me… after people Like, it reload the same non-fan content… any clue what’s happening?

    Reply
    • daddydesign October 11, 2011

      Can’t tell you for sure without seeing your page and code.

      Reply
      • Ale October 11, 2011

        Hi, I found out the problem:

        I realized that I was not receiving a signed request from Facebook, which is needed to verify if a user is a fan of a page. After pulling my hair out for awhile, I came across the solution.

        In the app’s basic settings screen, I had entered the path to the tab URL as “http://domain.com/app-name”. For some reason, Facebook requires a trailing “/” or “/index.php” appended to the tab URL in order to return a signed request.

        Once I changed the tab URL to “http://domain.com/app-name/” everything worked like a charm.

        Thanks anyway!

        Reply
        • Chelsea Nicole October 14, 2011

          After following all the steps and then implementing Ale’s last comment [insert the '/' after the tab url] it’s working perfectly. I feel like I have much more control this way vs. using someone else’s fan gate app. Thanks.

        • daddydesign October 14, 2011

          Glad you got it working, we had this information in our tutorial for setting up a Faceook iFrame app here http://www.daddydesign.com/wordpress/how-to-set-up-a-facebook-application-for-your-custom-iframe-tab/. It wasn’t pointed out very clearly so thank you for bringing it to our attention again, we will update our tutorial to make it more clear.

  7. Pingback: How to Hide Content until Someone ‘Likes’ Your Facebook Fan Page | Daddy Design

  8. Dionne October 21, 2011

    Got it working… it was something random with my hosting account that was preventing the page from loading. We’re all good now!

    Reply
    • daddydesign October 25, 2011

      I don’t think you have the refresh code inserted correctly. When I clicked the like button on your FB fan gate page it didn’t refresh and load the new page for me?

      Reply
  9. metrathon November 4, 2011

    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.

    Reply
  10. Silvia November 16, 2011

    …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.

    Reply
    • Silvia November 16, 2011

      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.

      Reply
  11. Dan November 17, 2011

    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

    Reply
    • daddydesign November 17, 2011

      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.

      Reply
  12. Michelle November 17, 2011

    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

    Reply
    • daddydesign November 17, 2011

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

      Reply
      • Michelle November 18, 2011

        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.

        Reply
        • Joao Carvalhinho January 30, 2012

          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

        • daddydesign January 30, 2012

          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?

  13. Isaac Ben December 31, 2011

    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!

    Reply
  14. Willy David Jr January 28, 2012

    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

    Reply
    • daddydesign January 30, 2012

      HI Willy,

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

      Reply
    • EURO-SPACE November 23, 2012

      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!

      Reply
  15. Tom February 9, 2012

    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?

    Reply
    • admin February 21, 2012

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

      Reply
  16. ER February 12, 2012

    Hi where will i put the codes above if im using wordpress? is it on the index.php of the theme folder? thanks! ive been trying to make this work here’s the link:

    http://www.facebook.com/pages/RGstudio/160497030695029?sk=app_351368754887116

    please help! thanks in advance!

    Reply
    • MJS July 11, 2012

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

      Reply
  17. Ross March 1, 2012

    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?

    Reply
  18. Ross March 1, 2012

    ok i got it, it wwas the vertion of php running on my server… nvm then…

    tbw great tutorial

    Reply
  19. Senff March 23, 2012

    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.

    Reply
    • daddydesign March 27, 2012

      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..

      Reply
  20. antho April 5, 2012

    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

    Reply
  21. Willy May 2, 2012

    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.

    Reply
  22. jesse June 7, 2012

    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!

    Reply
  23. CP June 15, 2012

    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?

    Reply
  24. shambhu August 12, 2012

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

    Reply
  25. gwk August 14, 2012

    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?

    Reply
    • daddydesign August 15, 2012

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

      Reply
  26. blocki August 20, 2012

    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

    Reply
  27. krishna August 21, 2012

    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

    Reply
  28. siraz August 29, 2012

    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

    Reply
    • daddydesign August 30, 2012

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

      Reply
  29. siraz September 2, 2012

    @daddydesign , yes i try your demo https://www.facebook.com/socialtoolbar/app_199224793469814 using mobile phones, in my case i’m using an android phones and it get redirected to the m.facebook.com/4oh4.php?id=256746481021134&_rdr stating that the page not found.

    Reply
  30. borlinio October 4, 2012

    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”;

    Reply
« Previous Comments   /   More Comments »

Leave a Reply

Your email is never published nor shared.
Required fields are marked *

You may use these HTML tags and attributes:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. Or subscribe without commenting.