[RESOLVED] Facebook app iframe help

**chunk** · Aug 18th, 2011, 12:18 PM

hi
anyone please help me with the facebook app.
i have an app of facebook. The url looks like

http://apps.facebook.com/myappname

it is displayed in iframe, but i want to increase the height of my pages that appear in the facebook iframe.
Anyone please help who have done something similar, i asked facebook forums but no answer :-(

**SambaNeko** · Aug 18th, 2011, 01:02 PM

You can't manually set the height of the iFrame that appears on Facebook; it's a percentage of the browser window height, always. You can of course edit your page content to be whatever height you'd like.

**chunk** · Aug 18th, 2011, 01:39 PM

Originally Posted by SambaNeko

You can't manually set the height of the iFrame that appears on Facebook; it's a percentage of the browser window height, always. You can of course edit your page content to be whatever height you'd like.

but i see other apps that has height of their own wish. for example here

http://apps.facebook.com/onthefarm/i...?ref=bookmarks

they have desired height of their iframe app. i want to set the height by myself for my app too

**SambaNeko** · Aug 18th, 2011, 02:31 PM

Go to the Developer app and select "Edit Settings" for your app. Click on "Advanced" in the left-side nav, at the bottom, select the radio button for "Fluid" for the "Canvas Height" option. Save changes.

**chunk** · Aug 19th, 2011, 12:30 PM

Wowww, That was so great help :-) thank you so much my friend :-)
thank you so much

**chunk** · Aug 19th, 2011, 01:09 PM

hi,
but i see a few apps that change the height of the pages according to their pages height. The height is increased itself as the page is loaded. But in my app it displays scrollbar if any page is bigger in height :-(

**PBertie** · Aug 19th, 2011, 03:23 PM

Originally Posted by chunk

hi,
but i see a few apps that change the height of the pages according to their pages height. The height is increased itself as the page is loaded. But in my app it displays scrollbar if any page is bigger in height :-(

Are you using the javascript SDK? If so check out the very bottom of this page:
https://developers.facebook.com/docs...ce/javascript/
Use the FB.Canvas.setSize if you know what size you need. Or you can use the timers it gives that do it every so often.
I found the best way to put in your footer a timer that takes 100ms and then sets it once. This was becuase for my use the page would never change once loaded but wasn't always the same for every page.

**chunk** · Aug 20th, 2011, 01:37 AM

Originally Posted by PBertie

Are you using the javascript SDK? If so check out the very bottom of this page:
https://developers.facebook.com/docs...ce/javascript/
Use the FB.Canvas.setSize if you know what size you need. Or you can use the timers it gives that do it every so often.
I found the best way to put in your footer a timer that takes 100ms and then sets it once. This was becuase for my use the page would never change once loaded but wasn't always the same for every page.

Hi,
im not using javascript SDK, im using php SDK
i tried this code but it did not work for me :-(

can you please tell me what wrong i did, or i need to add a few more code in my pages to get it work

Code:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'YOUR APP ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
  });
</script>

**PBertie** · Aug 20th, 2011, 07:58 AM

Did you replace "YOUR APP ID" with your App ID? Also the "http://WWW.MYDOMAIN.COM/channel.html" should be a html file on your website that includes the follwoing code:

Code:

<script src="http://connect.facebook.net/en_US/all.js"></script>

**chunk** · Aug 20th, 2011, 01:41 PM

Originally Posted by PBertie

Did you replace "YOUR APP ID" with your App ID? Also the "http://WWW.MYDOMAIN.COM/channel.html" should be a html file on your website that includes the follwoing code:

Code:

<script src="http://connect.facebook.net/en_US/all.js"></script>

Yes i made these required changes.

i have the same file on my server with proper name.

i have placed this javascript code into <body> section. could it be a cause?

i have this code in my index.html file

Code:

<FRAMESET rows="24%, 80%" frameborder="0">
   
      <FRAME name="f_top" src="top.php">
      <FRAME name="f_bottom" src="members.php">
  </FRAMESET>

top.php is my navigation bar, and all the pages are loaded into the frame f_bottom when click on top.php <a href="page.php">Navigation</a>

:-( what im missing

**chunk** · Aug 20th, 2011, 01:50 PM

this is my whole code. Added in <body> tag. Please correct me if im missing something

Code:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'MY_APP_ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    channelUrl : 'http://mysite.com/fb/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
  });
</script>
<script>
	window.fbAsyncInit = function() {
	  FB.Canvas.setSize();
	}
	
	// Do things that will sometimes call sizeChangeCallback()
	
	function sizeChangeCallback() {
	  FB.Canvas.setSize();
	}
</script>

OR how can i add a timer into this code as you specified in your post

**PBertie** · Aug 21st, 2011, 02:33 AM

Channel.html should only contain 1 line:

Code:

<script src="http://connect.facebook.net/en_US/all.js"></script>

To add a timer that resises the window after 100ms and then does it again after 1 second use this:

Code:

<script type="text/javascript">
//<![CDATA[
  setTimeout("FB.Canvas.setSize()",100);
  setTimeout("FB.Canvas.setSize()",1100);
//]]>
</script>

Also if you remove the following code as it is for when you use the javascript SDK as async.
I tried to use it async but without much luck.

Code:

<script>
	window.fbAsyncInit = function() {
	  FB.Canvas.setSize();
	}
	
	// Do things that will sometimes call sizeChangeCallback()
	
	function sizeChangeCallback() {
	  FB.Canvas.setSize();
	}
</script>

**chunk** · Aug 21st, 2011, 01:53 PM

Originally Posted by PBertie

Channel.html should only contain 1 line:

Code:

<script src="http://connect.facebook.net/en_US/all.js"></script>

To add a timer that resises the window after 100ms and then does it again after 1 second use this:

Code:

<script type="text/javascript">
//<![CDATA[
  setTimeout("FB.Canvas.setSize()",100);
  setTimeout("FB.Canvas.setSize()",1100);
//]]>
</script>

Also if you remove the following code as it is for when you use the javascript SDK as async.
I tried to use it async but without much luck.

Code:

<script>
	window.fbAsyncInit = function() {
	  FB.Canvas.setSize();
	}
	
	// Do things that will sometimes call sizeChangeCallback()
	
	function sizeChangeCallback() {
	  FB.Canvas.setSize();
	}
</script>

i tried everything as you said, but it is not helping me :-(
i might seem irritating to you, but pls don't bother :-( and correct me if im wrong somewhere or what is missing :-|

Code:

 <html>
<head>

</head>
<body>

<?php
for($i=0;$i<100;$i++)
{
    echo $i."<br>";
}
?>

<script type="text/javascript">
//<![CDATA[
  setTimeout("FB.Canvas.setSize()",100);
  setTimeout("FB.Canvas.setSize()",1100);
//]]>
</script>
<script>
	window.fbAsyncInit = function() {
	  FB.Canvas.setSize();
	}
	
	// Do things that will sometimes call sizeChangeCallback()
	
	function sizeChangeCallback() {
	  FB.Canvas.setSize();
	}
</script>
</body>

</HTML>

this is my example source code, and yes i do have channel.html on my server and it contain only this line of code

Code:

<script src="http://connect.facebook.net/en_US/all.js"></script>

please make this example work and i will change in the real app :-|

**PBertie** · Aug 21st, 2011, 05:49 PM

The two red text need to be changed to match your site as you know. The Green text I've changed the values to false as status means it tries to check the users access straight away but you are only using the JavaScript SDK for resizing so no need. xfbml means you can use facebooks own markup and it will parse the page, again no need for your usage.
You'll also have to check that in the settings for the App ID you are using it has the same domain as you are accessing it. e.g. if your App ID is setup to use http://www.mysite.com/testpage.php then this script doesn't work if you type in your browser http://localhost/testpage.php. Whats worse is that if the problem is because this domain name it just doesn't respond to requests and doesn't tell you thats the problem.

Code:

<html>
<head>
  <title>Test Page</title>
</head>
<body>

<?php
for($i=0;$i<100;$i++)
{
    echo $i."<br>";
}
?>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'MY_APP_ID',
    status : false, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    channelUrl : 'http://mysite.com/fb/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
  });
</script>

Blah Blah Blah <br/>
Blah Blah Blah <br/>
Blah Blah Blah <br/>

<script type="text/javascript">
//<![CDATA[
  setTimeout("FB.Canvas.setSize()",100);
  setTimeout("FB.Canvas.setSize()",1100);
//]]>
</script>
</body>
</html>

channel.html:

Code:

<script src="http://connect.facebook.net/en_US/all.js"></script>

**chunk** · Aug 23rd, 2011, 01:50 PM

i tried it :-( but it did not work.
Can i send you a PM to give you some trustful data? that i can't post here in the thread, if you dont mind

**PBertie** · Aug 23rd, 2011, 02:55 PM

Yea sure.

**chunk** · Aug 24th, 2011, 02:24 PM

thank you :-)
Sent

**PBertie** · Aug 24th, 2011, 03:22 PM

It looks like the problem is that your facebook app is the page:

Code:

<FRAMESET rows="24&#37;, 80%" frameborder="0">
      <FRAME name="f_top" src="top.php">
      <FRAME name="f_bottom" src="members.php">
</FRAMESET>

So when you run the setSize() inside members.php it resizes the facebook iframe to get rid of any scroll bars on it. But the scroll bar is on the members.php frame not the iframe.
What you need is either a way to resize the body of the page I quoted before running setSize() or rewrite your pages to get rid of the frames and just write your menu at the top of each page.

**chunk** · Aug 24th, 2011, 03:34 PM

yes you are right, this is the only problem.
THank you my friend :-)

Thread: [RESOLVED] Facebook app iframe help

Thread Tools

Display

[RESOLVED] Facebook app iframe help

Re: Facebook app iframe help

Re: Facebook app iframe help

Re: Facebook app iframe help

Re: Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Re: [RESOLVED] Facebook app iframe help

Posting Permissions