I've tried several snippets of code I've found from various sources, including Facebook itself and stackoverflow, but none of them work to increase the default length of the custom tabs I created for a client. I've listed the methods I've tried below.
One variable I haven't been able to play with is the Canvas Height setting described on Facebook's FB.Canvas.setSize page. It is nowhere to be found on my App Dashboard. http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/
It says: "Note: this method is only enabled when Canvas Height is set to "Settable (Default: 800px)" in the App Dashboard."
And here are the various methods I've tried to resize.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '215615521792601', status: true, cookie: true, xfbml: true});
<!-- EACH OF THESE THREE LINES BELOW WAS TRIED ONE AT A TIME.-->
FB.Canvas.setAutoResize(true);
// FB.Canvas.setAutoGrow(true);
// FB.Canvas.setSize({ width: 520, height: 1576 });
};
And here is another method I found:
<!-- FACEBOOK TAB LENGTH FIX HEADER START -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<!-- FACEBOOK TAB LENGTH FIX HEADER END -->
<!-- FACEBOOK TAB LENGTH FIX BODY START -->
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize( 100 );
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 2400 });
}
</script>
<!-- FACEBOOK TAB LENGTH FIX BODY END -->
Thanks for any and all help! I'm completely stumped and frustrated!
Canvas Height option is available in "App on Facebook" section under Basic Settings in App Dashboard.
Related
I have my Facebook Tab I create who contains 3 div blocks, but the height is too big, and I have a scrollbar.
That's why I put "overflow: hidden" CSS with the body html.
And it was not working.
So I find a good thing on the web :
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'MY_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize( { height: 1000 } );
}
</script>
That's only working on Firefox and Safari, but on Chrome & IE I don't have the scrollbar, but if I want to go on the bottom of my tab I have to left-click to can scroll and see the botton.
How I can adjust this thing on Chrome & IE ?
Do you think my CSS id bad ?
Check this out: https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/ and take a look at the other Canvas Methods links at the bottom of the left column.
It's been a few months since I've updated at my own app re-sizing code, and this stuff changes all the time, but the following is working for me placed just before the closing tag of your page. I can't remember for sure, but you may need style="overflow:hidden" in your opening body tag as well.
Hope this helps :)
<script type="text/javascript" language="javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" language="javascript">
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
});
window.fbAsyncInit = function () {
FB.Canvas.setSize();
}
FB.Canvas.setAutoGrow(7);
</script>
There is also this I found for you: http://petetasker.wordpress.com/2012/10/31/facebook-set-auto-grow-a-version-that-actually-works/
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID'
});
FB.Canvas.setAutoGrow();
}
</script>
when calling the FB JS, makes sure it not absolute. Depending on viewers SSL settings it could throw an error and the autoresize will not work.
Wrong:
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
Right:
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
None of the answers that used setAutoGrow() worked for me, so I had to calculate content height with JavaScript and then use setSize() accordingly.
window.fbAsyncInit = function() {
FB.init({
appId : 1234567890,
xfbml : true,
version : 'v2.3'
});
// Find the container that spans your entire content
var contentWrapper = document.getElementById("content-wrapper");
// Calculate element height using different methods because some browsers might calculate the height differently, then choose the highest
var contentHeight = Math.max(wrapper.scrollHeight, wrapper.offsetHeight, wrapper.clientHeight);
// Set canvas size
FB.Canvas.setSize({ width: 810, height: contentHeight});
};
I am developing an app on facebook.
Since yesterday the resizing worked fine with the following snippets:
CSS:
body, html { overflow:hidden; width:810px;margin:0; padding:0; border:0; }
Right before the closing body tag:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setAutoGrow(true,100);
</script>
On Facebook I chose fixed for height and width, but that should not matter due to the autoGrow.
Since today it is just cut off, I tried the fluid settings but it did not change anything. I can remove the css rules for body and html, but then scrollbars are added.
So in short:
The resizing does not work anymore at all.
Important to know (maybe) the app resizes dynamically (via JS) without a page reload.
The code did not change at all, so I am worried Facebook might have changed something?
Besides I also tried this js snippet without any effect (but it does the same anyway):
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
window.setTimeout(function () {
FB.Canvas.setAutoGrow()
}, 250)
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e)
}());
</script>
UPDATE:
The question was answered correctly, but one more thing to notice:
Apply overflow:hidden just to the body, it worked after I removed html from the rule - worked with the old canvas, at least I used it before.
Also putting the code in the header did not change anything as well and is not the same as putting it at the beginning in the body area.
Try this
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID', //Your facebook APP here
cookie : true, // enable cookies to allow the server to access the session
});
}
window.onload = function() {
FB.Canvas.setAutoGrow(91);
}
</script>
I was trying to implement fluid canvas for my facebook app. I am using the script
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
}
just after i initialize my app but it is still set to 800px. How should i use this function?
Just for the sake of possibly helping someone else, try removing the http or https from your code. Here's mine (notice the ChannelUrl line):
<div id="fb-root"></div>
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOURURL.COM/FOLDER', // Channel File
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoGrow();
}
</script>
After I removed the http/https, it worked on all browsers.
Before </body> tag, I have written following code.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo YOUR_APP_ID ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setAutoGrow(true);
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
And it is working fine for me.
It doesn't matter whether height is Fixed or Fluid in Advanced application settings.
FB.Canvas.setAutoGrow(true); was not working in my application, but I found that I missed the <div id="fb-root"></div> code. I just put it before <script type="text/javascript"> and got the issue resolved.
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 interva
Try with following.It will auto resize your iframe.
<html>
<head>
<script src="./includes/js/jquery.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
window.fbAsyncInit = function(){
FB.init({appId: 'appid', status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize();};
function setSize(){
FB.Canvas.setAutoResize();}
</script>
</head>
<body style="overflow: hidden" onload="setSize()">
If you're trying to use a fluid canvas then there is no need to set the size of the iframe. In fact you shouldn't call it because there is a bug in FB; when set to fluid, calls to size the iframe should do nothing - in fact this isn't the case and the call does get processed. There is a bug logged against this here: http://developers.facebook.com/bugs/272509486115193 but FB have deemed this Low priority (much to my annoyance!)
In order to get fluid working correctly, check the docs here: https://developers.facebook.com/blog/post/549
You will need to make sure the content container on your page has it's height set to 100% as per the instructions on the doc page linked above.
As we know that Facebook has introduced iframe Tabs for Pages. I have developed an application and added the tab of the application in a profile page, application tab is opened in an iframe according to the update "iframe Tabs for Pages". The problem is that height of the page is not adjusted and unable to remove the scrollbars to display the fully page without scrollbars. All the solutions which I found work for the Application canvas page but not for the Application Tab page.
How can we do that?
It's quite easy to achieve. You have to set up the application in the Facebook Integration tab as an IFRAME and the size of the frame as "Auto-resize".
Now, on your server, you have to add the following code before the </BODY> tag:
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setSize();
</script>
This will auto resize it. It also helps if you add overflow:hidden to the BODY tag.
The following guide helped me through the same problem:
http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/
In short, do the following:
Change your "IFrame Size" to "Auto-resize"
Load Facebook's Javascript SDK
add the following code just before the </body> tag of your index page:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR-APP-ID-HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
Use FB.Canvas.setSize()
Put the following code before the </head> tag:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
That should do it, hope it helps!
facebook recently changed something, now your tab file also needs the fb.init method. otherwise the resize wont work. so use this in your tab page as well
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function()
{
FB.init({ appId: 'YOUR APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setAutoResize();
FB.Canvas.setAutoGrow();
}
</script>
Updated code for everyone having issues:
1) Set your application "Canvas Height" to "Fluid".
2) Copy + paste the following code before the closing <body> tag.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
// Called when FB SDK has been loaded
window.fbAsyncInit = function () {
// Initialize the FB javascript SDK
FB.init({
appId: '[YOUR APP ID]',
status: true,
cookie: true,
xfbml: true
});
// Auto resize FB Canvas
FB.Canvas.setAutoGrow();
};
// 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));
</script>
Hey guys... I was having problems with it as well.. i have tried a myriad of solutions and suggestions and they never worked for me. After I changed the jquery library 1.6 to the 1.5.1 it worked. Check if that is your problem.
Now I am trying to know why the hell it does not work with the version 1.6 of jquery.
For anyone like me who tried all of the above to no avail, here's what finally worked for me. Taken from this page: https://www.facebook.com/note.php?note_id=10150149060995844
Before </head> :
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });
}
</script>
Then before </body>:
<script type="text/javascript">
FB.init({
appId: 'XXXXXXXXXXX', //Your facebook APP here
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true// parse XFBML
});
</script>
I have created a facebook iframe application and set the dimensions to Auto Resize in the Facebook Application settings page but still a horizontal scrollbar is shown at the bottom in IE and Google Chrome. Works fine in Firefox. Any solution ?
It's explained how to do this here:
http://clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html
Basically you should use
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
};
plus make sure that your html and body tags are set to overflow:hidden so you don't get those briefly shown scroll bars that are so annoying
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
<head>
<!-- Header stuff -->
</head>
<body style="overflow: hidden">
You also need to start the timer to call autoresize code. In your applications HTML do:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
};
Above code will check the content dimensions every 100ms. If you want to use different timing you can pass milliseconds as variable:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize(50);
};
If your content size does not change after page load you can save CPU cycles by changing the content size just once manually:
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
You can even pass the desired size as parameter
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 600 });
}
Facebook must remove SCROLLING="YES" attribute of iframe of canvas app and append overflow:auto to style attribute
OR provide us with a function by which we can change scrolling attribute value to NO according to our apps.
I've tried everything you said and looked at this two links either ( CSS + FireFox: hiding scrollbar on iframe with scrolling=yes - facebook canvas height no scroll set in ie8 and firefox) that discuss the same problem, but it didn't work for me.
What worked for me was changing the canvas settings in the section advanced of app canvas configuration ( https://developers.facebook.com/apps ) to fixed canvas width (760px) and height (fixed at 800).
I hope this help you.
Might sound obvious, but have you tried CSS overflow: hidden on the iFrame?
I have had this problem in the past. While resizing might work, there is a maximum width on the Facebook canvas. It is likely that your body element has some kind of default padding / margin, and therefore it's box is bigger than the max width.
Try using a reset style sheet that clears default styles: http://developer.yahoo.com/yui/3/cssreset/
I've tried many things listed here, but what really worked was:
Configurations -> Advanced -> Canvas Settings, set a fixed width and height
It's also important to notice that if you don't provide a privacy policy url, facebook won't save this configurations.
Being frustrated about this problem of Firefox for a long time, finally found the best solution, which is here from Roses Mark. She proposed several ways, however only the body onload stably removes scrollbar in Firefox 10.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script type="text/javascript">
function framesetsize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
<div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
<div style="height: 2400px">
//Your content
//Goes here
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>
Horizontal scrollbars are always caused by the width of your HTML page being larger than the area of the iframe.
Make sure you set the right width to your or containing .
Set the width in your CSS file and set the overflow property.
If it's a Tab iframe app you can set it like this:
body{
width:510px;
overflow:hidden;
}
Apart from this code:
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
};
Also update Canvas Height setting in FB developer app settings:
Set canvas height to Fixed instead of Fluid. This will remove horizontal and vertical scroll bars.
Well, I will share some techniques collected from several resources that can be implemented to get rid of your unwanted scroll bars of your iframe facebook app. So, here is the first technique:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script type="text/javascript">
function framesetsize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
<div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
<div style="height: 2400px">
//Your content
//Goes here
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>
Using Latest Javascript Facebook SDK [Without using Body OnLoad]
window.fbAsyncInit = function() {
FB.init({
appId : '142388952486760',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
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);
}());
Using the Old Facebook Javascript SDK
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(
["CanvasUtil"],
function(){
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });
</script>
I might be late but I have very easy solution.
this might help
inside the page plugin div:
<div class="coverhack"></div>
and on css:
.coverhack {
position: absolute;
width: 520px;
height: 440px;
background-color: rgba(0, 0, 0, 0);
bottom: 0;
}
what have I done is only covering the scrollable part so it cant be scrolled. not might be the perfect answer but it works the same with the fastest delay among all answers.
I found the perfect solution! Make sure to put the following CSS code into the <head> area:
<style>*{margin:0;padding:0;}</style>
The scrollbars are actually shown because there is a default padding or margin given. Hope I could help!