Facebook canvas javascript iframe

Posted on 2010-01-11
Medium Priority
Last Modified: 2012-05-08
Facebook application iframe type.
Want to resize the canvas to fit application. Also want to change background color of canvas.

The following works in Firefox. But it does not work in IE and gives JavaScript error.

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

<script type="text/javascript">  FB.init("my FB apps API", "xd_receiver.htm"); </script>

<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div>

<div id="FB_HiddenContainer"  style="position:absolute; top:-10000px; width:0px; height:0px;" ></div>

<script type="text/javascript">
       FB_RequireFeatures(["CanvasUtil"], function(){
Question by:drupal_100

Expert Comment

by:Tony O'Byrne
ID: 26287149
I don't know about changing the canvas background, but for changing the iFrame size...  Go into your application settings and make sure the size is set to "resizable" instead of "smartsize"

You'll need to check out this page:
about creating a cross-domain communication channel because javascript cannot (natively) communicate to a page on another domain.

They also describe resizing the iframe:

and provide an example:
(view the source to see how they manage it - you want the "Fix height to 1500pt" thing at the bottom)
This is just initializing...
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

<!--  An IE fix provided by FB  -->
<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div>

<script type="text/javascript">
	var fbAPIKey = "<yourAPIKey>" ;
	var fb_xdHtmAbsLoc = "<your xd_receiver.htm url>" ;
	var fb_xdHtmRelLoc = "xd_receiver.htm" ;
	//	We need to be able to modify the canvas - this allows us to do that
	FB_RequireFeatures(["CanvasUtil"], function(){
		FB.XdComm.Server.init(fb_xdHtmRelLoc);	//	Relative URL here

	//	And other general features - some of which are absolutely required, some are not.
	FB.Bootstrap.requireFeatures(["Connect"], function(){
		FB.Facebook.init(fbAPIKey, fb_xdHtmAbsLoc);

This is the resize for the iframe
<script type="text/javascript">
var fixHeight = function ()
	var fbContainer = document.getElementById( "fbContainer" ) ;
	var heightofiframecontent = fbContainer.offsetHeight + 50 ;

	//We need to call FB.CanvasClient.stopTimerToSizeToContent() first because we have called FB.CanvasClient.startTimerToSizeToContent() earlier
	FB.CanvasClient.setCanvasHeight( ''+heightofiframecontent);

Open in new window


Accepted Solution

Mangagm earned 2000 total points
ID: 26289494
just set the doctype of the document so IE uses the same one FF is using, try adding this at the top of your document html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

at the very top even before the <html><head > tags

if it doesnt work try checking if it still works in FF, if it doesnt, it means FF is using another doctype, try with a couple, the sintax you can find it here:


Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question