I'm developing an app for a Facebook page with the 'timeline' layout, and I want the height of the app to scale with the content, but the height of the app is fixed at 800px.
The current app settings show that the height is set to 'fluid,' but I have also tried fixing the height to random values and witnessed no change.
How to I get the height of my app to scale to it's content? Thanks for any responses.
Update:
So appending this to my body tag worked.
<body onload="FB.Canvas.setSize({width: 810, height: 910})">
<div id="fb-root"></div>
<script>
(function () {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOURAPPID;
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
But I have zero idea why it worked, so I guess I'll change my question to 'what does the above code do?' so I can actually understand what steps to take next time. I'll put this as an answer for now to close off the question though.
This is the proper way to set things up, I just had to stare at it for a while and read the documentation way too many times. Putting the following below the fb-root div worked like a champ.
window.fbAsyncInit = function () {
FB.init({
appId: 'YOURAPPID', // App ID
channelUrl: '/channel.html', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
FB.Canvas.setAutoGrow(); //Resizes the iframe to fit content
};
// Load the SDK Asynchronously
(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));
Embed javascript code to increase height of iframe
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize( 100 );
}
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 810, height:1300 });
}
</script>
<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
});
</script>
The response by Ashish worked well for me.
I also included a body style to prevent the scrollbars from appearing for a second while the page loads:
body {overflow:hidden;}
Related
I have implemented a Facebook based login.
The FB.login works perfectly, but the FB.logout doesn't. I have tried with different FB.init, deleting cookies, running the logout page several times in a row, but the only way to log my user out is in facebook itself.
The code I'm using for logout is:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: '***************',
xfbml: true,
status: true,
cookie: true
});
FB.getLoginStatus();
FB.logout();
</script>
Any ideas?
Thank you
did you tried having some button onclick event is FB.logout();
function logout(){
FB.logout(function(response) {
// user is now logged out
});
}
<button onclick="logout()">LogOut</button>
Try This
Try to do this:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(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));
</script>
and then call the FB.logout(). FB must be initializad before.
From the documentation:
This code loads the SDK asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots.
The URLs in the above code are protocol relative. This lets the browser to load the SDK over the same protocol (HTTP or HTTPS) as the containing page, which will prevent "Insecure Content" warnings.
The function assigned to window.fbAsyncInit is run as soon as the SDK is loaded. Any code that you want to run after the SDK is loaded should be placed within this function and after the call to FB.init. For example, this is where you would test the logged in status of the user or subscribe to any Facebook events in which your application is interested.
today somebody reports me that the "Facebook login button" suddenly disappear, on his website that i made , actually yesterday was working ok, and i did not change any code at all for weeks , i have activated the July, August Changes since i made the website, in order to avoid this problems
this is my code
<div id="fb-root"></div>
<div class="fb-login-button" onlogin="Facebook_login()" autologoutlink="true">Login with Facebook</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'FB APP ID',
status : false,
cookie : true,
xfbml : true,
oauth : true
});
};
(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));
function Facebook_login () {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location = "THE URL TO PROCESS THE LOGIN";
}
});
}
</script>
We experienced the same issue on our website. Looks like Facebook has changed the implementation of the login button, it is now created within an iframe. It also no longer supports the 'onlogin' attribute (no longer in the docs).
We fixed by adding our own button, using the FB SDK FB.login method.
For you it would look something similar to (assuming you use jQuery for the click event)
<div id="fb-root"></div>
<button class="fb_login">Login with Facebook</button>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'FB APP ID',
status : false,
cookie : true,
xfbml : true,
oauth : true
});
$(".fb_login").click(function() {
FB.login(Facebook_login);
});
};
(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));
function Facebook_login () {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location = "THE URL TO PROCESS THE LOGIN";
}
});
}
</script>
Hi you are not the only one experiencing trouble since today.
My website isn't displaing correctly the button and the login is broken, too.
This seems to be a bug on Facebook side, introduced with today's update, see here:
http://developers.facebook.com/bugs/386085844776949 and here
http://developers.facebook.com/bugs/250500218391321
Try subscribing to the bugs to have FB look at them.
Sometimes, it happens due to not re-initializing the Fb.init function. I solved this problem by parsing Fb.XFBML and i added FB.XFBML.parse(); in script tag just before fb-login button as :
<script>FB.XFBML.parse();</script>[enter image description here][1] <fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> </fb:login-button>
You can see a sample of code here:
[1]: https://i.stack.imgur.com/YM7QM.png
How can I resolve the resize of facebook app on IE ?
the FB.Canvas.setSize() is not working.
Thanks!
Since there's very little to go on in your question. No example url, no code example. I can only guess. So here's where to start.
1) Be sure to include the Javascript SDK inside of script tags.
<script>
// Load the 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>
2) Be sure to include the fb-root div inside of the body
<body>
<div id="fb-root"></div>
...your html here...
</body>
3) Be sure to do the FB.init() and FB.Canvas.setSize() after the javascript SDK has had a chance to load. Meaning do it inside of your window.fbAsyncInit
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
4) Make sure you have specified your APP ID and also the correct location for a valid ChannelUrl
After a rather frustrating bout with Facebook OAuth 2, and having my Facebook Connect login break completely on my site (www.thegameeffect.com), I'm turning to the wise minds of StackOverflow in hope of some guidance.
Things were working rather nicely as of a 1-2 months ago, but recently I've been having problems. Basically, I have followed the steps according to the FB developers site, and hit several other help guides from here, such as this link: (http://stackoverflow.com/questions/8537007/facebook-cookie-and-oauth-2-0-changes) and have sadly not had any luck.
My FB.Init code looks like below:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: '145290112183820', status: true, cookie: true, xfbml: true, channelUrl: 'http://www.thegameeffect.com/fbchannel.html' });
//, oauth:true
};
(function () {
// 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);
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
document.getElementById('fb-root').appendChild(e);
} ());
</script>
I have tried all variations of this, with oauth:true included, the channelurl excluded, the self invoking function with the top part uncommented, and still all that happens when I try to log in is the auth window pops up briefly, and then disappears. The code that gets executed when you click on the FB icon in the top left of the header is below:
FB.login(function (response) {
if (response.session) {
// do server side work (this never gets hit)
}
});
Any suggestions?
Some minor changes will make your code work :
window.fbAsyncInit = function () {
FB.init({ appId: '145290112183820', status: true, cookie: true,
xfbml: true, channelUrl:
'http://www.thegameeffect.com/fbchannel.html', oauth: true });
};
and
FB.login(function (response) {
if (response.authResponse) {
}
});
So, after a bit more digging, and a lot of debugging, I finally found the solution. I was able to get the javascript side of things working thanks to manishekhawat, and the server side thanks to this awesome post:
http://amirrajan.net/Blog/facebook-oauth-authentication-and-iframe-apps
For anyone having problems with the new Facebook oAuth cookie in ASP.NET, this is an amazing tutorial!
Thanks again for the help today; I'm glad to finally have everything in working order.
Change,
FB.getLoginStatus(function(response) {
if (response.session) { ........................
}
by
FB.getLoginStatus(function(response) {
if (response.authResponse) {
........................
}
My facebook app make Infinite loop in sdk 3.1.1
i have fb app and a tab, as the contents grows, scrolls appears with the iframe but i want to no scrolls for the iframes but i want scrolls for the whole page instead of the i frames
You also need to start the timer to call autoresize code. In your applications HTML do:
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: "xxxxxxxxxxxxxxx",
status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize();
};
(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>
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 });
}
The easiest way to hide the scroll bars is to use
FB.Canvas.setAutoResize()
Please refer to the following article/tutorial for further information.
http://gpiot.com/facebook-page-tab-hide-scroll-bars-from-iframe/