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.
- 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.
- 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?
- Liked.php : Is the content you show when a visitor likes your page.
- 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
Thanks for sharing. Will give it a try.
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
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.
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
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 . 😉
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!
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?
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!
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>
I appreciate the quick reply! However, that didn’t resolve the scrollbar issues. Oddly enough it makes the page skip the “like” and jump to the wall in IE 8 and scrollbars still exist, only on the “liked” page in firefox 3 and 4. Chrome seems to behave like it should..lol..here’s the link http://www.facebook.com/pages/ReverseMyMortgagecom/206094966097394?sk=app_228093673874406
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
Also … put same code on your Unlike.php to remove the
scroll bars on that page as well.
Todd
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?
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
I even share yoour post though i am not allowed to download it.. Kindly help
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