I have this Facebook application profile page:
http://www.facebook.com/developers/editapp.php?app_id=122313254494566#!/apps/application.php?id=122313254494566
which is associated with my iframe-based Facebook application, Gem Spinner:
http://apps.facebook.com/gemspinner/
What I'm seeing is that, depending on the window height, my iframed content will appear with a fixed height and a scroll bar, instead of just flowing down the page (and off the bottom of the page, as necessary), as I would like. When I make the window shorter, the scroll bar appears; when I make the window taller, the scroll bar disappears. My understanding is that it's Facebook determining this height and adding the scroll bar (but maybe I'm wrong about that). In any case, I would appreciate any help in understanding this and letting my content flow down the page as necessary.
Well, I did a few things to get it to work.
(1) In my application settings, under the Facebook Integration tab, under IFrame size, I chose Auto-resize instead of Show scrollbars.
(2) I loaded the Facebook connect API (see code below).
(3) I called FB.Canvas.setAutoResize( 100 ) in two different places. I call it twice because it wasn't clear to me which location would make it take effect more quickly. In early testing, I was seeing the iframe height start out short (maybe 800 pixels tall) and then grow to the full size of my content (maybe 1100 pixels tall). In subsequent tests the iframe resizes immediately so I don't see the two states. So I'm not totally clear on the timing/mechanism here.
<body>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
FB.init({
appId : 'your app id here',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : false // parse XFBML
});
FB.Canvas.setAutoResize( 100 );
</script>
... the rest of the page body goes here ...
<script type="text/javascript">
FB.Canvas.setAutoResize( 100 );
</script>
</body>
Related
This has been driving me completely nuts for months now. I have created an app for the sole purpose of displaying content customized for facebook from my company's website.
We want something like this: http://www.facebook.com/FarmersInsurance?sk=app_7146470109
But end up with this: http://www.facebook.com/DeltaFlexTravelers?sk=app_110411285713674
I can't get rid of the damn scroll bars! I've done everything that other answers to this kind of question suggest to no avail. I am explicitly setting the width and height using FB.Canvas.setSize(). nothing.
I am wondering if FB.Canvas.setSize() does not work when displaying the content as a page tab. If that is the case how do you get rid of the freakin' scrollbars on an app displayed as a page tab?
Even with the width set in IE I get scroll bars and cut off content. Had to cut it down to 510px. 520 is the max but different browsers may have different dpi settings. Either that or MS gave IE a different definition of a pixel.
Try creating a wrapper div that is the size you want (default 520x800 )and then set the overflow to hidden. Forces you to design within the space but got rid of the scrollbar issue for me. You'll probably also need to set the margin:0,padding:0 for that div as well. If you need more specifics you can look at http://facebook.com/xocialhost at the page tabs we've built. Feel free to look at the source stylesheet which is a modified version of the HTML 5 boilerplate that we've customized to work for our FB apps.
You need to do two things:
1. Use FB.Canvas.setSize(). As an extra hammer use the setAutoResize with a short delay.
2. Set your tab page CSS to overflow = hidden;
Here is the setSize Portion:
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
FB.Canvas.setAutoResize(7);
And here is the CSS portion:
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
Did you try with setting up size? What I always do to get rid of scrollbars is to set 2 things:
Container of my app is always 520px width, and have overflow: hidden set
Height of tab I set with JS API is always bit bigger then actual HTML height.
It always work for me...
And this is the code I'm using:
window.fbAsyncInit = function() {
if(typeof(FB) != 'undefined') {
FB.init({
appId: 111111111111111, xfbml: true, status: true, cookie: true, oauth: true
});
FB.Canvas.setSize({ width: 760, height: 1250 });
}
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
Situation: I have a page with an iframe, which contains a form. But the iframe is longer than a screen page and the user has to scroll down to submit it. But it loads just the contents of the iframe, so it'll be scrolled by the same amount before submitting the page. I want to be at the top of the page. But since the user scrolled the facebook page and not the iframe, I cannot use scrollTo (not allowed for cross domain iframes).
Question: Is it possible submit the form to facebook to reload the entire page and still gives me access to the form data?
Not completely sure if this is what you're asking, but if it's an iframe app you can use FB.Canvas.scrollTo to control the main Facebook page position. You can either call it selectively or you can put code like this in the <head> section of every page:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type='text/javascript'>
window.onload=function() { FB.Canvas.scrollTo(0,0); }
</script>
That way every time you load a new page in your iframe, the main page will return to the top.
As of today my social commenting plugin is getting cut off.
In my tab page settings I chose fluid for height.
I have my main div with height:100%
Then i have a script that I used to auto resize the page and show all the comments if you clicked show more. This was working fine yesterday.
<script>
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>
Here is a link to my tab page:
http://hostfb.com/files/2598/af1d87a797314ed16ec3db8b3f094c45f30f8cf3/
https://www.facebook.com/dewafelbakkers?sk=app_246342282051389
I need my page to extend to show ten comments and then extend more to show more comments if clicked.
Remove the fixed height of 500 on the div that wraps the plugin control (right about fb-root div).
What is the maximum iframe width of a facebook page?
It was 520px.
As with a Canvas Page, the amount of space available to your app is
bounded by the outer context of Facebook. Since your app is also
loaded inside of Facebook Page, the space is smaller (520 pixels) than
what is available to on a Canvas Page.
from FB docs (yes i know that doc about canvas and it's only mentions iframes, but i cannot find quickly reference to full iframe documentation)
Important Update
On the March 30th 2012, Facebook changed this to 810px, to match the new design of timeline.
And here you have a screenshot of the Facebook app, with width 810px.
It's 810 px wide. You don't have to worry about scrollbars if you use the following code...
<!--in head section-->
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
<!--at the bottom of your page right before the closing body tag-->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '320332891360172',
status : true, // check login status
cookie : true, // this allow the server to access the session
xfbml : true // parse XFBML
});
</script>
For future reference, you can set the frame width to be floating inside advanced settings of app. This allows you to have any width for your app.
See http://developers.facebook.com/blog/post/549/
I created a custom facebook landing page using the same template I have used 3 times before. The problem is, this time, ther vertical scrollbar won't go away. This is the resizing code I have been using:
<script type="text/javascript">// <![CDATA[
window.fbAsyncInit = function() { FB.Canvas.setSize({ width: 520, height: 1200});}
function sizeChangeCallback() { FB.Canvas.setSize({ width: 520, height: 1200});}
// ]]></script>
and at the bottom of the page:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
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
});
// ]]></script>
My CSS uses body {overflow: hidden;}, inside my app "auto resize" is selected. The issue is not that the ifarme won't resize (it does), it's that I have an empty vertical scrollbar on the right that won't go away.
Since the iframe design uses the whole 520px width, the empty vertical srollbar gives me the dreaded horizontal scrollbar. Judging by the width of the horizontal scrollbar, it's the vertical scrollbar causing it and not anything (that I can find or see) in the HTML/CSS making the page wider than 520px. The problem happens in IE8, IE7 and Firefox.
You can see the page here.
I have tried a few variations of the javascript code from a few different sources, but no luck. Not sure if this is something small I'm missing or if it's yet another facebook bug. This problem is not present on any of my other facebook iframe landing pages. After searching around for an answer and coming up with nothing, I've hit a wall with this one.
Its this code
html {
overflow-Y: scroll;
}
in your style.css style sheet thats causing the problem. When I inspect it with Chrome and remove that value, the scroll bars disappear.