I have created a facebook app that will be displayed on my companies fan page as a tab. The app renders at 951px so it doesn't fit in the default height of the fan page tab. I've read facebook's horrible documentation for their js sdk and have tried so many different variations - all of them not working at all. Here's my current attempt to resize the fan page tab to fit my app...
<head>
<!-- css / js / meta info here -->
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
</head>
<body>
<!-- content goes here -->
<div id="fb-root">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId:'xxxxxxxxxx',
status:true,
cookie:true,
xfbml:true,
});
</script>
</div>
</body>
I've also tried async init and using setAutoResize() with no luck.
Thanks for any and all suggestions...
B
<head>
<script type="text/javascript">
window.fbAsyncInit = function()
{
FB.Canvas.setSize();
}
</script>
</head>
.
.
.
.
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: 'xxxxxxxx',
status: true,
cookie: true,
xfbml: true
});
/* Init fb Resize window */
/* Completly removed now in JS SDK*/
/* FB.Canvas.setAutoResize(7); */
/* As of Jan 2012 you need to use */
FB.Canvas.setAutoGrow(7);
</script>
</body>
</html>
I just spent over an hour trying to fix this in my app and I wanted to mention a couple of basics that you have to follow for this to work.
You have to include a div with an id of fb-root before you include the all.js file and before any JS code using the FB object.
The all.js file should be included below the fb-root div and above any actual JS code using the FB object
Finally, any JS code using the FB object should be below the fb-root div and the all.js include
There were no errors in my code, but it was refusing to work because I was including all.js and my JS code in the <head> element and my fb-root div was in the <body>. Here's what I had to change it to:
...
<head>
<!-- include jQuery so we can use window.load below -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
...
</head>
<body>
<!-- the div has to come first which forces the JS include and code to be put below it -->
<div id="fb-root"></div>
<!-- then we have to include the all.js file -->
<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<!-- and finally we can use the FB JS SDK and it will actually work :) -->
<script type="text/javascript" charset="utf-8">
FB.init({
appId: '...',
status: true,
cookie: true,
xfbml: true
});
jQuery(window).load(function(){
//resize our tab app canvas after our content has finished loading
FB.Canvas.setSize();
});
</script>
...
Obviously the 3 elements I mentioned don't have to be right after each other, but they do have to show up in this order in your source code. This really threw me for a loop so hopefully this will save someone some time and frustration :)
It usually works if Facebook can calculate the height of your page. However if you have a responsive design this is not possible.
I am using a hack that does the job using jQuery to calculate the height of the wrapper div and then explicitly set it:
FB.Canvas.setDoneLoading( function(result) {
FB.Canvas.setSize({height: $('#wrapper').height() });
});
This should go in your FB.init() method.
if for some reason window.name is set the FB.setAutoSize wont work, http://bugs.developers.facebook.net/show_bug.cgi?id=19720
in my case its connected somehow to jquery $.data
window.fbAsyncInit=function(){
FB.Canvas.setSize = function(b) {
if (typeof b!="object")
b={};
b=b||{};
if (b.width==null||b.height==null)
b=FB.copy(b,FB.Canvas._computeContentSize());
b=FB.copy(b,{frame:'iframe_canvas'});
if (FB.Canvas._lastSize[b.frame]) {
var a=FB.Canvas._lastSize[b.frame].height;
if(FB.Canvas._lastSize[b.frame].width==b.width&&(b.height<=a&&(Math.abs(a-b.height)<=16)))
return false;
}
FB.Canvas._lastSize[b.frame]=b;FB.Arbiter.inform('setSize',b);
return true;
}
FB.init({
appId:APP_ID, //your app id (Numeric)
status:true,
cookie:true,
xfbml:true
});
FB.Canvas.setAutoResize()
};
I'm found the solution for fix issues when using jQuery and FB.setSize() - if you set vars definition before $(function(){}) (jQuery DOM ready) - setSize doesn't work. If all vars definition located inside $(function(){ all vars HERE }) - setSize starts working!
You might need to wait for images to be loaded. Otherwise the FB.Canvas.setSize(); might fire too soon and not include image sizes.
With jQuery use:
$(window).load(function(){
FB.Canvas.setSize();
});
Found a solution to reduce the height again if the content sites of your App have different heights. Usually the height increases easily but doesn't decrease to a smaller site again.
<head>
<script type="text/javascript">
window.fbAsyncInit = function()
{
FB.Canvas.setSize({ width: 810, height: 920 });
/*{ set here the needed site height }*/
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: 'App ID', /*{ set here your App ID }*/
status: true,
cookie: true,
xfbml: true
});
/* Init fb Resize window */
/* Completly removed now in JS SDK*/
FB.Canvas.setAutoResize(7);
/* As of Jan 2012 you need to use */
FB.Canvas.setAutoGrow(7);
</script>
</body>
This is how I initialise my facebook applications:
<div id="fb-root"></div>
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function() {
FB.init({
appId : appId,
status : true,
cookie : true,
xfbml : true
});
// Additional initialization code such as adding Event Listeners goes here
FB.Canvas.setSize({ width: 810, height: 620 }); // ******* THIS WORKS.
};
(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>
here is what I use:
<head>
...
<script type="text/javascript">
function facebookInit(appId) {
FB.init({
appId : appId,
status : true,
cookie : true,
xfbml : true
});
}
function increaseIframeSize(w,h) {
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
</head>
<body>
<script>
increaseIframeSize(720,800);
facebookInit(appId);
</script>
...
</body>
I also noticed the setSize call fails if the user's "Secure Browsing" setting is disabled. This may not be an issue for most, since the setting is enabled by default, but if you're running into this issue and now have an almost-bald head (like I do), check this setting on the account you're testing with.
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.
I'm using Facebook PHP SDK v2.1.2 and JS SDK on my page. I've put a <fb:login-button autologoutlink="true"></fb:login-button>
[...]
<head>
<script type="text/javascript" src="http://connect.facebook.net/pt_BR/all.js#xfbml=1"></script>
<script type="text/javascript">
FB.init({
appId: '{$appId}',
cookie: true,
status: true,
xfbml: true
});
FB.Event.subscribe('auth.logout', function (response) {
alert('Bye!');
window.location.refresh();
});
</script>
</head>
<body>
<div id="fb-root"></div>
<fb:login-button autologoutlink="true"></fb:login-button>
[...]
When I'm logged I can see the logout button, but when I click on it nothing happens. Am I missing something? I use the <fb:login-button> on logon and it works like a charm with PHP SDK!
Thank you in advance.
Instead of
window.location.refresh();
Try
window.location.reload();
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>