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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

770 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