i read it was going to be changed to 520px in early 2010, but i keep seeing pages that are new that are the older 760px width - is it safe to build at the wider width still or should we be building at 520px?
Do you mean a Page page or an app Canvas page? As far as I know, app Canvas pages are staying at 760px, and I think a reduction is very unlikely. The application tabs on Pages (and user profiles) are being reduced to 520px, though, so if your application is going to be displayed there then I'd work to that dimension.
Am I late? lol... yes...
It's now 810px ;)
So it sounds like the "max" width is 760px, but the "best" width would probably be what the newest is (as the old width might be dropped at some point)
They are unlikely to mandate reduction in width across all apps; the current max is 760px, so I would use that.
There are 2 types - Canvas Apps, which live on http://apps.facebook.com/YOUR_APP_NAME) or Page Tab apps which reside on a page like this one Starbucks.
Canvas width and height can be set as fluid or fixeed. Fluid means it will fill the whole page, so you have no width restriction. Fixed width is set at 760px.
Tab apps used to be 520px, but now you have the option of 810px as well - you can set this in the developer app.
Related
Up until about 3 days ago my Facebook canvas height would automatically adjust to fit the height of the window. This was something I was relying on because my app was responsive based on the canvas height. But now from out of nowhere the iframe_canvas iframe has a min-height property set to 800px. So if my window drops below that height, the canvas doesn't adjust to match. Anyone got any idea why this was suddenly added and more importantly how I might go about removing it?
I raised a bug with Facebook and they tell me that this is a known bug that they're currently working to resolve. In the meantime they've given me a workaround. All you need to do is set the "Canvas Fixed Height" setting to yes and then give it a value, say 10. Save that and then set the "Canvas Fixed Height" setting back to no. Save it again and the problem should be solved.
My Facebook app (iframe / fluid / Fluid) shows a horizontal scrollbar. All attempts to remove it have failed.
I've tried all the solutions posted here, regarding FB.setAutoGrow(), FB.setSize(), etc... with no luck, but I found something interesting:
The scrollbars that appear are not related to my application, but related to the commercials at the side.
In the image you can see what I'm talking about:
To the left is a portion of my Iframe App. While the Iframe has been correctly resized (I've checked with Firebug - right) and their sizes are all right, there's that horizontal scrollbar at the bottom that affects the whole facebook window (not just my iframe).
The highlighted item on Firebug is what causes the horizontal scrollbar. They don't belong to the pagelet div (the div where the iframe resides): It's part of the carousel of recommended games to the right ! (and its width is > 5000 pixels).
When I first launch my app, there are no scrollbars fora little time interval, like 500ms, then they suddenly appear.
FB.Canvas.setSize , FB.Canvas.setAutoGrow seem to work, if I invoke them manually, they do resize the iframe, etc. but they don't remove the scrollbar.
I have body:overflow=hidden.
(may be related?) My app uses itself another iframe, width and height 100%, that is where the action takes place. That other iframe also has overflow=hidden.
This has traditionally worked. I stopped paying attention to Facebook for a couple months, then I saw this yesterday :(
What can be happening? My guess is somehow Facebook thinks my app needs horizontal scrolling, removes overflow-x:hidden in the main body in order to allow it, but this intererferes with their carousel that expects a hidden overflow... I don't know if this problem is at all my fault or a Facebook Bug.
Fortunately, this bug has been solved by Facebook. Everything is working now.
I am having an issue where the background image is cutting off to the right when you scroll left to right. This is happening when the app is hosted in the iframe for our business facebook page, not when you go to apps.facebook.com. I have changed the canvas width to fluid and it is not helping.
This is an example of what I am talking about, try scrolling to the right:
https://www.facebook.com/pages/TeleManager-Technologies-Inc/134181063301299?sk=app_241678922556190
This is the link for an actual app:
http://apps.facebook.com/irefill
As you can see in the second link, nothing is being cut off to the side. I tried playing with some css properties such as "overflow" and it still didn't help.
Thank you for your help.
I added a width to your body tag within side of the iframe body - {width:1000px;}
Because you hadn't declared a width on the , it was inheriting the width from the iframe it is nested in, which is 520px, the max-width for facebook page tabs.
Add on a width to your that is larger than the width of the image that is being cut off and you should be good to go.
You only have 520 pixel width to stay inside of on Facebook.
try limiting the
body{width:520px;}
I noticed that yesterday all the Fixed-width canvas apps started looking strange: the Facebook chrome is pushed away from the canvas and takes up all the browser page's width, as it does for Fluid-width apps (see Farmville for example).
Is this a permanent behavior, or a bug?
If it's not a bug, is it documented anywhere? I could not find any info on that on Facebook's developer documentation.
(Most fixed width apps look kind of strange right now)
Cheers,
Julien
Facebook have added fluid width to all canvas applications.
You can find it if you go to:
https://developers.facebook.com/apps
Edit Settings
Settings -> Advanced
Canvas Settings -> Canvas Width (Fixed sets the canvas page width to 760 pixels. Fluid left aligns the canvas page and sets the width dynamically to fill the page.)
Interesting links:
Blogpost from Facebook devs on the subject.
Showcase of games that use fluid width
This was indeed a permanent behavior, though not documented beforehand.
UPDATE: I just learned that the iframe width is 480 px only when viewed over a secure connection, possibly because I am using social-server.com rather than having my own ssl.
I've designed a page tab to be displayed in a Facebook iframe. I designed it with 520 px in mind as the maximum width. However, Facbook loads the page in an iframe that is only 480 pixels wide.
It looks like it is supposed to be 520 pixels wide, because there is extra white space between the iframe and the next column. Also, I checked other pages with other custom tabs, and their iframe is 520 pixels wide.
So I wonder if this is a new limit on new custom tabs. I really appreciate your help!
Custom tab width is 520px, perhaps you need to set body margins to 0px in your css. Check this out.
i was struggling with this too - 480px wide is not actually a restriction, but it is the width your page will become if a vertical scroll bar get inserted - which happens if you don't specify the length of your page on the social server interface. you can change the dimensions, and hit the yellow refresh arrows, then refresh in facebook and it should look how you intend.