How can i increase the hight of the iframe page in facebook

Mar 10, 2008 at 1:12 PM
Hi all

How can I increase the hight of the iframe page in the facebook as per the hight of the page in my application being now it is showing a scrollbar . It is looking very ugly having scroll bar ...

Thanks
Ram
Mar 10, 2008 at 1:38 PM
if you're writing using FBML and the iframe tab <fb:iframe> as per http://wiki.developers.facebook.com/index.php/Fb:iframe , you can specify smartsize=true.
Mar 10, 2008 at 2:37 PM
I am developing the app using Iframe.

In the default.aspx page, I have took the <fb:iframe> tag and got a sample page loading in that iframe. I can see the change by making my app to FBML type instead of Iframe type.

The problem I have is that when I inherit the page from FBMLMasterPage, it is showing up an error as "error 500".

So, I have inherited the page from FBMLCanvasPage, got it working.

But, How can I make the incoming requests URL's to load in a Iframe everytime.

I mean the URL redirect upon on click on a button etc., should be loaded in a <fb:iframe> in my default.aspx page.

How can I do this?

Please help

Thanks
Ram.



Developer
Mar 10, 2008 at 5:27 PM
Did you check the source of the generated page? Error:500 means, there's something wrong with your code.
Mar 17, 2008 at 5:58 AM
Guys,

Till yesterday i was in the same boat as you did. Check this out, if you already do not know about it. http://developers.facebook.com/news.php?blog=1&story=93

Facebook has released the ways to change the iframe size. I was successfully able to implement dynamic iFrame size change.
Mar 18, 2008 at 8:46 PM
I am inheriting the CanvasIframeMasterPage.

I am not getting the dynamic height for the iframe after placing the code in one of my content pages.

Here is the code.

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

FB_RequireFeatures("CanvasUtil", function(){
//FB.XdComm.Server.init('xd_receiver.htm')
//new FB.ApiClient('c2c129ce13a424d07afabded391357e2', 'xd_receiver.htm', null);
FB.XdComm.Server.init('xd_receiver.htm');
//FB.CanvasClient.startTimerToSizeToContent();
FB.CanvasClient.setCanvasHeight('1500px');
});
</script>


Thanks,

vara
Mar 19, 2008 at 11:32 AM
Edited Mar 19, 2008 at 11:34 AM
Hi,

I tried your code but still with Win98 the dynamic height makes my application too small..

I use CanvasIframeBasePage, do you think its the cause?



ps. I tried to switch to CanvasIframeMasterPage, but it does not have Page_load method and several compiler errors appeared.

Mar 19, 2008 at 11:34 AM

Hi,

Can you share your code if its working any better ?



kejriwalamit wrote:
Guys,

Till yesterday i was in the same boat as you did. Check this out, if you already do not know about it. http://developers.facebook.com/news.php?blog=1&story=93

Facebook has released the ways to change the iframe size. I was successfully able to implement dynamic iFrame size change.

Mar 19, 2008 at 12:59 PM
Hi,

I didn't get any better solution yet.

Are you able to achieve the dynamic height by any means?

Mar 19, 2008 at 1:08 PM
Hi,

Can anyone share the code for getting the dynamic height.

Its been a long running issue in facebook.



kejriwalamit wrote:
Guys,

Till yesterday i was in the same boat as you did. Check this out, if you already do not know about it. http://developers.facebook.com/news.php?blog=1&story=93

Facebook has released the ways to change the iframe size. I was successfully able to implement dynamic iFrame size change.

Mar 20, 2008 at 3:00 AM
Enter this code at the top of your page, which you want to resize according to the content.

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

<script type="text/javascript">
FB_RequireFeatures("CanvasUtil", function()
{
//You can optionally enable extra debugging logging in Facebook JavaScript client
//FB.FBDebug.isEnabled = true;
//FB.FBDebug.logLevel = 4;

//debugger;
FB.XdComm.Server.init("/FBT/demo/xd_receiver.htm");
FB.CanvasClient.startTimerToSizeToContent();
});


function onWindowResized(info)
{
var canvasInfoDiv = document.getElementById("CanvasInfo");
var text = String.format("window ({0}, {1}), page ({2}, {3}), canvas({4}, {5})",
info.window.w, info.window.h,info.page.w, info.page.h,
info.canvas.w, info.canvas.h);
canvasInfoDiv.innerHTML = text;

}

function toggleBox()
{
var button = document.getElementById("toggleButton");
var box = document.getElementById("testBox");
if(button.checked)
{
box.className = "expanded_box";
}
else
{
box.className = "normal_box";
}
}

function fixHeight()
{

//We need to call FB.CanvasClient.stopTimerToSizeToContent() first because we have called FB.CanvasClient.startTimerToSizeToContent() earlier
FB.CanvasClient.stopTimerToSizeToContent();
// FB.XdComm.Server.init("/FBT/demo/xd_receiver.htm");
FB.CanvasClient.setCanvasHeight("5000px");
}


</script>

It include all the possible ways you can change the size.

Also add a file with the name xd_receiver.htm with the following content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ outputcache duration="2592000" varybyparam="none" %>
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>

<script src="http://static.ak.facebook.com/js/api_lib/v0.2/XdCommReceiver.debug.js"
type="text/javascript"></script>

</body>
</html>


Make sure the "("/FBT/demo/xdreceiver.htm") is changed in your application page to reflect where you are hosting the real xdreceiver.htm. It took me some time to implement because it took me some time to implement right path for xd_receiver.htm. FBT is my application folder.
Mar 24, 2008 at 7:17 PM
Hi,

The sample code is working fine.

But, sometimes the page doesn't load properly.

I think it is because of this file.

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

May be the facebook server is busy in responding the requesting page.

Please can any one shred light on this issue?
Mar 28, 2008 at 5:30 PM
Hi,

This code is not working for some of the browsers like mozilla, ie6.

Anyone knows the reason?

Please reply to this post as my app users keep posting this issue.

I has to run the app with scrollbars.
Mar 31, 2008 at 2:22 PM
I have same problem, it does not work with IE6 or MAC SAFARI.
Mar 31, 2008 at 6:40 PM
Hi,

Its really frustrating that the scroll bar issue has no generic solution.

After doing all the hardwork, the app looks ugly with scrollbar's.

I am using the following script.

<script src="http://static.ak.facebook.com/js/api_lib/v0.2/FeatureLoader.js" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures("CanvasUtil", function(){
FB.XdComm.Server.init("/appname/demo/xd_receiver.htm");
//FB.CanvasClient.add_windowSizeChanged();
FB.CanvasClient.startTimerToSizeToContent();
});

function onWindowResized(info)
{
var canvasInfoDiv = document.getElementById("CanvasInfo");
var text = String.format("window ({0}, {1}), page ({2}, {3}), canvas({4}, {5})",
info.window.w, info.window.h,info.page.w, info.page.h,
info.canvas.w, info.canvas.h);
canvasInfoDiv.innerHTML = text;
}

function toggleBox()
{
var button = document.getElementById("toggleButton");
var box = document.getElementById("testBox");
if(button.checked)
{
box.className = "expanded_box";
}
else
{
box.className = "normal_box";
}
}

function fixHeight()
{

//We need to call FB.CanvasClient.stopTimerToSizeToContent() first because we have called FB.CanvasClient.startTimerToSizeToContent() earlier
FB.CanvasClient.stopTimerToSizeToContent();
FB.XdComm.Server.init("/EightThings/FacebookApp/xd_receiver.htm");
FB.CanvasClient.setCanvasHeight("3000px");
alert('hi testing the app...');
}

</script>

The app loads well in my Mozilla browser.

But, when I test the app in some other system, the app does not load to the full content.

I mean the app does not load withour scroll bar's. Also, the height of the window is 1/3rd of the original size.

Can anyone knows the reason.

Please help.

Thanks in advance,
Vara.

Apr 1, 2008 at 3:11 PM
I have also tried with the above Javascript code in my app .The height of the iframe in the facebook increasing dynamically with my App height successfully.

But i am facing problem when I opened my app in another system the Iframe height is not increasing .
I did not understand why it is happening like this .

can any one help to resolve this.


Thanks

Naren...
Apr 3, 2008 at 11:54 AM
1. Download these 2 files from facebook:

http://static.ak.facebook.com/js/api_lib/v0.3/FeatureLoader.js
http://static.ak.facebook.com/js/api_lib/v0.3/XdCommReceiver.debug.js
and save them to your facebook application folder in your server.
( To solve the problems of the facebook server is busy in responding the requesting page)

2. Create an xd_receiver.htm to your facebook application folder in your server.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="XdCommReceiver.debug.js" type="text/javascript"></script>
</body>
</html>

3. In facebook, set Canvas Page URL to "Use Iframe";
and Default Iframe Canvas Size Option to "Resizable"


4. Create a Default.aspx for your facebook application:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="FeatureLoader.js" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures("CanvasUtil", function(){
FB.XdComm.Server.init('/xd_receiver.htm'); // must have "/" before the html file
FB.CanvasClient.startTimerToSizeToContent();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%">
<tr>
<td style="height:2000px">
Hello World
</td>
</tr>
</table>
</div>
</form>
</body>
</html>


Hope this will help.

Apr 4, 2008 at 11:55 AM
Thanks, with IE 7 I get this error dialog now pretty often :

"Internet explorer cannot open this page"
"Operation aborted"
Apr 5, 2008 at 1:30 PM
Hi all,

I think the scroll bar issue is still persisting in some way or the other.

I was delighted to see the issue being resolved in Mozilla and Safari.

But, in IE 7 it sucks. ( IE6 --:) Forget abt it as facebook dont support it)

Please can anyone shred some light on this long running issue.
Apr 9, 2008 at 4:19 PM
Hi all I have tried with the code which wellsyap suggested .It is working fine but in my application some pages still not opening fully ...

After doing all the effort on the application being this scroll bars ...application is not looking good .
So many all others applications are working well without having scroll bars. I wish those are also participate in these discussions to get this problem resolved fully...


Thanks

naren



Apr 19, 2008 at 1:30 PM
Hi Guys,
I thank you all for the post related to this problem and am also not out of the clutches of iframe resize with respective to IE browser. I learned that there should not be any method inside iframe that makes use of DOM to modify other objects position/content. The problem is also related to "Operation aborted" issue with the IE browser. But anyways, here is what that has been suggested to resolve the iframe resize issue with IE browser.

Only in case of IE browser, delay the call to the FB_RequireFeatures method. For example in my case i have delayed 500 ms (milliseconds) to call this facebook js method and it resolved the iframe resize issue. I have pasted the code below for those who still struggle with iframe resize issue with IE browser. Also, if the issue still remains, then try increasing the delay. Hope this solves the issue.

<script src="http://static.ak.facebook.com/js/api_lib/v0.2/FeatureLoader.js" type="text/javascript"></script>//watch out . YOU MUST USE v0.2 and NOT v0.3.

<script type="text/javascript">
//after a delay of 500 ms we fire the "fireRequireFeatures()" method. We do this to prevent
//IE from throwing the "Internet Explorer cannot open the internet site. Operation aborted" message.
var userAgent;
userAgent = window.navigator.userAgent.toLowerCase();

if (userAgent.indexOf("msie") >= 0 || userAgent.indexOf("microsoft internet explorer") >= 0) //capture browser type and do the delay
{
setTimeout("fireRequireFeatures()",500); //here i delay 500 milliseconds
}
else
fireRequireFeatures(); //no problem with other browser

function fireRequireFeatures()
{
FB_RequireFeatures("CanvasUtil", function(){
FB.XdComm.Server.init("/xd_receiver.htm");
FB.CanvasClient.startTimerToSizeToContent();
});
}

</script>

Also, my xd_receiver.htm file looks like as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.3/XdCommReceiver.debug.js" type="text/javascript"></script>//watch out the version here. It works for me in this combination
</body>
</html>

Thanks and Regards,
Hemant
Apr 19, 2008 at 8:38 PM
Hi Hemant,

gr8 work man.

You put an full stop at last to the long running issue.

Thanks,

Vara.


May 12, 2008 at 7:01 AM
Hi Guys,
             I'd done all things mentioned in this discussion but it gives javascript eroor:
Error: request.features.getEnumerator is not a function
Source File: http://static.ak.facebook.com/js/api_lib/v0.2/Base.js?r=3afc361cdca15934cd30b599b900e6c62
Line: 393

Please help me.

Thanks
Sandip
May 13, 2008 at 7:01 AM
Hi Sandip,
               Sorry for replying late. But it seems like you are the only one to get this error message. But anyways, here is what i will do in your situation:

1. Make sure your xd_receiver.htm file is correct. Check the version. In my case it worked with v0.3.
2. Make sure your relative path correctly points to xd_receiver.htm. If you are not sure, then try giving the full path instead of relative path (For eg. FB.XdComm.Server.init(http://mydomain.com/facebook/xd_receiver.htm);)
3. Try changing the version from v0.3 to v0.2 in the xd_receiver.htm file
4. Try it in a different browser and/or different machine. I know this fix is for IE but see to that it shows up properly in FF.

Let me know if this helps.

Thanks and Regards,
Hemant.
May 19, 2008 at 4:55 PM
Hey Guys,
               Frustrating again. The problem started showing up again. The IFrame height is not getting set properly in the IE but works fine with Firefox. Does anyone of your IFrame based application still works fine setting the IFrame  height correctly? Please share your thoughts.

Thanks and Regards,
Hemant
May 21, 2008 at 4:25 PM


hemant_vikram wrote:
Hey Guys,
               Frustrating again. The problem started showing up again. The IFrame height is not getting set properly in the IE but works fine with Firefox. Does anyone of your IFrame based application still works fine setting the IFrame  height correctly? Please share your thoughts.

Thanks and Regards,
Hemant



Hey Guys,
              The issue is with IE 6.0. With IE 7.0 things are working all right. Now, we (atleast me) are expecting the solution to the iframe issue with IE 6.0. Has anyone faced the problem with IE 6.0? Can they help us here?

Thanks and Regards,
Hemant.
Jun 3, 2008 at 1:43 PM
I have same problem, it does not work with IE6 or MAC SAFARI.  

it appears IE6 is not well supported
Jun 9, 2008 at 8:05 PM
I actually got this working pretty well in IE6+.  The only incredibly annoying part is that everytime a page loads, you hear a series of a couple of dozen "click" sounds as the frame is getting resized.  Is this "normal" behavior or am I doing something wrong?
Jun 25, 2008 at 4:21 PM
Edited Jun 25, 2008 at 7:17 PM
Hi,


I tried everything as said

Iam getting this error
request.features.getEnumerator is not a function
Error: request.features.getEnumerator is not a function

this.checkRequestQueue();},checkRequestQueue:function(){var requestQueue=this.ge...