« Previous | Home

Facebook Fan Pages and Static FBML Part 3: iFrames!

July 6, 2010

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:

<script type="text/javascript"><!--
function submitAjaxForm() 
{ 
	// this makes or declares a FBJS AJAX object
	var ajax = new Ajax(); 
	ajax.responseType = Ajax.FBML;
	ajax.requireLogin=false;
	// this makes a callback, or a way to handle the response from the server and use it by putting in our object "fwrapper"
	ajax.ondone = function(data) 
	{ 
		document.getElementById('fwrapper').setInnerFBML(data);
	}
	ajax.onerror = function() 
	{
		//this displays an error if one should occur.
		var msgdialog = new Dialog();
		msgdialog.showMessage("Error", "An error has occurred while talking to the server.");
	}
	// show a message that we're loading it, but it will probalby go so fast it won't be seen unless an error happens
	document.getElementById('origp').setInnerXHTML("Loading, please wait...");
 
	// this actually requests the server-side file or info
	//YOU MUST CHANGE THIS TO YOUR OWN SERVER AND OWN PHP FILE!!!
	ajax.post('http://www.pqinternet.com/fbml_iframe.php');
	return false;
}
//--></script>

<div id="fwrapper" name="fwrapper" style="border:0px; width:500px;padding:5px;">
<p id="origp" name="origp"><input class="button" type="submit" value="Click to Load Slideshow" id="Submit_Button" onclick="submitAjaxForm();return false;"/></p>
<p>Loads a slideshow powered by pqGallery!</p>
</div>
<p>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 <b>this</b> page.  This can be embedded in various web pages, etc.</p>
<p>On Facebook this can only be done on in a Fan page, not a regular profile page, and using a <a href="http://www.pqinternet.com/228.htm" target="_blank">Static-FBML</a> 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.</p>
<p>There's also a "filmstrip" embedded in the left column of the <a href="http://www.facebook.com/pages/pqGallery/123775174303933?v=wall">Wall</a> that is static HTML (meaning that it does NOT get automatically updated), it also uses a <a href="http://www.pqinternet.com/228.htm" target="_blank">Static-FBML</a> box.</p>

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.

<?php

	echo '<Table border="0" cellpadding="0" cellspacing="0"><td width="680" height="810" style="border-collapse: collapse; border: 1px solid #000000"><IFRAME name="pqGallery" id="pqGallery" style="COLOR: black; BACKGROUND-COLOR: black" border=0 align="middle" frameBorder="0" scrolling="auto" width=680 src="http://www.pqGallery.com/IFSS.asp?SID=230045&S=28&C=7&SL=Y&ic=1&it=0&itl=1&arn=0&gn=0&A=0" height=810></IFRAME></td></table>';

?>

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,
Fred

About the Author

Fred Black is an experienced online business operator, programmer, web site developer, father, husband, musician, and songwriter. Visit his Internet Business Blog at: http://www.pqInternet.com.

You may reprint or distribute this article as long as you leave the content and the About the Author resource box at the end intact.

Tip Jar: Leave a Donation

Comments: 22, TrackBacks: 0.

Posted by Fred on July 6, 2010 | Printer-Friendly

TrackBack: http://www.pqInternet.com/Blog/mt-tb.cgi/230

Assigned Categories: Social Media | Web Site Design, HTML, CSS

Related Entries:

Comments and TrackBacks

Comments:

From: William Chen

That's some progressive code, mate... I'd like to see more of your ideas!
Posted by William Chen on July 7, 2010 9:24 AM
From: Jane

Thanks for clarifying about the iFrame. Now I can put some features on my Facebook fan page.
Posted by Jane on July 10, 2010 9:05 PM
From: Uzi

I can't believe that facebook allows iframes. It means that we can load any dynamic page inside the iframe. How would facebook know that we are not going against their policies?
Posted by Uzi on July 13, 2010 5:12 AM
From: Anne Haynes

I really like this series. I'm a novice programmer and need instruction to make things work. I can read the code, but writing it is another story. You give enough information for me to troubleshoot and that's saying a lot!

Thanks again!
Posted by Anne Haynes on July 13, 2010 6:13 PM
From: Mr. Basota

Hey dude, thanks for this nice information. Without this post, i can not imagine that facebook uses iframes.
Posted by Mr. Basota on July 15, 2010 11:25 AM
From: Lara

This is definitely a helpful (series of) post(s). Newsletter sign up box works excellent! Thanks!
Posted by Lara on July 18, 2010 3:39 AM
From: Paul

I never would have guessed that facebook used iFrames. As a newcomer to the programming industry I just want to thank you for this awesome post. The code really helped not only in this specific project, but in helping me understand other similar projects as well.
Posted by Paul on July 20, 2010 10:06 AM
From: Billy

WOW!! I was just having a discussion with a colleague about how I wish I could have some sort of way to customize Facebook like I was able to through html with myspace. Your process is precisely what I was looking for, now I have to somehow master the code. Nice photos of leaves by the way. Thank you!!
Posted by Billy on July 21, 2010 6:22 PM
From: Angelie

Been managing my fan page, and this is the first time I get to know that one could customize such page. Thank you for sharing that code.. think I'll have to try it for my fan page.. that's another discovery and if it is possible for me to apply it on my page then I guess I have to share it for my friends. Thanks again for sharing.
Posted by Angelie on July 22, 2010 3:02 AM
From: Laynia

That's an awesome bit of code you've given us here. Thanks a lot!
Posted by Laynia on July 22, 2010 2:18 PM
From: Jan

I have been reading a lot lately about FB fan pages but haven't as yet decided to set one up. Are they really worth the time and effort?
Posted by Jan on July 26, 2010 5:38 PM
From: piojita

is there any way to do that load without a user action ?
Posted by piojita on July 28, 2010 10:38 AM
From: Steve Marino

Thanks so much for this series of posts (well I'll thank you even more once I've got it set up). I had no idea that Facebook could be customized this way and I've not seen anyone else doing it either.
Posted by Steve Marino on July 28, 2010 7:10 PM
From: Maritime Lawyers

Thank you for sharing (series) of information pertaining to the possible activities which we could do in facebook. My idea about using facebook is too little and this post made me realize the other alternatives. Now, I have ideas about customizing my page. Thanks to your post!Looking forward for you new valuable information concerning this matter.
Posted by Maritime Lawyers on July 31, 2010 4:32 AM
From: Darrin

Wow, very detailed post on configuring Facebook pages. Good work.
Posted by Darrin on August 1, 2010 11:56 AM
From: Jenny

I did know that you can customized your fan page from FB! Thanks for sharing!
Posted by Jenny on August 2, 2010 4:54 AM
From: Ritrattista

Among the social networking sites that we had today, Facebook is my personal favorite because of the fact that you do a lot of things with Facebook. I used to customize and update my FB account daily but I never knew that i can do the same with my fan page. I'm so glad with this new discovery and I will definitely share this to my friends. Thanks a lot for sharing.
Posted by Ritrattista on August 7, 2010 3:10 AM
From: Ritrattista

Thanks for sharing this information. It's a big help for me to build my fan page and customize my page in Facebook. Maybe after I customize my page, other people will attract and add me as a friend.
Posted by Ritrattista on August 9, 2010 2:31 AM
From: Moving Quotes

An old post, but I haven't noticed the iframe feature on my personal facebook account! Bookmarking this and applying the script later. Thanks for sharing!
Posted by Moving Quotes on August 11, 2010 5:46 PM
From: Petr Macek

Thanks for the post, a bit too techy but I will get through it :), right now I am planning to create my own customized tab so this info comes handy :) Thanks, Petr
Posted by Petr Macek on August 13, 2010 5:16 PM
From: DropShip

Excellent series you have here. This code should be really helpful, thanks so much for sharing :D
Posted by DropShip on August 17, 2010 3:21 PM
From: Gemma

This was extremely helpful for me! I hope to read more of your tutorials in the future!

Also, as a side note: do you recommend other social networking sites for businesses aside from twitter and facebook?
Posted by Gemma on August 19, 2010 2:45 PM