Contact Us
  • Customizing your Facebook iFrame Application – Reveal Tabs Fan-gating & Other Cool Stuff

    If you’re NOT on the HyperArts Blog, CLICK HERE!

    IMPORTANT: You have to upgrade your Fan Page to the new layout before the application below will work on your Fan Page. Many Pages will see a big banner at the top of their Page announcing the upgrade. If you don’t, you can click here to upgrade your Fan Page.

    In our previous tutorial on Facebook iFrame tab applications, we looked at how to set custom iFrame tabs on your Facebook Fan Page.

    In this tutorial, we will look at how you can use the information that Facebook passes to your iFrame application when it is loaded to customize the experience of the person viewing the tab. This includes presenting different content for fans vs. non-fans, aka the Reveal tab or Fan-gating.

    NOTE: A basic understanding of PHP is required

    This tutorial will require that you have at least a basic understanding of PHP. If you do not, you can certainly copy the code from this tutorial and use it, but it may be difficult for you to modify the code for your exact needs. We cannot provide support for PHP issues that you may experience since they are outside the scope of this blog.

    There are lots of great resources about PHP on the Internet that can help get you up to speed. I have found the resources at Tizag to be useful as I learned PHP, so you might check them out.

    Facebook’s new iFrame Page Tabs — the signed_request variable

    When a Facebook user clicks on your “tab” in the left-column navigation, Facebook loads your page via an iFrame, which embeds your content into the Facebook page. While Facebook is loading your page, it POSTs some information about your page to your application index page.

    The information that is POSTed is contained in an encoded variable called “signed_request”. When you decode the signed_request via PHP, the following information will be able to you:

    • The Page ID for the tab that is loading your application;
    • Whether the logged-in user has “liked” this Page;
    • Whether the logged-in user is an admin of the Page;
    • The country of the user;
    • The locale of the user.

    Decoding signed_request data with Facebook’s PHP SDK

    In this article we will be looking at how to handle the decoding of the signed_request data using the Facebook PHP Software Developer Kit (SDK) . If your server doesn’t support PHP, you may be able to accomplish something similar using the JavaScript SDK, but that is beyond the scope of this blog post.

    Installing the Facebook PHP SDK

    You can download the latest Facebook PHP SDK here.  Once you have downloaded the file, unzip it (if your OS didn’t already).  The file that we need is in the “src” directory and is called “facebook.php”.  We recommend that you put this file on your server in the same directory your index file resides.

    Loading the Facebook PHP SDK in your index file

    Next, you need to tell PHP to load the Facebook SDK file when your index file is loaded.

    Open your index.php and add this PHP code:

    <? require 'facebook.php';

    Note: If you called your index file “index.html” based on our earlier iFrame Page Tab tutorial, you will need to change the name to “index.php” and also change the file name in your Facebook Application settings (Facebook Integration > Page Tabs > Tab URL).

    Initializing the Facebook PHP SDK

    Next, you will need to initialize the PHP SDK. To do this, insert some additional code into your PHP:

    $app_id = "APP_ID_HERE";
    $app_secret = "APP_SECRET_HERE";
    $facebook = new Facebook(array(
    'appId' => $app_id,
    'secret' => $app_secret,
    'cookie' => true
    ));

    Note: You will need to replace the “app_id” and “app_secret” values with the ones for your application.  You can get these by going to facebook.com/developers.  Under “My Apps” on the right side of the screen, click on the name of your application. You will see the App ID and App Secret values as shown below.

    Using the PHP SDK to decode the signed_request variable

    We are finally ready to decode the signed_request variable that Facebook POSTs to your application.

    $signed_request = $facebook->getSignedRequest();

    We can now access specific values in the array like this:

    $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"];

    You might want to add some “echo” code to display the values of each setting for troubleshooting:

    echo "<br>page id = $page_id";
    echo "<br>page admin = $page_admin";
    echo "<br>like status = $like_status";
    echo "<br>country = $country";
    echo "<br>locale = $locale";

    Using the signed_request variables to create the Reveal / Fan-gating feature

    Now comes the fun part. The most common thing you might want to do is present different content to people who have “liked” your page vs. people who have not yet liked it.

    You can use the variables in signed_request to check if the visitor has liked the Page on which your iFrame tab resides. You do this by testing the value of the variable “like_status”:

    if ($like_status) {
    echo "You like us";
    }
    else {
    echo "You don't like us yet";
    }

    Create Page Tab content based on which Fan Page the app is installed

    Another common use of these variables will likely be to customize an application based on which Fan Page it is installed on. This will allow you to use a single application on multiple Pages by tailoring the output to a specific Page.

    You can test the Page ID like this:

    if ($page_id == '12345') {
    echo "content for 12344";
    }
    elseif ($page_id == '56789') {
    echo "content for 56789";
    }

    You can do similar tests to customize the content based on country or locale or to display specific content only for Page Admins.

    Can I access user data?

    Facebook does not pass any personal information about the logged in user to your application unless they have specifically authorized your application.  If they have authorized your application, their User ID will be passed as part of the signed_request and you can access it in the same way that we accessed the other values above.  Creating the Request for Permissions dialog is beyond the scope of this tutorial, but we might cover that in a future tutorial if there is interest.  Once you have the user ID, you will be able to access whatever information the user gave you access to via the Graph API.

    Download the code

    We have created a ZIP file with the sample code from this tutorial as well as the latest version of the PHP SDK file (facebook.php). You can download it here.

    Troubleshooting

    We will update this section with iFrame app troubleshooting apps as the discussion continues in the comments.

    Check your protocol (HTTP vs HTTPS)
    There is a known issue where iFrame applications contained on Fan Page Tabs appear blank when accessed over SSL (via a URL that begins with https:// rather than http://). This normally happens when a FB user turns the setting at Account Settings > Account Security > Secure Browsing (https) on. It can also happen if you the user goes to https://facebook.com rater than http://facebook.com. The expected behavior is that users accessing the tab over https should see the page listed in the Secure Canvas URL in the Application Setup. The bug is that the page is just blank instead. You can read more, and vote for, the bug at http://bugs.developers.facebook.net/show_bug.cgi?id=15200

    iFrame content not visible when you are not logged in to Facebook
    There was a known Facebook bug that sometimes caused iFrame app tabs to appear blank when the visitor is not logged into Facebook.

    Update: 3/1/11 Most reports seem to indicate that this bug is now resolved in production.

    The Facebook SDK requires PHP 5
    In order to use the PHP SDK (aka facebook.php), you will need to have PHP5 installed on your server. If you are not sure what version of PHP you have, put this in an empty index.php file:

    <? phpinfo() ?>

    Check your URL’s for www
    Some servers are set to redirect “domainname.com” to “www.domainname.com”. If you server does this and you specify “domainname.com” in your Canvas URL in App Setup, the redirection will erase the signed_request parameter and all of your variables will be blank. To get around this, just include the “www” in the Canvas URL. See our previous tutorial for help on application setup.

    Next Steps

    This is just a hint of the powerful new things you will be able to do with iFrame apps on your Fan Page. We hope that you find this useful — we would love to hear about what topics you would like to see covered in future posts in this tutorial series. Just add a comment to the post to let us know!

    Comments

    1. I have tried the above but I find that I am not receiving signed_request at all – $_REQUEST is always empty.

      Does this work for others?

    2. Hi Peter,

      If your application is being loaded into a Fan Page Tab using an iFrame, the signed_request should always be POSTed to your index page. You might want to use Firebug if you are familiar with it. You can see the POST that Facebook makes to your iFrame there.

      Bill

      • Hi Bill,

        Take a look here: http://apps.facebook.com/hlusandbox/

        That is a direct copy of the above example. Firebug etc. and dumping all variables always says everything is empty.

        Another example (slight variation) which first dumps $_POST & $_GET, and second gets the signed_request as per the example above is at:

        http://www.facebook.com/hallyuthai?sk=app_165953813453713

        • Hi Peter,

          I think that I see what the issue might be. It appears that Facebook is doing a POST to your page but is being given a “301 Moved Permanently” response (you can see on the Net tab of Firebug), which redirects it back to your page using the GET command, wiping out the variables that Facebook is passing to you. Maybe something in your .htaccess file is redirecting pages with the word “tab” in them?

          Bill

          • Hi Bill,

            Thanks a lot for that help – made a mistake in the URL for the tab – thereof the ‘tab’ part, and as you discovered the URL for the canvas was set to a location with redirection.

            All fixed and working now!

    3. Peter L :

      Hi Bill,

      Thanks a lot for that help – made a mistake in the URL for the tab – thereof the ‘tab’ part, and as you discovered the URL for the canvas was set to a location with redirection.

      All fixed and working now!

      Great. Glad to hear is working. Something very similar happened to me when I was writing the tutorial, so that issue came to mind.

      Bill

    4. Great article. I was able to use this article to pull content solely meant for those who haven’t liked my page.

      I would like to set the iFrame as my default landing tab, but I’ve noticed that if users aren’t logged in they just see a blank page. Is there a way to show the iFrame to users who aren’t logged in?

      Thanks a lot.

      Jonathan

      • Hi Jonathan,

        You ran across a current Facebook bug – when the user is logged out, they can not view iFrame apps on Fan Page Tabs (they just appear blank). I just added details in the Troubleshooting section above about how to find out more and to “vote” for Facebook to fix it.

        Bill

        • Thanks Bill. I commented on the bug on Facebook. Hopefully they’ll get this figured out soon.

          • Okay guys so this is a bug and is indeed being worked on by Facebook or has it been fixed? I ask because I had my coder create an IFRAMEs tab for me and it worked but whenever I am not logged into Facebook it does not show anything. It is blank.

            Please advice

    5. John Lawlor says:

      Below are the results of my echo statement from above:
      The text in the user id echo is the “like status”
      I get the same results for both “like” states. Thanks for the help.

      page id =
      page admin =
      like status =
      country =
      locale =
      user id = You don’t like us yet 6.41

      • Hi John,

        Since all of the values are blank, the like/don’t like logic isn’t going to work correctly. I would suggest to double-check your App ID and App Secret values in the PHP file and make sure that the facebook.php file is in the same directory as your index file. If you are still getting blank values, it would be great if you could post the URL to your page/tab so that we might be able to help troubleshoot.

        Bill

    6. John Lawlor says:

      Thanks for the rapid feedback — I used the wrong App ID and App Secret values. The new results:
      page id = 195014787192702
      page admin = 1
      like status = 1
      country = us
      locale = en_US
      user id = You like us 6.41

      J:L

    7. John Lawlor says:

      On another note – I have tried to use php files hosted on Amazon S3 but have had no luck with FB iframes.

      Is there any way to use S3 with FB iframes?

    8. John Lawlor says:

      I am a php novice that can’t work out how to display a “you like us image” to the “likes” and a “we live for likes” image when they haven’t liked the page –

      something like this:
      if ($like_status)
      SHOW IMAGE-1

      else
      SHOW IMAGE-2

      Thanks

      • Hey John,

        I don’t want to get too deep into PHP coding, but here is some basic code to do what you want:


        if ($like_status) {
        echo "<img src = 'you_like_us.jpg'>";
        }
        else {
        echo "<img src = 'please_like_us.jpg'>";
        }

        Hope that helps!

        Bill

        • Hi

          another solution for this is

          if ($like_status) {
          include("non-fans.html");
          }
          else {
          include("for-fans.html");
          }

          Make sure both html files are in the same directory where your index.php file resides.

    9. Thank you Bill!

      I have been searching for days literally to find some way of getting page variables for my app. This works PERFECTLY in PHP!!

      Unfortunately, I’m a die hard Classic ASP man and my apps are all Classic ASP. Anyone have any tips on converting this to Classic ASP or even a JavaScript version?

      • Just an update to my comment above, I was able to use this PHP solution to do what I needed and to force people to like. And what I had it do was if the person was a fan, the PHP would redirect to my app which is built in ASP. So, got it working by using the PHP to run the checks then ASP for the actual app. Thanks again Bill for this great post.

    10. John Lawlor says:

      This little bit of code has saved several strands of hair tonight! Thank you for the great article and the code.

      J:L

    11. Is it possible to make direct posts or some sort of scheduled post feed to a page which were only visible to ($like_status) visitors eg in the case of a weekly offer only for fans.

      Rob

      • I don’t believe that is any way to post items on the Wall for just fans of your page. You could build an application where you post your offers and then make that part of the page available only to fans (using $like_status), but they would have to visit the page to see the offers.

        Bill

    12. Bill,

      Do you know of a way to have a lightbox or modal window work using the new iframes? I have tried it and the lightbox stays within the iframe..? I was hoping you had a solution.

      Thanks

      • Hi Brad,

        iFrames by their nature limit content to a specific area of the page. So as you found, you could do a ligttbox, but it has to fit within the iFrame and can’t overlap into the main Facebook page area.

        Bill

    13. I have used the above and it WORKS! I love it! I don’t know much about PHP coding but I found out that you have to put all of your HTML in the echo "...<html>..."; format. Plus, you have to replace quotes with an apostrophe like so: echo "<link rel='stylesheet' type='text/css' href='styles.css' />";

      Pretty cool! I’m using html5 with java scripting for my facebook page. So in essence my facebook page is putting up an html5 page (w/ html5 video, btw) that uses javascript to pull another web page in…so it is three deep! Plus having the like vs. not liked functionality is expansive!

      I am having a problem though that I hope you coders can solve…if a non-fan likes my page using the downloaded script here, they still have to refresh the page to see the liked content. Is that a facebook bug; or can it be fixed with code?

    14. Actually, it may be that your iframe has to propagate throughout Facebook’s servers since it works flawlessly now; simply after waiting for a while.

      • Hi Phil,

        Glad to hear you got it working! And thanks for the PHP tips — I’m sure they will he helpful for a lot of people reading this tutorial.

        Bill

    15. Thanks for the posts! I have the app all set up with the facebook.php in the same directory as my index.php. I keep getting this parse error:

      Parse error: syntax error, unexpected T_NEW in /nfs/c01/h12/mnt/5825/domains/website.net/html/iframe/facebook.php on line 4

      Any ideas?

    16. any idea how to add a facebook “Like” button inside the iframe (for those that dont like us yet) and have it so that after they use that Like button the iframe shows the “you like us” content??

      Here is the code I have so far


      <div id="fb-root"></div>
      <script src="http://connect.facebook.net/en_US/all.js"></script>
      <script type="text/javascript">
      window.fbAsyncInit = function(){
      FB.init({
      appId:'<?= $FB_appId ?>',
      session:{},
      status:true,
      cookie:true,
      xfbml:true
      });
      FB.Event.subscribe('edge.create',
      function(response){
      top.location.href = 'http://www.facebook.com/WebmasterCMS?sk=app_<?= $FB_appId ?>';
      }
      );
      };
      </script>

      <fb:like
      href="http://www.facebook.com/WebmasterCMS"
      layout="button_count"
      show_faces="false"
      width="120">
      </fb:like>

      for some reason it does not reload the page as “liked”

    17. Raisun John Sunny says:

      I created a new app, and followed your instructions to add it to my fan page.
      These are my problems:
      1. When i click on the tab it redirects to the http://apps.facebook.com/i_want_to_quit/ and then for some reason again redirects to the site in which the files are kept http://iquit.co.nr/iquit/

      2. Second no values are displayed
      page id =
      page admin =
      like status =
      coutnry =
      locale =

      3. I tried changing the tab name to “I wnat to quit”….but it still shows “My Custom Tab”.

      Please help as it is important.

      Here are some of the details u might require.
      Site URL http://iquit.co.nr/iquit/
      Canvas URL http://iquit.co.nr/iquit/
      Canvas Page http://apps.facebook.com/i_want_to_quit/

      I have edited it a hundred times, but now it does not allow me to edit the app settings. Nothing seems to change.
      Please help.

      • Hi Raisun,

        Can you post the link to your Facebook Fan page to help with troubleshooting?

        Bill

        • Raisun John Sunny says:

          Hi Bill
          I apologize for a mistake I made in my statement.
          I mistakingly wrote fan page. I am actually trying to launch the app from my “application profile page”. From there when I launch the app it starts redirecting. Also clicking on the Go to App gives the same result. As of now its still under construction and I haven’t added it to any fan page.
          The same thing happens when you use the Canvas Page.
          Don’t know what I am missing here.
          Please help if possible
          With Regards
          Raisun

    18. Hi

      Used the code file supplied and added some Liked and non-Liked content and the page displays the non-liked content ok but all the time.

      The check output shows the following even to me. As the admin I have also liked the page and show in list but it would appear not to be picking up the link status (see below echoed output) to display alternative content:-

      page id = 105005222880063
      page admin = 1
      like status =
      coutnry = gb
      locale = en_GB

      Is it because liked the page before upgrade although have unliked and liked again with no change.

      Anyone else seeing this?

      • Hi Rob,

        The variable $like_status should be set to “1” if you have liked the page where the application is installed. You might want to double-check your PHP code that is setting that variable.

        Bill

        • Hi Bill,

          The PHP code is a direct copy of the sample file in your download:-

          $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"];

          Took whole file and dropped in html for non liked status. Can’t see anything wrong with it!

          Here’s the page with echoed status:-
          http://www.facebook.com/pages/webmedia/105005222880063

          Can you test it?

          regards
          Rob

          • Hi Rob,

            It looks like you fan page hasn’t been updated to the new format yet. Check out the “Important Note” at the top of the tutorial to get that set up and then the application should work. Once you page is upgraded, the tabs will be on the left, which is an easy way to tell the old format from the new format.

            Bill

        • Hi Bill

          Just done as you suggest and it is fine now! Thanks for testing!

          Thought had upgraded as when got the original notice used the link provided and was able to Use Facebook as Page.

          The tabs were showing on the left so assumed all had gone to plan and after March 12 would become the norm.

          regards
          Rob

          ps now just have to go and update the content!

        • Hi Bill

          Don’t know what is going on but after doing as suggested got the liked message but now when using Facebook as Page when the left tab link is clicked still getting non-liked data.

          Sorry, but could you check again and see what displays; there should be no image block showing.

          regards
          Rob

          • Hi Bill

            An update. It appears that if you are browing the page as a user, having liked the page, you get the correct data.

            However, if you click the link on right ‘Use Facebook as “PageName”‘ and then view the tab you are always given the like_status = 0 data.

            Is this a bug, as would have thought that as page owner/admin, and having liked the page using personal profile, you would get the like_status content when using page.

            Or, maybe I’ve just missed something!

            regards
            Rob

    19. Hello,
      Thanks for your great and easy description, got it up and running.

      i wonder why u write that …
      echo "<br>user id = $user_id";

      there is no user_id in the sent request!

      echo "pre"; print_r($signed_request);

      is it possible to not get only the page id, but also ONE hint what user is behind the visitor?

      Max

      PS: Facebook is crazy by itsself sometimes if u like and unlike a page, it not always shows the correct status (on all of the site’s pages it shows the “i like” button but if u click on it it shows a sign “u are already connected).

      • Hi Markus,

        You caught an editing error on our part. Facebook does actually pass the User ID as part of the signed_request, but only if the user has authorized your application. I decided to remove that part from the tutorial since displaying the Request Permissions dialog requires a lot more explaining.

        Bill

        • Alright, thats what i thought ;-) without authorisation u cannot get any useful information (Language and country, except IP adress, etc..) regarding the visitor.. bad for data harvesters, good for users, so thumbs up :-)

    20. Joining the fun of learning how to set up custom tabs with iframes.

      I’m also running into this issue w/ no values showing up in the id fields:

      http://www.facebook.com/pages/MicroArts-Development/113528355326941?sk=app_132489196821678

      Any help is appreciated!

      • Hi Michaleen,

        It looks like your server is redirecting the POST that Facebook makes, which is causing the variables to get lost. It looks to me like they are trying to POST to worldsbestcatlitter.com but are being redirected to http://www.worldsbestcatlitter.com. Try changing your canvas URL to include the www part and hopefully the issue should be resolved.

        Bill

    21. I’ve been testing this procedure with the test files provided above. The php files are hosted on a server that has PHP v4 (which could be the problem). I get a blank page, nothing on it. As a test, I added

      echo “Test php page for Facebook.”;

      And that shows up fine, but anything after that regarding the Facebook lines of code don’t show up.

      Any ideas?

      • The PHP SDK requires PHP5, so most likely is is causing an error on your PHP4 server, which is causing the blank page if error reporting is turned off.

        Bill

    22. I just wanted to give you guys some examples I’ve been working on. Some likes would be super; since I am trying to get that all elusive domain name without the number…http://www.facebook.com/pages/LocalDominate/114166838625032 I hope this is okay since it is an example of what we are all sharing.

    23. Raisun John Sunny says:

      Bill Dailey :
      Hi Raisun,
      I’m afraid that I’m not clear on the issue. The canvas URL above returns a “not found” error. This tutorial is really about how to add a tab to a Fan Page. You might want to try the general Facebook Developer Forums at http://forum.developers.facebook.net/ to see if somebody can assist.
      Bill

      I tried but nobody cud. I have fixed the first problem. Let me explain a little bit. I am using a free web hosting 0fees.net. Unfortunately facebook did not allow to add this url. So I used co.nr to redirect to the 0fees.net. I guess that is why my values are blank. What can I do?

      • Hi Raisun,

        Yes, the redirect is probably the issue since it would wipe out the info that Facebook is POSTing to your page. You will probably need to get a web host that FB is OK with and then use the direct URL.

        Bill

    24. Bill – you are a genius – thanks so much for the help!

    25. Hi

      I would like to drag your attention to a bug, we faced it while working for a client. If user is accessing facebook over secured https protocol he won’t be able to access the iframe app (tab using iframe) if you haven’t defined secured canvas in setting and in order to define secured canvas you should have https://… reference.

      Thanks

      • Thanks for the tip. Do does it work for you when you define a https:// URL in the Secure Canvas URL field? I have seen comments online that it doesn’t work all the time so I’m curious if it works for you.

        Bill

        • There is another current show stopper bug that makes the iframe canvases not work with https at all. I am really mad about this since my contest is live right now and people can’t enter it. I couldn’t have ever worked the way they have it, so they must HAVE NOT EVER TESTED IT. Crazy! Who’s running things over there.

          • Thanks for the info Dave. I just added info about this FB bug to the Troubleshooting section of this article. Hopefully everybody will “vote” for the bug so that it may get a bit more attention from Facebook.

    26. There is a missing semi-colon at the end of echo “content for 56789″…

      I understand this is something we replace with our own content, but, for testing it was frustrating to figure out why I was getting the error 500, until I noticed the missing ;

    27. Michaleen Craig says:

      Bill –

      One more question. What are you doing for forms w/in iframes? Javascript validation? AJAX validation?

      Also – what do you NOW use to ‘share this tab’ – the same code you’d use on a website?

      Thanks!

      • Hi Michaleen,

        You can use any standard web page technologies within the iFrames so the usual JS should work fine.

        On the second question, Tim will be writing a post soon about how to incorporate all kinds of fun Facebook tags into your tabs. Stand by!

        Bill

    28. Hi
      Thanx for the great example.
      I was wondering how easy it was to extend this example to make the user choose which var to send to the server.
      I will explain what i want

      I had a website with users. Now i want a facebook application, where a user can list the things he has on our website, on a facebook tab.
      The thing i have trouble with is suppliying the user with some sort of setting for the app where he can fill in his user id or name he uses on our website, so i know which list to retrieve.

      Hope you can help me.

      Thanx again for the example

      • Hi Roderik,

        When you have an iFrame app that you add to a Facebook Fan Page tab, you can put whatever content on that page and link it to other pages. So in your case, you could display some sort of login form on the index page for the application and then once the user logs in, you could show them customized content from your site.

        Bill

    29. Simone Bonati says:

      I have some problem… the result of

      $signed_request = $facebook->getSignedRequest();

      is

      Array (
      [algorithm] => VALUE
      [expires] => VALUE
      [issued_at] => VALUE
      [oauth_token] => VALUE
      [profile_id] => VALUE
      [user] => Array (
      [country] => VALUE
      [locale] => VALUE
      [age] => Array (
      [min] => VALUE
      )
      )
      [user_id] => VALUE
      )

      where value is some value :). I don’t have [page]… why? where i’m wrong?

    30. In an earlier post it was stated that your html content should be placed within the double quotes of the echo statement and that to get it to display properly to convert all the double quotes in file to single quotes.

      Found there might be an issue when the html contained both double and single quotes particularly in some javascripts which might conflict with each other. It also made the index file quite unwieldy needing to cut and paste blocks of html.

      Tried using the php include() function with two individual files, one for each status, and it all works perfectly or at this stage appears to, even with mixed javascript quotes.

      It also means that the same index.php file can be used for all tabs with only the individual html tab file contents needing changed and update of the index.php app id and secret keys.

      Hope it might be of use to someone else.

      Rob

      • Thanks Rob. That’s helpful. I was trying the include() method was faced with several errors because the fan/non-fan pages were hosted on different servers than the php. So this is an alternate method I’ve used and it works perfectly:

        // Fan content
        if ($like_status) {
        $a = file_get_contents(“http://mysite.com/facebook/fan_special/index_fan.asp”);
        echo ($a);
        // Non fan content
        } else {
        $a = file_get_contents(“http://mysite.com/facebook/fan_special/index_nonfan.asp”);
        echo ($a);
        }

        • Sweet! It always helps when you have someone who knows code! Thank you guys for posting here! I’d be a fan…!

          • Thanks for the great tips guys. Here is another way to showing two different HTML code blocks without having to deal with the quotes issue (if you don’t want to go the include file route):


            <?
            // Fan content
            if ($like_status) {
            ?>

            <p>all my content for people who like me go here</p>
            <p>I can have whatever HTML or JS content I want</p>

            <? }

            // Non fan content
            else { ?>

            <p>all my content for people who like me go here</p>
            <p>I can have whatever HTML or JS content I want</p>

            <? } ?>

    31. Any reason why sometimes when I press the “Like” button the page refreshes and I see only the word “Success”?

    32. I’m having so much fun with this, it’s CRAZY! You’ve got to check out my <a href="http://www.facebook.com/pages/LocalDominate/114166838625032?sk=app_194013563951175">Sample Page 2</a>!!! I’m using a reveal page with lead capture! And if you like the page, you’ll see a full-fledged mobile website. It’s coded as HTML5 and utilizes the Video JS platform for video…plays in every browser on every device! Can you just see how Facebook can be your new “landing” and sales pages? Notice the navigation menu…javascript. I’m using MailChimp on the reveal tab and a php script for the ‘contact us’ form on the mini-site. This is just going to be a barrel of fun!…I wish I knew php and javascript…I’d go nuts! Please visit even if it’s just to see all of the cool stuff…I need the ‘likes’! Thanks.

    33. Hi,

      I’m interested to know how we can get UID of the user. I worked on since 2 days. And the only solution i found, it’s to call permission popup dialog. Not very beautiful like solution and some bugs with IE and chrome.

      Do you find a solution?

      Best regards

      • Hi Lionel,

        As you have found, Facebook doesn’t pass the User ID to your application unless the user has authorized your application. This is by design. I am planning to do a post about how to display the Request Permissions dialog using Javascript in the future, but it will be another week or so before that one is ready.

        Bill

    34. Cool !, the code does fine. but how can I bring ‘auto-refresh’, if somebody like or unlike the tab, it gone blank until it refreshed.

      how we made the page refreshed itself ? or something similar..

      • Hi Denny,

        Sounds like you may have run across a bug there. If you Like or Unlike the page it should refresh automatically and show your content.

        Bill

        • Hi Bill,

          I try with chrome, and it works well, but with firefox, when I go from Unfan to Fan, no problems, but when I do Unlike, it comes blank.

          but no problem, since I don’t mind to much about the unfan part :D

          thanks anyway for the great tips :)

    35. Denny :
      Hi Bill,
      I try with chrome, and it works well, but with firefox, when I go from Unfan to Fan, no problems, but when I do Unlike, it comes blank.
      but no problem, since I don’t mind to much about the unfan part
      thanks anyway for the great tips

      as additional, little weakness, not important though. the iFrame wont show up if the user isn’t login in facebook.

      http://www.facebook.com/pages/Pebisnis-Jalanan/110173965718508 (warning!, non-English :)

    36. I would like to know how to get the “share with friends” button work on the Fanpage or Apps.

    37. Owen McGab Enaohwo :

      Okay guys so this is a bug and is indeed being worked on by Facebook or has it been fixed? I ask because I had my coder create an IFRAMEs tab for me and it worked but whenever I am not logged into Facebook it does not show anything. It is blank.

      Please advice

      Hi Owen,

      Yes, that is the bug described in the Troubleshooting section of this tutorial. Facebook is currently beta testing a fix and are they are hoping to roll it out in the next couple of days.

      Bill

    38. Got this working as part of the Facebook Tab Manager plugin for WordPress, http://wordpress.org/extend/plugins/facebook-tab-manager/

      Thanks for your explanation, made this much easier to tackle.

    39. Denny – this is bug 15495 in the facebook bug tracker. It only has 4 votes so far – vote for it!

    40. Polly Baker says:

      Can I ask, why do you think my page remains blank/empty. If you right click in the empty space and click “Show the Frame” it appears on the server page. My code below as well as the server link where I have the pages hosted. I have facebook.php, index.php, index1.php and index2.php all in the same directory/folder. Any help much, much appreciated!
      index.php

      <?php

      require 'facebook.php';
      $app_id = "143799205684208";
      $app_secret = "c4b2f53e1ff5e38a42ed8c284908fd25";
      $facebook = new Facebook(array(
      'appId' => $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"];

      if($like_status) {
      include("index2.php");

      }
      else {
      include("index1.php");
      }

      ?>

      The server host and Canvas URL I’m using (to see that the image does, in fact, appear there) is: http://www.lcmcm.com/testing/

      I just can’t figure out why the fan page is empty.
      Thanks so much for any help you might offer.

    41. Hi guys, great tutorial, very helpful. However, I’m at a loss to why my canvas is blank? http://apps.facebook.com/africaaway/

      The app itself was/is fine and in working order, but when the PHP (index.php & facebook.php) is included I get nothing. All files are located in the same folder and properly uploaded, I’ve double checked the app settings and everything seems to be in order – OAuth 2.0 is enabled. Server is running PHP 5.0.4. Here’s the code in index.php:

      <?php

      require 'facebook.php';
      $app_id = "(id is actually here)";
      $app_secret = "app secret is actually here";
      $facebook = new Facebook(array(
      ‘appId’ => $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"];

      if ($like_status) {
      include("index2.php");

      }
      else {
      include("index1.php");
      }

      ?>

      • Try changing the “include” to:

        // If a fan is on your page
        if ($like_status) {
        $a = file_get_contents(“http://yourwebsite.com/facebook/home_page.html”);
        echo ($a);
        } else {
        // If a non-fan is on your page
        $a = file_get_contents(“http://yourwebsite.com/facebook/reveal.html”);
        echo ($a);
        }

        • Polly Baker says:

          Thank you, Phil, I appreciate your response here. I tried your code above and unfortunately, still no luck :-( Same as Liam, I have everything as it should be in the app (and if I right click in the blank area, I can open the frame in a new window), the OAuth 2.0 is enabled, facebook.php is in the same directory as index.php and the fan and non-fan pages, my server is running PHP Version 5.2.14.

          The tab name is “Welcome Page”
          http://www.facebook.com/pages/Lisa-Murphy-Example-Fan-Page/151790051544589?sk=app_143799205684208
          Server directory where I have files is: http://www.lcmcm.com/testing/index.php

          I’ve also gone in and taken out the www and then put it back…nothing changed. I’m lost for why it is not working :(

          • Hi Polly,

            I just took a look at your Tab using Firebug (a Firefox extension) and it looks like when Facebook makes their POST to your page at http://www.lcmcm.com/testing/index.php, they are recieving a “500 Server Error” response from your server. Most likely there is some sort of error in your PHP file. If you have access to PHP error logs on your server, that might help in narrowing down the issue.

            Bill

      • Polly Baker says:

        Liam, your issue is identical to mine. I’ve tried everything….just the blank/white screen, but w/Firefox, if I right click, I can open the frame in a new window and it is going to the else statement, or index1.php but it is not appearing within the frame on Facebook. Thanks for your post. I am glad I’m not the only one with this same issue….driving me nutts :-)

    42. Polly Baker says:

      Bill Dailey :
      Hi Polly,
      I just took a look at your Tab using Firebug (a Firefox extension) and it looks like when Facebook makes their POST to your page at http://www.lcmcm.com/testing/index.php, they are recieving a “500 Server Error” response from your server. Most likely there is some sort of error in your PHP file. If you have access to PHP error logs on your server, that might help in narrowing down the issue.
      Bill

      Thank you sooooo much, Bill. Issue resolved!! For future reference, and particularly for Liam above. The issue was two-fold. First, an error on the log brought up that I was missing the style.css. Next, and most important, Fatal error: Call to undefined function hash_hmac() in file location on server, line 771. I HAD TO TURN ON THE HASH MODULE which, for some reason, was set to off. Either your server company can do this or go to command line and vinstall php5 and toggle that module to on. My page is finally working. Made my day :-) Thanks, Bill, and hopefully this info I’m providing can help others too if they experience the same issue.

    43. Guillermo says:

      Bill,

      Thanks for the great article.

      I am having a weird problem. My fan page recognizes if the person is a fan or not and displays the homepage accordingly.

      Within the homepage, the page tells visitor to click to download the coupon, if the person is a fan, they should see the coupon, if the person is not a fan it should ask them to like the page.

      Although the different versions are being displayed for the homepage, the Coupon page shows the Not-Fan version regardless…

      Help please!

      http://www.facebook.com/curtaincallinteriors?sk=app_152771908112353

      • Hi Guillermo,

        Facebook only makes a POST to your index page (as specified in the Application Setup). On that page, you can read the variables in the signed request as detailed in this tutorial. If you then link to another page, you would need to pass anything you need to know to the other page.

        For example, if you have determined that the visitor is a fan, you could pass that info in the URL like this:


        <a href = "coupon.php?fan=true">View coupon</a>

        The easier thing in this case might be to change the code on the index page so that the coupon button is only displayed when they are a fan.

        Bill

    44. This is great thanks for this info and it worked for our facebook page.

      I do have one issue. When a user is not logged in and clicks “Like” and is asked to login, well after login, they are redirected to my wall and not my “you like us” page.
      Any help would be appreciated.
      facebook.com/mmprint

      • Hi Giovanni,

        Not sure what is going on there. On the app pages I have created, when somebody clicks the “Like” icon at the top of the page, the page reloads and shows the “You like us” content. It doesn’t take them back to the “Wall”.

        Bill

        • Bill Thanks for the prompt reply. Could it be caused by my use of “require” instead of “echo” or “include” ? Any ideas on what I can try differently?

    45. Giovanni :
      This is great thanks for this info and it worked for our facebook page.
      I do have one issue. When a user is not logged in and clicks “Like” and is asked to login, well after login, they are redirected to my wall and not my “you like us” page.
      Any help would be appreciated.
      facebook.com/mmprint

      Forgot to mention:

      I have my index file setup to this:

      if ($like_status) {
      require ‘like.php';
      }
      else {
      require ‘non_fan.php';
      }

      and my facebook settings are set to display my app by default.

    46. Octavian Morar says:

      Hello Bill,

      I have been using the information you provide in your articles for quite a while now. At this point I have a small problem that I could really use your help with.

      I am using Root Music’s BandPages application for one of the Faceboko Pages I am administrator on. At the same time I am using the Reveal Tab code you provided with this article.

      Everything works fine with the Reveal Tab, but I was wondering if it is possible to redirect the people to the BandPages Tab rather than revealing hidden content once they hit the Like button.

      Looking forward to your reply.

      Best.

      • Hi Octavian,

        You could use some JavaScript to redirect the page once the user has “liked” your page. Something like:


        <script language="javascript">
        window.top.location.href = "PUT_URL_TO_REDIRECT TO HERE";
        </script>

        Just put in the full URL for your BandPages app and it should work.

        Bill

    47. Hi Tim,
      i have a question, probably a stupid one. Can i add iFrames if i don’t have a web server? Could i use a hosting site?
      Thanks!

      • HI Maurizio,

        Not a stupid question. You will need to somewhere to store the files — it can be any kind of web hosting site that supports POST to a PHP/ASP file. We are actually working on a solution that might help if you don’t have your own web host/server — stand by for an announcement coming soon on that.

        Bill

    48. Firstly, I want to thanks you very much for posting this information, I really appreciate it, it’s saved me hours of figuring it all out.

      I hope you don’t mind me posting this here, but I created a ‘newbies’ guide as there were a few technical bits I didn’t quite get here at first …. this may just save somebody some time: http://www.facebook.com/fastfanpages#!/notes/fastfanpagescom/how-to-create-reveal-pages-using-iframes/115006318576998

      Once again, this is so helpful, many thanks for this information.

      Best wishes, Paul

    49. Lenin Raj Rajasekaran says:

      Hello, I have a question. I have a text box and a submit button in my IFRAME app. When the ‘page admin’ submits this form, I want to send the form data to my server(where the app is hosted) and store the information in the db and later retrieve for non-admin users. How can we do that? Can you cover this in a blog post?

    50. www.newsoftcom.com says:

      Thank you it works great. 

      All the best.

      Ivan

    51. Hi, thanks for this- it was working and then suddenly stopped working. Is this a FB bug, is something happening behind the scenes with FB code?

      When accessing a ‘tab’ directly from the left-side menu, like/unlike triggers the expected changes. When a user lands on ‘tab’, (which is set as default landing area from page settings) a click on like always redirects to the wall instead of the ‘fan side’ or reveal content.

    52. Atanasovetr says:

      hi all, i need some unique info of user
      i need to extract some unique info for each user 
      i have proho contest site and a put into iframe in facebook so i need if uses has already voted to see “you have been voted” 
      thanks a lot and sorry for my english

    53. I use this code “if ($like_status) {
      echo “You like us”;
      }
      else {
      echo “You don’t like us yet”;
      }”
      but it shows “You don’t like us yet” even when I like the page

    54. hello, thank you for your wonderful tutorial. i have couple of questions. first the redirect after the user likes the pages. i created 2 pages one is index.php and the other revealed.php. so i used the code from your tutorial and 

      if ($like_status) {require(“index1.php”);}else {
      require(“index.php”);
      }
      rest of html here

      i used the above code in index.php. it works but the html from the index.php is “outputted” when the user likes the page + the html of the index1.php . this is how i prevent it 

      if ($like_status) {
      require(“index1.php”);
      }
      else {rest of html here}but i dont know if it is the best method.any suggestions?the other thing i noticed is that using the above method when i add links to other pages like . contact.html i can click them and navigate to them but when i hit f5 i go back to the index.php page.thanks

    55. Hi again, i have another question, if you see the source of the facebook page you can find the url of the page in the hosted server . is there a way to avoid that?

      thank you again for your wonderful tutorials

    56. Hi again, i have another question, if you see the source of the facebook page you can find the url of the page in the hosted server . is there a way to avoid that?

      thank you again for your wonderful tutorials

    57. Hi,
      i am very appreciate for your great tutorial.
      now i can authorize who like my page , how can i access to some thing like friend list ,  post on his/her wall , personal information ?
       
      Thanks for all

    58. I created an app here:
      http://www.facebook.com/horizonspeakers?sk=app_114626255309335  it is on
      a facebook place page.  But now when I click LIKE… instead of
      Redirecting to my FAN ONLY content, it asks me if I want to recommend to
      my friends…. then it redirects to the wall.

      How can I correct this ?

    59. Hi.. Thanks for this awesome info.
      I have a small doubt, may be a stupid one. I have a html page hosted in my server that I am calling using a custom app i created at the left sidebar of FB. This is a stand alone page with JS buttons for navigation. Is it possible for me to show content under one button for non-fans and content under another button in the same page for fans. Can I show a gift card when someone likes my page.

      Please advice. Thanks in advance

    60. Hi.. Thanks for this awesome info.
      I have a small doubt, may be a stupid one. I have a html page hosted in my server that I am calling using a custom app i created at the left sidebar of FB. This is a stand alone page with JS buttons for navigation. Is it possible for me to show content under one button for non-fans and content under another button in the same page for fans. Can I show a gift card when someone likes my page.

      Please advice. Thanks in advance

      • If you read this tutorial, that’s what it’s about. I’m not clear on what you mean by “buttons”, but you can use the PHP code to show or hide content from fans and non-fans.

      • If you read this tutorial, that’s what it’s about. I’m not clear on what you mean by “buttons”, but you can use the PHP code to show or hide content from fans and non-fans.

    61. kobe tamsut says:

      hi
      I’m having a bug during creating a reveal tab, I duplicated a working revealing tab that works fine but in the new app I created the reveal tab doesn’t reveal after clicking like – can use some help in that…

    62. There is a known bug where page admins can’t see their own iframe tab contents. I believe this is the bug: http://developers.facebook.com/bugs/278910582136262?browse=search_4e77745b3e6175601149549

      • kobe tamsut says:

        Thanks for your reply Tim, however I don’t think that’s the case, I’ve tested it with other users which are not page admin. same app code (besides the app id and secret) but different reaction… the facebook.php file caused an error, session start so I simply replaced the latest version of it with an older one and the error was removed – might be because of that? though the same version of the file is being used for the original app (hosted on the same server off-course)
        anyhow, i can really use some help on that…

    63. Corey Potter says:

      I got this to work with the code

      if ($like_status) {

      echo “You like us”;

      }

      else {

      echo “You don’t like us yet”;

      }

      But instead of outputting text, I’d like to load another page in the current iframe, or redirect to another page.  How would I do this?  I’ve tried several methods and only found errors.

    64. hey thanks so much! i would like to ask u to talk about how to create a horizontal navbar to our custom fb fan pages!!! thanksssss
      patricia.

    65. hey thanks so much! i would like to ask u to talk about how to create a horizontal navbar to our custom fb fan pages!!! thanksssss
      patricia.

    66. Hi Hyperarts. Do we have to make any changes in this code in order to make it work with the new PHP SDK? In the new file, there are both a base_facebook.php and a facebook.php

    67. Hi Kasper,

      I have not tested this code with the current PHP SDK, but it should work just fine.  Just include the facebook.php file — that file automatically includes the “base_facebook.php” file for you.

      Bill

    68. Elli Vizcaino says:

      This article leaves me a bit confused. It isn’t clear whether what’s stated above will create a reveal tab that can then redirect users to different content once they’ve liked the page and if so, it isn’t clear as to implement that from the above examples. I also noticed there is another article on this site that uses JavaScript redirection, so I am left wondering if one has to implement both the above PHP as well as the JavaScript redirection? Or can one be used in place of another? And are two custom tabs required to create the “reveal” effect/redirection or can it also work with a webpage that offers additional links and have the redirection go to one of those links?

    69. Thank you! That was very helpful!!! i wanted to ask why i can’t see my page as a facebook application it is. I only can see the index.php file from my server’s url, but not through the actual fb application url!
      Thanks again!

      • It sounds like you have your app configured incorrectly.

        If you can add the app tab to your page, then select the tab and right-click in the area where your content should be and select the “view this frame” to make sure your app is pulling in your index page.

    70. Oh… This post just craked me up. This is so mental!!! Facebook has to be the most stupid, anoing, retarded, website ever created. I’ve nver seen a more incoherent, complicated, messy website in my life.

      • Well then, my friend, you haven’t lived!

        Happy trolling….

        • jupiter swan says:

          Sorry, I just don’t see how my comment would be considered trolling as I wasn’t criticizing your article but Facebook’s terrible designing and coding, which provides a dreadful experience to anyone forced to deal with it. If you’ve found my comment to excessive, blame it on the frustration and exasperation caused by using FB.
          As for my spelling, please except my apologies but English is not my first language. The same probably happens to you when you write in a different language.
          Anyway, keep up the good work; we FB users need all the help we can get.

          • Thanks JS. First, your comment was fairly irrelevant to the subject of my blog post. And it was just complaining not supported by any examples.
            If you’ve not seen “a more incoherent, complicated, messy website” then you’ve not visited MySpace.
            I find Facebook to be quite well organized, actually, and not really all that complicated.
            Of course, if you find it complicated and incoherent then you can simply choose not to use it.
            But thanks for your opinion.

            • jupiter swan is not alone to get frustrated with facebook. Facebook’s own forums have grunts from experienced programmers in quite large numbers. If you say it is easy, maybe because you might have tried only simple things to integrate. For developers, there is only one downloadable code – in python. When python developers are in fraction to people developing in PHP, you can see futility of providing code attractive to only few.

              What they could have done (my humble opinion, you may attack it as I logically guessed from response to jupiter swan) :
              Provide an application using PHP-SDK which uses good number of capabilities of application which starts to work out of the box with just defining app id and app secret. People can expand it using it as a starting point. That will result in lot of time saving and frustration of missing out something they have mentioned elsewhere.

              People are looking for help that is how they land on your site. Your assumption they should come with all praise and with certain standard of minimum acceptable literacy is too much to ask. They may be blessed with other capabilities you might not have dreamt of developing in your lifetime.

              I have intentionally not capitalised ‘jupiter swan’ as it is our practice due to increased use of messages online. e.g. we do not generally write ‘you’ but ‘u’. I am not afraid my grammer, punctuation or skills of written communication will be critisized by somebody who starts to play boss to anyone visiting his page.

              Cheers.

            • Hello Terra Firma. Sounds like you’ve got it nailed, my friend!

    71. I am trying to show a few videos to my fans only.
      Are there best practices for revealing videos to fans?
      (i.e. where do I host the videos, what format, what player, etc).

      Any hint is appreciated.

      • Embed YouTube or Vimeo videos. No best practices for showing videos to fans as opposed to non-fans. Make sure they’re appropriate.

    72. kostas krom says:

      i am searching for script which is 3 step. When they like my page then they should share it and then a link will appear.Can i do that?

      • If you’re talking about the quite tired, user unfriendly method of forcing the user to Share your page before they can continue, you can’t and you *shouldn’t* do this. It violates Facebook’s Terms of Service.

    73. Very nice tutorials, really well written and to the point.

      However I got the extra tab’s working and reading html pages correctly. I seem to have problems in the PHP area.

      I seem to get a “Restricted access” message on my fan page.

      What could be wrong here? I have php 5.2.5 running on my server.

    74. A wonderful tutorial!
      As I need to get the user ID, I tried to make use of 
      $facebook->getLoginUrl(array(“redirect_uri”=>”MyFanPageAppURL”));

      However, after giving permission, I found that it would not be refreshed after the user clicking like button.

      Is it a bug from facebook? or I set the redirect url wrongly?
      If I leave the redirect_uri blank, It would redirect to my server but not the fb fan page tab.

      Do anyone have any ideas on it?

    75. Approved

    76. For the life of me I cannot get this to work. It doesn’t seem to be getting any values from the getSignedRequest();

      Here is my code, I am putting the correct values in for the id and secret, I chose to omit them here:
      $app_id,
      ‘secret’ => $app_secret,
      ‘cookie’ => true
      ));

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

      Untitled Document

         

      I am also using an updated version of facebook.php that requires a “base_facebook.php”, any thoughts?

    77. Thomas Petersen says:

      Is it possible to do this without using PHP?

      • You has to be done with PHP. If you’re not a programmer, or don’t want to hire a programmer, you could use a free iFrame page-tab app like TabPress which handles all of the PHP for you.

    78. Thanks for the articles!  They’ve been really helpful!
      My problem is my nonfan and fan content are still not showing up.
       Here’s my code.  I created really basic html files to test the app.  My non fan is called nonfan.html and my fan is fans.html.  Let me know if you see anything wrong with my index.php file located below.  Thanks!
      $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”];

      // If a fan is on your page
      if ($like_status) {
      $a = file_get_contents(“fans.html”);
      echo ($a);
      } else {
      // If a non-fan is on your page
      $a = file_get_contents(“nonfan.html”);
      echo ($a);
      }

      ?>

      • I’m not going to troubleshoot your code, Kevin. This tutorial is pretty clear on how to do it right.
        You should make sure your app index.php page is hosted on a secure server with an SSL certificate, under HTTPS, and that you’ve specified the Secure URL in the app settings. See this tutorial for more info on that.

      • You need to upload all the filed in the src sdk folder in order for to work! I had the same problem and it took me 5 mins to figure it out.

    79. Make sure to check whether your server supports JSON (you need php 5.2 for that). When downloading the latest version of the Facebook PHP SDK you’ll find a few extra files in the zip, these cannot be processed with an older version of php. 

    80. I’m having a problem where I’m trying to grab the page id, but it’s only working some of the time. http://facebook.stackoverflow.com/questions/8312478/facebook-getsignedrequest-not-always-grabbing-page-id

    81. One way to get your fan page’s ID is to click on the profile image in the top left corner.
      In your browser’s address bar, you’ll see a URL similar to this (HyperArts example): https://www.facebook.com/media/set/?set=a.10150107028147468.321340.75033592467&type=1
      In that string, the numbers between the last “.” (period) and the ampersand is the page ID.
      So in this example, the page ID is: 75033592467

      Should work.

    82. Anonymous says:

      i wrote a php fangating program using php sdk, it works fine if the user
      is https enabled, but if the user is http enabled, it is not working,
      how to make fangate work even if the user is http enabled ?

      • You’ll need to troubleshoot your own code, I’m afraid. Ours works fine under http or https, as long as the index page of the tab is hosted on a secure server with an SSL certificate.

    83. Sorry if this seems a simple question, how do I get the app to appear on the page for visitors to see? I have built the basic app which is fine; and I have hosted with Heroku (I can manage GIT okay)…

      http://apps.facebook.com/awebb-new-lookBut I cant seem to associate this with my test business as a tab…https://www.facebook.com/pages/Awebbdesign/182225708540282I cant seem to add the app to Awebbdesign, any help would be much appreciated.

    84. sangeetha bhatta says:

      Thank you for this tutorial. I want to make an app just for my use. And am new to Facebook totally. I followed your instructions. But all the variable values are printed blank, as below.
      page id = page admin = like status = country = locale = You don’t like us yet

      Can you please help?

      • Sorry, Sangeetha, we don’t do in depth troubleshooting of code here. Sounds like something is definitely configured wrong.

        • sangeetha bhatta says:

          Found the bug :). While setting up the app, I mentioned base url without the file name as you have pointed out in your tutorial. Facebook also says to give the base url. But after 2 days of head-banging, I tried full url and it worked !!

          • That’s great, Sangeetha. And thanks so much for sharing your experience here, so that others can benefit from your discovery. I wish more folks who show up and ask questions would follow up with how they resolved things.

    85. I have a weird problem. I am a webmaster that sets up Miva Merchant E-commerce sites. I have successfully used this information to create several similar apps to connect my client’s stores to their FB Fan pages. I continue to use the same instructions, codes, etc, as they work, up until this last time.

      Everything works great, expect the discount portion. That doesn’t work.

      Successes using the same exact coding in Miva Merchant, php files, etc – Shop Now Tab
      –https://www.facebook.com/pages/The-Style-Away/237508256273749?sk=app_250722591642795
      –https://www.facebook.com/pages/Shellys-Jewelry/132970608748?sk=app_194038857344699

      If you hit LIKE and then add something to the basket, then click the BASKET link, you will see the discount.

      On this latest store, the discount message show up and goes away, per clicking the LIKE button, so we know that is working, but haven LIKED the page, you do NOT get your discount on the Basket page.

      I have gone over and over and over and over all my codes, the PHP version 5.3.8, until I am blind. The only thing that has changed between succes and failure is the way that you add the tabs to the Fan pages. I followed your good new instructions and it seemed to work fine.

      Please tell me you can help????????????

      PS – code for discount:

      $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”];
       
      if ($like_status) {
      $varpath = “https://www.pinewoodpro.com/CTGYFB.html?affiliate=friends&fb=1″;
      }
      else {
      $varpath = “https://www.pinewoodpro.com/CTGYFB.html?affiliate=notfriends&fb=1″;
      }

      if ($like_status) {
      $invite = “”;
      }
      else {
      $invite = “Like Us to get 5% off on the Basket Page!”;
      }
      ?>

    86. Holly, If you’re using the exact same PHP code and it’s not working, I can’t really help. Sorry! Sometimes it can just be a Facebook bug.
      You might doublecheck all your app settings on the Developer Page. Facebook has been introducing some new options and parameters, so I’d doublecheck those.

      • The settings are the same as a working APP, but if they changed something in the meantime, between stores, could there be a new thing I have to fill out on all the new stores, but that wouldn’t be required on the old ones that are already in place?

    87. I can’t really help, Holly. Sorry!

    88. The headline reads:
      “Customizing your Facebook iFrame Application – Reveal Tabs Fan-gating & Other Cool Stuff”
      But I’m not seeing how to create a Fan-Gate on here at all.
      Did I miss something? Does the php I use from this allow me to create such a gate? I am very new to php so forgive me if I missed it in your lesson here.

      • See the section “Using the signed_request variables to create the Reveal / Fan-gating feature”.

      •  I saw it, but don’t really get it, I think php is a still a bit mystifying for me. So I think I need a simpler approach to understanding what you are trying to convey and what  I am trying to do.

    89. Ian Simmons says:

      Just read your other article and made my first test app as a welcome tab. Now this part was a piece of cake!  I combined the ‘like’ check and ‘page id’ check into one if statement so if the user likes and the page id is correct they see fan content, else, they see the non fan content.  I’m guessing what you mean by different page id’s is for if you have more than one app? That part is confusing because I get the same page id whether the user likes or not. Can you explain that part further and in what case I would have multiple page id’s?

      Thanks 

    90. Ian Simmons says:

      I have another issue I just noticed. After a logged in user clicks the “like” the like button goes away and so does the like status so if you refresh the page, it shows the non-fan content but with no like button. Is this another fb bug or is there something to add to get the like status?

      Thanks

    91. It sounds like an error in your PHP, Ian.

      • Ian Simmons says:

         Thanks Tim, I just realized you had replied to both of my questions.  It turned out most of the problems I was having were because of two things. One is trying to test the app while logged in as the admin of the page where the app is. Even if I use the “use facebook as” dropdown, the fb app still sees me as admin (can’t like my own app). The other thing was waiting for fb servers to update. The following day, my test user and several friends tried it out and everything works perfectly. I love how using an iframe allows me to take the functionality pretty much as far as I want to go since it’s actually coming from my own server. I can add all the html, css, javascript, and php I want to on my end and it works as a web app on facebook.  It really opens up countless possibilities.

    92. Hi! Love the tutorial!

      Any idea if it’s possible to make tabbed fan gate Facebook pages wider than 520px?

      • You can *make* the iframed page wider than 520px, but Facebook will only display 520px and give you a horizontal scrollbar to see the rest of the iframed page.

    93. Hi Tim,

      First I would like to thank you for this code. It is great to see the great work you guys do, and it is very helpful for everyone who try to study some programming and webdesign by himself. 

      I have a small problem with getting values into the variables.  The original problem was that the code always “echoed” the ‘you don’t like my page’. I’m using your code with no modifications, and asked to present the values that the variables contain. My PHP version is 5.2.6; I use the new SDK (facebook.php, base_facebook.php, and crt file); I have a ssl certificate and run some tabs from the server that also include PHP.

      Here is the link for the WELCOME tab on my page: https://www.facebook.com/pages/Bustan/137998598052?sk=app_192723540831929

      Here is the PHP code I use:

      $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”];echo “like status = $like_status”;echo “page id = $page_id”;echo “admin = $page_admin”;echo “country = $country”;echo “locale = $locale”;?>

      Hope you could help me to figure it out.

      Best,

      Dor Fridman

    94. Does the fan gate/reveal tab work on the new page timeline?

      I am having difficulty… also the page does not refresh…. so user has to manually refresh page to view reveal.php

    95. Andrea Prenz says:

      Hi Bill,
      you khow why method $facebook->getSignedRequest() return this array => Array
      (
      [algorithm] => HMAC-SHA256
      [code] => 2.AQC5RfWrseir2rjH.3600.1332874800.5-USER_ID|kX6_QhRjeCpPGnFExXSkvpZBfC4
      [issued_at] => 1332868273
      [user_id] => USER_ID) 

      Thanks

    96. Hi! First of all, thank you for the tutorials and the effort into it, it’s been the most helpful i’ve found. I have this problem though, i could not make facebook read my page. whenever i try to access it trough my app’s adress it keeps loading and then return a timed out message. So i’ve downloaded your .zip file chenged the id and secret and tried to load again (changing the app’s settings aswell) i also didn’t work. My question is: Is there anything else to put a page running inside facebook?

      Thanks a lot.

      • You’ve either input the wrong URLs in your basic app settings, or perhaps specified a “Secure Tab URL” that doesn’t have “https” or, if it does, isn’t hosted on a domain with an SSL Certificate. If you provide a link to the tab, that would help.

    97. Hi, excelent article. I include a fan.php if the user is fan and no_fan.php if not. How can I include a Like button on the no_fan.php, and how can I add a recomend and invite buttons on the fan.php? and can I use my own image as a link for the Like, or make the Like bigger? Thanks in advance.