I am really struggling with how to get the scroll bars off of my tab. I am simply trying to create a Facebook tab for a company Facebook page and I have tried everything to get the vertical scroll to go away. Here is the code I am working with
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="facebookstyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.innerfade.js"></script>
<fb:share-button type="icon_link" class="url"></fb:share-button>
</head>
<body>
<table>
CONTENT
</table>
<p> </p>
<p> </p><div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '{{277868305571181}}', status: true, cookie: true,xfbml: true});
window.setTimeout(function() {
FB.Canvas.setSize({height:1500});
}, 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>
</body>
</html>
You may need to enable OAuth2 in your application settings.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '277868305571181',
status: true,
cookie: true,
xfbml: true,
oauth : true // enable OAuth 2.0
});
FB.Canvas.setAutoGrow();
};
(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>
Related
I'm unable to moderate the comments in the comments box in http://developers.facebook.com/tools/comments
Did I miss something in my code?
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '168365613230111',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(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>
<div class="fb-comments" data-href="http://www.facebook.com/" data-num-posts="5" data-width="500"></div>
I struggled with this for ages, try putting this tag in ...
<html xmlns:fb="http://yourwebsite.com">
I'm creating a fanpage on facebook, when the page loads I m getting error because of FB.getLoginStatus.
b is null [Break On This Error] FB.provide('',{ui:function(f,b){f=FB.c...onent(FB.UIServer._resultToken));}});
b is null
http://connect.facebook.net/en_US/all.js
Line 22
all.js FB.provide('',{ui:function(f,b){f=FB.copy({}.....
I'm really confused why I'm getting b is null, check my current code.
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title><?php echo APP_NAME; ?></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true
});
//FB.UIServer.setLoadedNode = function (a, b){FB.UIServer._loadedNodes[a.id] = b; }
FB.getLoginStatus(function(response) {
if (!response.session) {
FB.login(friendsGet);
}
else
{
friendsGet(response);
}
});
};
(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);
}());
thanks
I get the error as well and as ElbertF writes, it's because the browser blocks the pop up window.
Only way to get over this is to let the user do an action and then call FB.Login. Let him click something - anything.
Why is facebook even using popups?? Totally old school.
/Rune
If I only run one of them, then it can show up properly.
If I run both of them at same time, the code who come first will show, the one who come up at bottom will not show.
I believe there's some conflict.
Anyone facing this issue?
<html doctype="XHTML 1.0 Transitional" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<div class="fbLikeButton">
<fb:like show_faces="false" width="300"></fb:like>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'XXXXXXXX', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<br>
</div>
<!-- facebook code -->
<div align="center">
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("de15667c632963d186082c258e3cc970");</script>
<fb:fan profile_id="XXXXXXXXXX" stream="0" connections="6" width="155" height="350"></fb:fan>
</div>
</body>
</html>
ok, it works now.
I believe it is javascript code redundancy.
Just need to remove one of the javascript reference.
I removed <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
Been running into an issue lately with Facebook canvas iframe applications. I've set our settings to "auto-resize" and implemented the correct FB JS call to do the resizing of the height (to avoid unwanted scrollbars), but it doesn't seem to be working.
Has anyone else had this issue or come up with a solution?
Thanks!
Erik
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.
Expanding on a couple of points noted already:
window.fbAsyncInit = function () {
FB.init({
appId: 'YOUR APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setAutoGrow(true);
};
This will allow dynamic changes in the applications height. Also setting an explicit width in your css like so can help as well:
html {
width: 760px;
overflow: hidden;
}
FB.Canvas.setAutoResize will be deprecated and you should use FB.Canvas.setAutoGrow as it does exactly what you want.
Roozbeh is on the right path with his answer. However, his code will most likely produce an error (at least in Firefox), as both the old and new SDKs are being referenced (and they don't play well with each other).
Also, just using the new SDK to adjust the height is super simple:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true });
FB.Canvas.setSize({ height: 890 });
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
Official documentation available here.
Well ... auto-resize is buggy and only sometimes work
you can set it manually like this:
FB.Canvas.setSize({ height: $('body').height() });
If anyone is still having this problem, its because your FB.init() is never being called. In my case, I had it inside my jQuery document.ready function. dont do that!
Put this outside of your jQuery:
$(function() { ... jquery here... });
// do FB stuff
FB.init({appId: 'APP_ID', status: true, cookie: true });
FB.Canvas.setAutoGrow();
Auto-resize doesn't work. It's a major bug that facebook has not fixed yet.
However, here's the code work around for the problem:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<div id='FB_HiddenContainer' style='display:none;position:absolute;left:-100px;top:-100px;width:0;height:0'>
</div>
<script type="text/javascript">
window.onload = function(){
FB_RequireFeatures(['CanvasUtil'], function(){
FB.CanvasClient.setCanvasHeight('1500px');
});
};
</script>
I've created a facebook connect application, iframe. I'm using it under apps.facebook.com/app-name.
It seems that after a refresh, the setSize() method simply fails. sometimes works, sometimes doesn't... (under latest Firefox and IE) is there a solution for that? would you recommend using the old API instead?
testcase:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>test</title>
<meta name="description" content="test">
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'XXXXXXXXX', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize({ width:760,height:3000 });
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div style="height:2000px;background:blue;width:760px;">
</div>
</body>
</html>
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:"<?php echo FB_APP_ID; ?>",
status:true,
cookie:true,
xfbml:true
});
FB.Canvas.setAutoResize()
};