Link to home
Start Free TrialLog in
Avatar of drupal_100
drupal_100Flag for United States of America

asked on

Facebook canvas javascript iframe

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(){
              FB.XdComm.Server.init('xd_receiver.htm');
                FB.CanvasClient.startTimerToSizeToContent();
       });
</script>
Avatar of Tony O'Byrne
Tony O'Byrne
Flag of United States of America image

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:
http://wiki.developers.facebook.com/index.php/Cross_Domain_Communication_Channel
about creating a cross-domain communication channel because javascript cannot (natively) communicate to a page on another domain.

They also describe resizing the iframe:
http://wiki.developers.facebook.com/index.php/Resizable_IFrame

and provide an example:
http://apps.facebook.com/wzhu_public_resize/
(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
		FB.CanvasClient.startTimerToSizeToContent();
	});

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

/******************************
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.stopTimerToSizeToContent();
	FB.CanvasClient.setCanvasHeight( ''+heightofiframecontent);
}
//-->
</script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Mangagm
Mangagm

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial