How to remove scrollbars from canvas on Firefox - facebook

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);
});

Related

FB app into Tab not getting more than 520px width

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.

FB.Canvas.setSize and dynamic content?

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/

fb:comment is setting wrong height (cuts comments in half)

I'm building a GWT application and am trying to dynamically add facebook comment boxes in certain places. This is working fine, except that the facebook SDK isn't calculating the height correctly. It always sets it at 160px.
This means that only half of the first comment is visible, even if there are multiple comments (i.e. it gets visibly cut in half). If I use the same code outside of GWT it works fine (i.e. the height is calculated correctly).
Does anybody know how the facebook SDK calculates the height of the box? Or what else I can try?
The details:
I initialise the facebook SDK as follows:
public static native void initFacebookSDK()
/*-{
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '<my-app-id>', // App ID from the App Dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true
// parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK's source Asynchronously
(function(d, debug) {
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"
+ (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, false));
}-*/;
I add the div as follows:
//_root is a vertical panel
_root.add(new HTML("<div id=\"mydiv\"></div>"));
and then I populate the div like this:
public static native void showComments(String currentUrl_)
/*-{
var mydiv = $doc.getElementById('mydiv');
mydiv.innerHTML = "<fb:comments href='" + currentUrl_
+ "' num_posts='5' width='422'></fb:comments>";
FB.XFBML.parse(mydiv);
}-*/;
The problem is that the facebook SDK always populates the div with the following:
<span style="height: 160px; width: 422px;">
<iframe ...>...</iframe>
</span>
whereas if I don't use GWT, the height parameter changes appropriately, e.g:
<span style="height: 1469px; width: 422px;">
<iframe ...>...</iframe>
</span>
Hope someone can help.
Worked it out.
In JSNI I should be using $doc and $wnd, instead of document and window, respectively. https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsJSNI#writing
In my defence I had tried this, but the missing ingredient was that I needed to reference the FB object as $wnd.FB, e.g:
$wnd.FB.init(...) and $wnd.FB.XFBML.parse(...)
Hope this helps someone.

FB App .. scroll bars showing when page is less than 520px wide

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>

Facebook App iFrame - Using FB.Canvas.setSize(); and FB.Canvas.setAutoGrow();

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