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.
Related
I've got a Facebook App that I've created. I want it to be 760 px. wide however it seems to be stuck at 520 px. When I view the source generated by Facebook I see this.
<-- <iframe name="app_runner_fb_https4fa04becb1d045950954937" id="app_runner_fb_https4fa04becb1d045950954937" style="width:520px;height:800px;" frameborder="0" src="https://s-static.ak.facebook.com/platform/page_proxy.php?v=4#app_runner_fb_https4fa04becb1d045950954937"></iframe> -->
That seems to indicate that it is using 520. Yet, the settings seem correct in the Advanced Developer panel.
Using Google I see a bunch of reported problems from years ago with 760 px; however, the option is still in the settings. Does this option work? Recently Facebook moved pages to timeline which freed up the left nav-bar. My app looks stupid without that space taken. It sits in the center of the page with 100+ white pixels on each side.
That screenshot is a setting for the width of your canvas app (apps.facebook.com/something), and the options are fixed to 760 or fluid width (which is dependent on your own CSS too, of course)
However in your post you mentioned Timeline and Pages, which implies your app is a page tab app accessed as a tab on a Facebook page.
If that's the case, the width setting which applies isn't there, it's under Page Tab on the front page of App settings and can be set to either 520px or 810px
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 could not find an anwser to my question, beside it is hard to explain it in a few words.
my FB App is an iFrame Canvas, when I set the width to "fluid" the top status bar is left aligned.
when I change to fixed width, I am expecting that I got the same layout like FB always is, the status bar centerd, and my app next to the realtime app activity tab.
But the FB layout is still like "fluid" and my content is fixed width (760px) and is centerd, so I have white space all around it.
I want just the normal FB Layout, statusbar centered, my content is centered right next to it should be the activity tab and only left from my content should be whitespace.
Can anyone tell me how i can set it up right?
Here some screenshots to clarify:
expected: http://oi39.tinypic.com/t88dat.jpg
fixed: http://i40.tinypic.com/24drivk.jpg
fluid: http:// i44.tinypic.com/2po31tt.jpg
greetings
Try having the body style be {position: relative; left: someValue;}, where someValue is calculated based on the window width. So it would be something like someValue=(windowWidth - facebookSidebarWidth - yourcontentWidth) / 2;
I think you can subscribe to the window resize event and dynamically change the left float value according to the above.
I am having the weirdest problem. I'm trying to make a page that fits a resolution of:
width: 640;
height: 960;
for the iphone. But there is a hidden element that I can't access with the Developer toolbar or Firebug that is adding an extra 100pixels to the right of my page.
I've set the correct height and width for the html, body, and main containers but I'm still having the same issue.
You can replicate the problem by going to the following page and resizing your screen just below 740px wide. When you do this you see the horizontal scrollbar popup around 740 pixels. Here's an example page with the issue.
The scrollbar shouldnt popup until the window is resized down to a 640 pixel width because thats what I have all the elements assigned to.
The main overall issue is that when viewed on the iphone4 there is a 100 pixel gap on the right side of the screen that no matter what i do I cant get rid of because some element is making the page 740px width instead of 640.
My boss and I have been working on this for hours and still cant figure out what is causing that extra 100 pixels on the right.
Any suggestions would be greatly appreciated.
Place overflow: hidden on your HTML CSS attributes. Not sure where that element is coming from, but that will prevent anything from making scroll bars appear.
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.