I have multiple apps on facebook and am having an issue with one app. It is rendering wider than 520px which is causing scroll bars to appear, even though all my content fits on the screen (just white space when you scroll over). I have double checked my css styling and settings and it appears to be the same as another app that is rendering correctly. Any suggestions?
Here is a link to the app giving me the issue.
https://www.facebook.com/slp.cc#!/slp.cc?sk=app_195351823894125
if you look at the 2012 snow show schedule, it renders correclty.
I had a similar problem and changed the css of body! Just try to do the following and change the numbers u need:
position:relative;
top:-5px;
left:-5px,
width:520px,
You can try using FB.Canvas.setAutoResize(). It will get rid of both horizontal and vertical scrollbars.
Refer the following snippet:
<body onload="sizeChangeCallback()">
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR APP ID',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse XFBML
oauth: true
});
FB.Canvas.setAutoResize(); //set size according to iframe content size
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
function sizeChangeCallback() {
FB.Canvas.setAutoResize();
}
</script>
If the scroll bar still exists, you set the overflow style of the body as hidden.
EX: <body style="overflow: hidden; onload="sizeChangeCallback()"></body>
Related
I'm testing an app and when not on a page's tab it's fine. I need it to be wider than 520px.
First of all, this is the html's code for setting the proper height.
window.fbAsyncInit = function () {
FB.init({
appId: '1428427990741852',
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setSize({ height: 1100 });
};
// Load the FB SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
} (document));
That's OK, the height is properly set as you can see is the app's iframe
<iframe class="smart_sizing_iframe noresize" frameborder="0" scrolling="yes" id="iframe_canvas" name="iframe_canvas_fb_https" src='javascript:""' height="1100" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen="" allowfullscreen="" style="height: 1100px;"></iframe>
Now, if we check that same iframe after the app is loaded inside a page (as a tab), here's the result.
<iframe name="app_runner_fb_https53cc3ca1018792924747227" id="app_runner_fb_https53cc3ca1018792924747227" style="width: 520px; height: 1100px;" frameborder="0" src="https://s-static.ak.facebook.com/platform/page_proxy/hv09mZVdEP8.js#app_runner_fb_https53cc3ca1018792924747227" class="noresize"></iframe>
As you can see, there's the 520px width automatically set.
I have tried changing the Canvas Fixed Width property to YES so the app's width is set to 760px but I'm still getting a 520px width.
Also, I've tried forcing the width's px right in the code FB.Canvas.setSize({ width:760, height: 1100 }); but still, it's stucked in 520px.
Here you can see the app, alone by itself and as a tab.
Thanks.
TAB
Alone
PS. Not sure if this is of value but I'm using fbootstrap which has a 760/520px grid system but that I assume has nothing to do with fb's iframe itself.
Check the settings of the Page Tab in the App Settings, where you added it as "Platform" (https://developers.facebook.com/apps/[your-app-id]/settings/). There is a switch with the following text: "Wide Page Tab?" Switch that one to "YES" and your Tab should be 810px.
I have a webpage inside the Facebook iframe canvas. I set this:
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: '112144505628023',
status: true,
cookie: true,
xfbml: true
});
window.fbAsyncInit = function () {
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
but inside the page I have a jquery animate that increase the height when a user click on a element. This create the scroll of the right.
How can I fix this? Is there a FB.Canvas.autoSetSize()?
Yes there is, the only drawback is that on your app settings you must specify a fixed height of 800px and then use:
FB.Canvas.setAutoGrow()
Here's more info: https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/
But if you know when your content is going to change you should use
FB.Canvas.setSize()
https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/
Firefox is adding scrollbars to the canvas even with the body set to overflow:hidden and the execution of FB.Canvas.setAutoResize();. Every other browser hides the scrollbars. When I remove all content from the page the scrollbars persist.
Sample: https://apps.facebook.com/fbtestapppb/
With the introduction of Facebook Timeline the way to remove scroll bars and control page margins has changed. First (and most importantly) your body padding and margins MUST all be set to zero. This ensures all browsers process your canvas settings off absolute zero.
Depending on the 'Page Tab Width' (520px or 810px) option you set in your Apps/Page settings you will need to adjust the width in the following code. This block should be placed in the page Head:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
Just below the Body tag add the following code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 1000 });
}
</script>
Remember to change 'YOUR APP ID'. Also width: should equal either 520 or 810. Set height: slightly larger than you require to allow overflow.
This solution has been tested in IE, FF, Safari and Chrome!
I added this to my css and it seemed to work:
body {
margin-top: -20px;
padding-top: 20px;
}
If you already have padding added to the top of your body, you will likely need to add 20px to it.
I assume it's because firefox measures the body height differently than other browsers.
Tested in ff8, chrome16 and ie9 with no negative repercussions.
I had solved this problem that way:
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
window.fbAsyncInit = function() {
FB.init({
appId : app_id, // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
var height_doc = $(document).height()+20;
FB.Canvas.setSize({height: height_doc});
};
It's works for me. I hope that help.
This is a known issue with canvas apps and page tabs, and has annoyingly been around for quite a while.
https://developers.facebook.com/bugs/309917422436936
Some people mention being able to use FB.Canvas.setSize({ width: 700, height: 800 }); or something like FB.Canvas.setAutoResize(500); and it gets around the issue.
Have you definitely set the iframe auto resize option in the apps control panel too?
Forget about body and html margins (I mean set them to zero).
Just place all your content (including header and footer) into a table with single cell.
At least all browsers will agree on how to calculate the height of the table...
like this:
<table id='m_table' width=100% align=left border=0 cellspacing=0 cellpadding=0>
<tr><td valign=top bgcolor=white align=center style='position:relative;'>
and do this :
setTimeout(function() {FB.Canvas.setSize({height:(document.getElementById('m_table').offsetHeight+40)})}, 1000);
works in IE,FireFox and Chrome/Safari...
Here is FB initialization code if you need it:
window.fbAsyncInit = function() {
FB.init({appId:'your_app_id',status:true,cookie:true,xfbml:true});fbApiInit = true;
}
function fbEnsureInit(callback)
{
if(!window.fbApiInit) setTimeout(function() {fbEnsureInit(callback);}, 50);
else if(callback) callback();
}
fbEnsureInit(function() {
FB.Canvas.scrollTo(0,0);
var h = document.getElementById('m_table').offsetHeight+40;
// console.log('setting size to '+h);
FB.Canvas.setSize({height:h});
setTimeout(function() {FB.Canvas.setSize({height:(document.getElementById('m_table').offsetHeight+40)})}, 1000);
});
I have an app that uses the Javascript SDK and the height is being determined initally through FB.Canvas.setSize();. This is working correctly:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '223615011031939',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
// channelUrl : 'http://www.yourdomain.com/channel.html', // Custom Channel URL
oauth : true //enables OAuth 2.0
});
FB.Canvas.setSize();
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
But say there is content on the page that would expand, making the height larger than the set iFrame size after init. I tried using FB.Canvas.setAutoGrow(); with various parameters passed through it, but it would give me a refresh loop and expand the height by a little but each time.
So my question is, how do I get the setAutoGrow function to work apporpriately, resizing the iFrame only when the content grows and not at set intervals? If it only can be on set intervals, only refresh when the content actually grows.
Thanks again in advance!
Refer to this page:
https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/
"This function is useful if you know your content will change size, but you don't know when. There will be a slight delay, so if you know when your content changes size, you should call setSize yourself (and save your user's CPU cycles)."
So, if you have some javascript functions that increase the height you can call the setSize method, otherwise setAutoGrow and specify a longer or shorter interval
is there any way how to auto resize the iframe(canvas) to show all my content? I don't want the scrollbar. I tried every JS method and nothing worked.
It's possible but it's quite tedious. See this answer here: Resizing an iframe based on content
Or...
jQuery(window).load(function(){
FB.Canvas.setSize();
});
Wait till everything has loaded then reset the size.
I use this code and it works for all content height's, even when I need to decreased it:
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth: true
});
FB.Canvas.setSize({height:600});
setTimeout("FB.Canvas.setAutoGrow()",500);
};