You can access FB.Canvas.getPageInfo to read the information but they seem to be no way to scroll to a precise position in fluid height since FB.Canvas.scrollTo is only enabled when Canvas Height is set to "Settable (Default: 800px)" according to the developer documentation.
Any idea why? Is there any workaround?
Related
I want to set up Page Plugin on my website to display nicely on screens with a variety of resolutions and pixel densities. In order to truly achieve that, I'd have to have to possibility to use rems in data-width attribute. Unfortunately, when I enter a rem value, the data-width attribute is ignored.
Is there a way to make the plugin behave nicely with rems?
To make the Facebook Page Plugin responsive on initial page load, instead of using rems, you'll want to remove the data-width attribute and instead add
data-adapt-container-width="true"
This will make the Facebook Page Plugin responsive, but only on the initial page render, with a minimum width of 180px.
I'm still trying to figure out how to make it truly dynamically responsive, in spite of Facebook's caveat (I'll post an update if I ever find the answer).
No Dynamic Resizing
The Page plugin works with responsive, fluid and static layouts. You
can use media queries or other methods to set the width of the parent
element, yet:
The plugin will determine its width on page load.
It will not react changes to the box model after page load.
If you want to adjust the
plugin's width on window resize, you manually need to rerender the
plugin.
Source: https://developers.facebook.com/docs/plugins/page-plugin
You could make it dynamically responsive by reinitializing the widget on browser resize, but by doing that you run the risk of eating up memory very quickly.
There is some other stuff you can try here as well
Responsive width Facebook Page Plugin
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.
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.
A question about Canvas Height setting in the Facebook Settings.
There are 2 options Auto-Resize and Fluid and they seem to function in the same way.
In the Canvas Tutorial, it seems that the 2nd option should be scroll bars for Canvas Height, so I'm assuming that Fluid option is a new feature.
But what is the difference between Canvas Height set to Auto-Resize or Fluid?
Here is the documentation
http://developers.facebook.com/blog/post/549/
If you would have placed your cursor over the question sign near the Canvas Height option, you might have seen this:
"Settable allows you to set the height via FB.Canvas.setSize() method in JavaScript SDK with default set to 800px. Fluid sets the height dynamically to fit the page and shows scrollbars if content exceeds the page size."
Also, the options are not Auto-Resize and Fluid, but Settable and Fluid
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.