Facebook Fan Pages and Static FBML Part 3: iFrames!
In Facebook Fan Pages and Static FBML Part 1 I showed how to setup a Facebook Fan Page and in Facebook Fan Pages and Static FBML Part 2 I showed how to use Static FBML to customize the page and to create a form that the user could fill out and it would send you an email using AJAX without ever leaving Facebook.
In this article I’m going to show how to use these techniques to make a Fan Page use Static FBML to display an iFrame.
If you don’t know what an iFrame is, it’s a method of embedding a web page in a web page. A portion of the main web page has a “window” that is another web page, from the same web server, or from a different web server. There’s lots of uses for this and I won’t cover them here.
I’m a little hesitant to show this information because I fear that Facebook will block it from working as they have other techniques to display iFrames.
You can see an example of an iFrame in a Facebook Fan Page on the Fan Page for my photo gallery site: www.facebook.com/pqGallery after you click the “Like” button, click the “Slideshow” Tab. Once on the “SlideShow” Tab, click the “Click to Load SlideShow” Button and you’ll see an iFrame load that contains a dynamic image slideshow.
Why do you have to click the “Click to Load SlideShow” button? Because Facebook will not automatically start an AJAX command, they require the user to click something. This has the obvious down side of the user having to click something to see your iFrame, but the upside of giving you the ability to have several buttons that they could choose from to load exactly what they want to see.
So, how does this work? First, you HAVE to master what I covered in Part 2. If you can’t get that to work, the iFrame technique will not work. Once you can do that, you can use the same technique to make the iFrame. Instead of processing a form and sending an email, the php code that you put on your server sends back to Facebook, via the AJAX connection, the code for your iFrame… and it works!
Below is the exact Static FBML code I use on the pqGallery SlideShow tab. Please Note: you will need to change the call to my server and my php file – I’ve put in a comment just before this line of code:
This is a dynamic slideshow embedded in a web page. Dynamic means that it’s updated as the images in pqGallery are updated, you don’t have to update this page. This can be embedded in various web pages, etc.
On Facebook this can only be done on in a Fan page, not a regular profile page, and using a Static-FBML tab (click the link to learn more about those), it does not auto load and auto start on Facebook, they make you click something to start things like this, hence the button, on other web pages, it would just be sitting there running when you load the page.
Below is the exact content of the PHP file that gets called. pqGallery actually generates this for you for embedding iFrame slideshows of images, so all I had to do here was to copy and paste the code it generated.
As with the examples in the previous articles, it can be frustrating to debug this type of setup. However, eliminating one element at a time until you get something to work is the best way, then, add back what you removed, again, one element at a time and then you’ll find the offending code and can work to fix it.
Until next time,