resize the default iFrame size

Oct 10, 2007 at 7:49 AM
Is there a way to resize the iFrame size? My page content is bigger than the default Frame size that came with facebook. So my App looks sort of ugly with horizontal and vertical scroll bars. If you know a way to resize this iFrame size, it would be a big help.

regard
wajid
Oct 14, 2007 at 6:26 PM
Hi Wajid,

Did you figure out how to get rid of the scroll bars? I'm having the same problem with a vertical scroll bar in my iframe app.

-Feras
Oct 16, 2007 at 12:32 AM
Same problem here. I'd love to get rid of the framed scroll bar and just extend the FB page. If anyone has a solution for this (other than using FBML) please let us know.
Oct 17, 2007 at 7:38 AM
I tried two ways to remove the scroll bar.

1 . First I write the java script to resize the frame size, but facebbok does not give access to size property of frame
2 . I write temporary facebook application. Details of application are: First I add application in facebook where I set the Canvas Page URL using FBML. Then I write a php page(index.php) in which I use <fb:iframe> tag and <p> and long text in <p> tag, but the scroll bar is still there. thats mean, if you set fbml property and also use fb:iframe with no scroll then the default size will not change..

please if any one know solution, please let us know..

Regards,
Wajid


Oct 30, 2007 at 7:16 PM
i found another way to handle this problem.

first change your application setting and set the Canvas Page URL using FBML and the append a the following tag on the top of your page and close the tag at the end of page

<fb:iframe style="width: 100%; height: 4000px;" src="http://xxxxxxx.007ihost.com/" smartsize="false" frameborder="no">

----------------- Your Content -----------------

</fb:iframe>

as my maximum page height through out the application is 4000px, so i set the height of iframe 4000px, you can change this height according to your requirements.

if you use this fb:iframe then you can perform all type of javascript, relative urls and other tags which fbml not support.

one more thing i want to clarify that if you want to test you application through localhos, then first you use Canvas Page URL as iframe to develop application on local host and when you want to launch application on facebook then change it to fbml.

if anyone has any query please let me know.

Regard
Wajid
Feb 27, 2008 at 9:29 AM
hi Wajid

Can you give me some Code sample , actually i have made an html page and put it in the face book and the same problem i am getting. i did in th eway you explained but still it the same.

if you cna giveme the code sample of the <fb:iframe> you put it would help us.

Feb 29, 2008 at 6:56 PM
Are you suggesting change the application setting from use iframe to use fbml? and then putting the <fb: code at the tip and bottom of the ascx page?

Thanks,

PatC
Mar 3, 2008 at 6:59 AM
Can code sample would be a great help for us

Thanks,
Neo
Mar 3, 2008 at 10:20 AM
Edited Mar 3, 2008 at 10:22 AM
Here is some code for your problem:

Default.aspx
<fb:iframe
src="URL_OF_YOUR_PAGE"
frameborder="0"
height = "INSERT_HEIGHT"
width = "INSERT_WIDTH">
</fb:iframe>

Default.aspx.cs
public partial class _Default : Facebook.WebControls.CanvasIFrameBasePage
{
protected void Page_Load(object sender, EventArgs e)
{
base.Api = ConfigurationManager.AppSettings["appkey"];
base.Secret = ConfigurationManager.AppSettings["secret"];
base.Page_Load(sender, e);
}
}

IMPORTANT: If your page is iframe then you must call this page as Default.aspx?fb_force_mode=fbml
Mar 29, 2008 at 6:27 PM
There is a way to do it with out using FBML.
Set the 'Canvas Page URL' to use iframe and select the option 'Resizable' in 'Default Iframe Canvas Size option'.
Then use the following javascript on your page to set the height of your page to '1500pt'

<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("/html/xd_receiver.html");
FB.CanvasClient.setCanvasHeight("1500pt");
})
</script>

You'll have to create an xd_receiver.html page. Instructions can be found here.
http://wiki.developers.facebook.com/index.php/Cross_Domain_Communication_Channel

More instructions on creating a resizable iframe -
http://wiki.developers.facebook.com/index.php/Resizable_IFrame
Mar 31, 2008 at 2:04 PM
Edited Mar 31, 2008 at 2:21 PM
Thanks, got it working BUT it only works with IE7 + firefox.

It does not work with MacOSX Safari or IE6 . Any ideas for that ?

Mar 31, 2008 at 8:27 PM
In some of the browsers like Mozilla, I receive the following error.

Error: uncaught exception: Exception... "Object cannot be created in this context" code: "9" nsresult: "0x80530009 (NS_ERROR_DOM_NOT_SUPPORTED_ERR)" location: "http://static.ak.facebook.com/rsrc.php/pkg/49/90380/js/common.js.pkg.php Line: 487"
Mar 31, 2008 at 10:05 PM
Hi,

I am receivng the following error in the Mozilla browser ( Checked the error console)
Line1: channelManager is not defined
Plz help.