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.
You miss oauth: true; in FB.init.
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.
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!
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?
Please recheck all of your code, something is missing, can’t tell you for sure without actually seeing it.
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.
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"];
?>
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.
This is not working for me… after people Like, it reload the same non-fan content… any clue what’s happening?
Can’t tell you for sure without seeing your page and code.
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!
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.
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.
Pingback: How to Hide Content until Someone ‘Likes’ Your Facebook Fan Page | Daddy Design
Got it working… it was something random with my hosting account that was preventing the page from loading. We’re all good now!
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?
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.
Thank you! We are glad they help you!
…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.
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.
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
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.
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
don’t have it point to .php file, keep it pointing to the directory: domain.com/appdirectory/
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.
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
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?
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!
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
HI Willy,
I am sorry we have not seen this issue before. I will try to look into this for you.
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!
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?
Hi Tom, yes this is true. Facebook now requires you to have a SSL on your server where the app files are located.
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!
I am using wordpress and I was able to make it work by adding the header directly to my template page.
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?
ok i got it, it wwas the vertion of php running on my server… nvm then…
tbw great tutorial
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.
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..
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
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.
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!
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?
is this pare is returning page : href = ‘FACEBOOK URL TO REFRESH
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?
whats not working for you? Still seems to work for us..
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
HI, not sure why it’s not working for you. It is still working for us. You can see a demo here: https://www.facebook.com/socialtoolbar/app_199224793469814
Well, daddydesign, it must have been a bug, because it was really not working. But… it works again. Thanks for posting the link
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
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
I’m not not too sure. I have never really seen a page on a mobile phone before, have you?
@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.
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”;