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/
Related
This is not a scrollbars question. Here is the thing:
You load your Facebook canvas app and do a FB.Canvas.setSize({height:900}); (works)
You move to another section of your app (some link) and then do a FB.Canvas.setSize({height:1300});
The second step doesn't work. The app iframe remains at 900px height.
What I need, is to change the canvas height dynamically after it has already been set. According to the Facebook documentation, this should work. They do not specify if you can or cannot change the canvas height once it has been set.
I've tried the same method on page tabs and it works, I can properly resize the height of the tab using setSize(), however, it seems like canvas pages behave differently (?).
This is the code I am using, right after opening the body tag:
<div id="fb-root"></div>
<script type="text/javascript">
<!--
window.fbAsyncInit = function() {
FB.init({appId: "XXXXXXXXXXXXXXXXXXXXX",
status: true,
cookie: true,
xfbml: true});
};
(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);
}());
window.fbAsyncInit = function() {
FB.Canvas.setSize({height:1300});
}
//-->
</script>
The designer made a Canvas app using different heights and so far its has been a pain to implement.
You're assigning different things to window.fbAsyncInit in two different places. You should just get rid of the second assignment and move the FB.Canvas.setSize call to right after the FB.init call (or replace the FB.init call, as you don't need it if you're only using the SDK for resizing; obviously keep it if you are doing auth stuff with it as well).
I know this topic has been asked about and answered multiple times but please believe that I have spend many hours searching for help and answers that work and/or I can actually understand.
It's the same ol' issue:
I have figured out how to add a custom tab and even a custom icon for it (and I am really happy to have been able to do even that!).
But, as per many other requests for help, it has the dreaded scroll bars.
I, like the others, want it to flow down past it's limited 800px size.
I have several different fixes for this, some I have tried unsuccessfully and some just go right over my head and I do not understand what is being written at all, where it goes and what needs to be edited in it.
I would really appreciate someone taking the time to walk me through the process and explaining the what's and how to's please.
View page here: http://www.bronts.com/bronts_facebook/index.html
View page within facebook here: http://www.facebook.com/pages/brontscom/191839754181703
You will need to use javascript sdk to autosize the iframe in a pagetab app. You will need to have an application id for this. Refer to https://developers.facebook.com/docs/reference/javascript/
the FB.Canvas.setAutoResize(); sets the height of the canvas.
here is working example on my app. http://www.facebook.com/apps/application.php?id=135669679827333&sk=app_135669679827333
NOTE: setAutoResize(); will be changing to setAutoGrow();
ALSO: you may need to reduce the width of your image, not sure until auto size is in place.
---------- i use this and add just below the < body > tags of my documents.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
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 : true, // parse XFBML
//channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
/* sets auto size to app canvas and page tab app. */
FB.Canvas.setAutoResize();
};
(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);
}());
</script>
Add overflow: hidden; to your body and use jQuery.ScrollTo to navigate inside iframe.
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function()
{
FB.init({ appId: '1375268019431848',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setAutoGrow();
FB.Canvas.setAutoResize();
}
</script>
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.
I am using Facebook C# SDK in my ASP.net application.
I have an iFrame application whose iFrame Size set to Showscrollbars.
The application was working fine till yesterday, but today the iFrame is not stretching to its width (From the documentation Facebook's iFrame width is 760px Link here). The page in my application's width is set to 95%. So I think its not a width problem in my application.
.
I have to use Showscrollbars option for my application.
Did facebook Changed any settings for the iFrame Apps? Help please.
UPDATE Looks like facebook broke something or they are trying to get rid of scrollbar options. I have to change my application to use AutoResize Option. I made the following changes to my asp.net application and it is working fine except one issue (see at the bottom of the question)
<head runat="server">
<title></title>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.Canvas.setAutoResize();
};
</script>
</head>
<body>
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: '12345678', //replace with your facebook appid
cookie: true,
status: true,
xfbml: true
});
</script>
</body>
iFrame stretches vertically when the content increases. That's cool but the
ISSUE is Read Here on StackOverflow. I am working on it. If any one figures it out please let me know.
I had the same problem and fixed it with this simple bit of CSS in the iFrame page
body {overflow:hidden;}
everything still fits nicely, with nothing cut off. just gets rid of those pesky scrollbars!
it certainly sounds like a bug, worked fine in all other browsers but FF 3.6
adding the above also has the advantage of not having the srollbars momentarily show on load.
Use code below and it's works on all of my iframe apps :)
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: '123456789',
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoResize();
FB.Array.forEach([200, 600, 1000, 2000, 5000, 10000], function(delay) {
setTimeout(function() {
FB.Arbiter.inform("setSize", FB.Canvas._computeContentSize());
}, delay)
});
</script>
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>