« Previous | Home | Next »

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

Tip Jar: Leave a Donation

Comments: 48, TrackBacks: 0.

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

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

You may reprint or distribute this article as long as you leave the content intact, list me at the author, and include a link back to this web site... see this page: linking back to this blog.

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
From: cgr007

Hey Fred,

Thanks for this cool piece of code....and BTW love the photographs in your pqGallery fanpage/slideshow.

Two questions I have are:

1. How did you get to display your "Contact Form" box below your profile box (and/or to the left of the "static FBML/Landing Tab" space?

2. How did you get a FB dialog box to load with the "Thank you for your comment" message, once the Ajax Form post had completed?
Posted by cgr007 on September 3, 2010 11:05 AM
From: Sonya

Thank you so much for sharing your very useful instructions :)

I am wondering if you could instruct me what would be the best way to go around adding a like button to the FBML tab.. that is if I would have some image or link that people could like?

Thanx!!
Posted by Sonya on September 14, 2010 4:59 PM
From: InspiroHost

Thanks for sharing the code, mate. However, businesses today mostly outsource this task to other companies having an expertise in facebook page development; since it saves them much time and hassle. A lot of cost effective solutions are available in the market.

Posted by InspiroHost on September 15, 2010 11:28 AM
From: Web Design and Hosting

Those are good info of some useful codes and i am very much confident that these codes will surely be helpful in maintaining the pages. It is very rare that you get such amazing info.
Posted by Web Design and Hosting on September 19, 2010 10:27 AM
From: anchorage movers

That's awesome, I had no idea you could put an iframe into Facebook. This opens up a lot of creative options!
Posted by anchorage movers on September 21, 2010 2:01 PM
From: Bulk Solid

Wow, it was quite a discovery for me pal. I never really did imagine that Facebook is actually using iframes. Now, i could customized better my facebook account just like my other social networking sites. I'm so glad you shared it. Thanks again!
Posted by Bulk Solid on September 25, 2010 3:22 AM
From: joe brown

You had written details for facebook. I like it.
Posted by joe brown on October 13, 2010 4:41 AM
From: Rene

Great code thanks a lot! Worked very well for me after trying a bunch of other posts.
Posted by Rene on October 28, 2010 11:14 PM
From: Shallum

hello i used this feature it worked for me but suddenly it is not working now? i haven't changed any code or anything?plz help
Posted by Shallum on October 30, 2010 2:58 AM
From: Brad

Ummmm... I kind of love you right now. This code just saved my a$$. Thanks a million. This is much more reliable than other setInnerFBML codes out there to get the iFrame working in static FBML which won't load on click if set to default page and also won't load if the url with the ?app=380830893... parameters are in it. Very nicely done.
Posted by Brad on November 18, 2010 4:21 PM
From: Christian Natklub Købehavn

Does this info about iframes on Static FMBL tabs still apply? Or perhaps it has stopped working permanently since Facebook is planning to change how things work and perhaps kill FBML in time, if I have understood it correctly.. Anybody knows!?
Posted by Christian Natklub Købehavn on November 26, 2010 7:41 AM
From: Kaan

Hi,
This still works. Thanks a lot for sharing it.
Posted by Kaan on December 13, 2010 6:03 AM
From: Soumik

This is a great piece of code you've shared...I was able to implement it yesterday and it was working...but this morning I wake up to find out that it no longer is working.

Has anyone else experienced the code working and then breaking without any changes whatsoever? Any work around?

Thank you!
Posted by Soumik on December 15, 2010 7:09 PM
From: abyz

Nice tutorial ! thanks for all ...
Posted by abyz on December 16, 2010 11:51 AM
From: cgr007

Thanks much!!!

Was able to use this code for my Facebook FanPage:

Best,

C
Posted by cgr007 on December 27, 2010 11:12 PM
From: San Diego Assisted Living

Excellent information! Yes this still works, what a great way to leverage FB. I've added links to posts before, but nothing this powerful!
Posted by San Diego Assisted Living on January 11, 2011 8:18 AM
From: Sandeep Sohal

nice post, I have bookmarked ur site, keep the good work
Posted by Sandeep Sohal on January 23, 2011 4:12 AM
From: Alakananda

Absolutely brilliant. I had pretty much given up on IFrames on page tabs till I saw this :)
Posted by Alakananda on February 8, 2011 10:18 AM
From: Michael Walmsley

Thanks for a great series of articles. I'm just getting started with FBML and this has been a great help to me. I'm looking forward to implementing some of these techniques on my FB fan page.

Keep up the good work.

Mike
Posted by Michael Walmsley on February 10, 2011 6:46 PM
From: Yanipan

Hi, and thank you for a great tutorial! it really helped me.
I have two problems I can't overcome so far...

the first is that when a user click on an element to activate the tab, my app connects to facebook (it is the PHP SDK). after he allows the permission I redirect him back to the tab. the problem is that now he needs to click again on the AJAX activation element, and only now he gets into the app. Is there a way to connect him and leave him in the AJAX?

the second question is - I need to pass a variable from the URL to the application. Is there a way to do this?
thanks again,
Yanipan
Posted by Yanipan on February 13, 2011 11:20 PM
From: phil@how to grow veg

that is outstanding work - thanks for sharing it
Posted by phil@how to grow veg on September 9, 2011 5:58 AM
From: Maritime Lawyer

I was searching for a code like this, and im so glad that i came across your post. It is appropriate to ask if I may use your code? Hopefully the answer will be yes. i`ll get back with details once I manage to make it work for me.
thx for posting.
Cheers.
Posted by Maritime Lawyer on September 28, 2011 4:42 PM
From: mutuelle

Thanks for the tips,I'm not good at coding, but I used to use iFrame,to create dynamic tabs
Posted by mutuelle on November 29, 2011 8:51 AM
From: Tyler

awesome! thanks for sharing.
Posted by Tyler on February 3, 2012 5:07 AM
From: Henry

Nice article. Most people think the only thing you can do to a facebook page is add pictures and post on the timeline. I actually didn't know about this. Thanks again.
Posted by Henry on December 27, 2012 5:03 PM
From: Dave

Thanks for making my fan page more appealing :)
Posted by Dave on May 5, 2013 8:24 PM