Facebook Fan Page – iFrame Template for a REVEAL tab

On March 11th of this year Facebook changed the way fan pages function. This change has causes ALOT of confusion and created many heated debates.

This article is neither confusing, nor debatable.

The sole purpose is to provide a simple, easy to use fan page template that allows you to unlock the power of Facebooks new iFrame fan pages.

Below you can download the 4 files needed for this system.

The 4 files explained.

  1. control.php : Yep .. it controls the fan page. It determines what to show a visitor based on whether they have Liked your Fan page of not.
  2. facebookSDK.php : is the Facebook SDK. Basically it is a library of functions that allow easy access to facebooks API … more crazy terms, I know. Ok .. it is THE file that allows your fan page to communicate with facebook. Better?
  3. Liked.php : Is the content you show when a visitor likes your page.
  4. Unliked.php : Is the content you show when a visitor has ‘NOT’ liked your Fan page. This file will typically contain only images that encourage the visitor to like your page in order to receive something of value.

    Example: Supply Side Dating

Download Facebook iFrame Fan Page Template Now

One last thing … PLEASE ‘LIKE’ this post above .. thank you!

Enjoy!

Todd N. Thompson

16 comments

  1. hi Todd
    Thanks for a very useful article from someone who knows nothing about
    programming or setting up a fan page .I like your example maybe you could run a basic training course for people like me
    cheers have agreat weekend where ever you are in the World like your emails
    regards
    peter mcgrath

  2. wow Todd, as an IPhone/IPad/Ipod programmer I appreciate your creation of this Iframe Reveal tab.
    You could have charged money for this and yet you give it away.

  3. Hi Todd
    ok I liked this page, but I have a couple of questions.
    1 – does it work even if I have no PHP on my host? (probably not?)
    2 – Is “index” page the control.php or unliked.php?
    3 – why is impossible to find something that works in javascript than PHP?
    4- why earth is not flat? 🙂

    thanks Lorenzo

  4. Lorenzo,

    A host without PHP? Really! You need to find a better host,
    but you are correct .. if you do not have PHP on your host,
    this script set will not work for you.

    The control.php is the index page.

    Javascript can be turned off in your browser and quite a few
    people do to protect their computer from malicious javascript code.
    So .. javascript is not a reliable option here .. you can’t turn
    off PHP.

    The earth was flat 500 years ago . 😉

  5. Hey Todd,

    After hours of struggling with the PHP to do the fangate, I found this post. Thank you so much for this tutorial, it was quick, to the point, and easy for the layman to understand. Keep up the good work!

  6. Hey Todd:

    Trying this, but still can’t seem to get to work. I work at a University and had the IT department give me space on our server, configured for PHP. I did test a “hello world” PHP just to see.

    I have replaced the Liked php with html as well as a form and the UNliked is simply a jpg.

    I have double checked my appid and app secret. Any thoughts?

  7. Todd, Thanks so much for the coding! I do have a question for you though. When I made the pages longer than the standard 800, I encountered the dreaded scroll bar effect. With the “content” pages being called from the control page and most solutions involving some javascript in the heading, how have you gotten around the scroll bars? Thanks for your help!

  8. Put this at the top of the Liked.php

    NOTE: I removed the < character from the div and script tags .. you will need to add them back. div id="fb-root"> /div>

    script>
    window.fbAsyncInit = function() {

    FB.Canvas.setSize({ width: 521, height: 1990 });

    FB.init({
    appId : ‘‘,
    session : null, // don’t refetch the session when PHP already has it
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
    });
    }; // close windows.fbAsync …

    (function() {
    var e = document.createElement(‘script’);
    e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;
    e.async = true;
    document.getElementById(‘fb-root’).appendChild(e);
    }());
    /script>

  9. Sean,

    I looked at your page .. both Liked and Unliked … and you have issues.

    The Liked page has 3 references of the js function:
    FB.Canvas.setSize(); <-- 2 that look like this and the one I sent you: FB.Canvas.setSize({ width: 521, height: 1990 }); Plus you have the FB.init({ function list twice as well. You need to fix your code. If you put exactly what I gave you ... it will work. I have that EXACT code on 15+ fan pages. Todd

  10. Also … put same code on your Unlike.php to remove the
    scroll bars on that page as well.

    Todd

  11. I have a question about this part in control.php…

    $PAGE_id=$response[page][id];
    $LIKED=$response[page][liked]; // null means NO and 1 means YES
    $isADMIN=$response[page][admin]; // null means NO and 1 means YES

    Where do I place the “1” for yes?

  12. Joe,

    YOU don’t place a 1 anywhere. The values are pulled
    from facebook based on whether the person has LIKED
    your page or not.

    Thanks.

    Todd

  13. I do not see you in the Share list.
    You must use OUR share process.
    When you do the download link will appear
    in the newly opened window.
    Thanks.
    Todd

Comments are closed.