This seemed to happen without any changes on my part. Suddenly any browser but Chrome was not processing the fb:login-button tag, it's just showing any text within the tag as plain text.
After scouring the net for hours, looking for possible causes/solutions, I've found nothing that addresses this particular behavior.
So, I've created the most basic example I could to illustrate the problem, and put it up here:
http://silverbucket.net/examples/fblogin/welcome.htm
The above example shows a fb-login box in Chrome, but not in Firefox, IE, or Opera.
In summary, what is in the page in the above link, first there's the html tag at the top I have:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" lang="en">
In the head I have:
<script src="http://connect.facebook.net/en_US/all.js"></script>
In the body, just below the header I have:
<div id="fb-root"></div>
Then there's the actual fb-login-button:
<fb:login-button scope="email, user_interests, user_likes, publish_stream">log in with facebook</fb:login-button>
And, at the bottom of the page, just before the closing of the body tag, I have the FB JavaScript:
<script>
$(document).ready(function() {
window.fbAsyncInit = function() {
FB.init({
appId : '153787078069017',
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
//channelUrl : '/channel.html', // channel.html file
oauth : true, // enable OAuth 2.0
status : false
});
// whenever the user logs in, we refresh the page
FB.Event.subscribe('auth.login', function(response) {
if (response.authResponse) {
window.location.href="http://example.com/fblogin";
}
});
};
(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>
Nothing complicated... and it's not just happening on my Firefox, but every colleague I've checked with as well.
I would suggest moving window.fbAsyncInit = function() { to outside of the $(document).ready(function() {. This should give more consistent results browser to browser.
This is a shot in the dark, but try adding your fb-root div before the actual code including the login button if this is possible.
That has solved some of the fb quirks I've faced before.
Related
So I've been scouring the internet for solutions to remove the scroll bar from my custom tab page on my company's facebook page. Granted, I'm not programmer and figured out how to build this thing yesterday, but would really like fix to this. It seems like there are a ton of solutions to the old format the FB app developer but nothing with the new version.\
I've been attempted to implement a bunch of the canvas size scripts that I have found but either they don't or my page refuses to load.
jsteid
Here is a sample of how i resize my tabs using OAuth 2.0 and new javascript sdk.
http://www.facebook.com/anotherfeed?sk=app_135669679827333
If you are using % to set with they need to be under 100% at about 98% - 96% because of a margin in the frame.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '135669679827333',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
//channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
//FB.Canvas.setAutoResize(); depreceated
FB.Canvas.setAutoGrow(1000);
};
(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>
to fix the height issue, load the js sdk and set the canvas size
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '123456789',
status : false, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : false // parse XFBML
});
FB.Canvas.setSize({ width: 500, height: 1000 });
</script>
test and see what values fit your need
I think there is a bug with FB.Canvas's size methods on iframe tabs. Height is set properly but scrolls are still there. Only workaround in my case is combination of FB.Canvas.SetAutoResize() + styling 'body' with overflow: hidden.
You need to do this:
Go to your app (https://developers.facebook.com/apps/)
Click 'Edit Settings' on the app in question.
Go to: Settings -> Advanced -> Canvas Settings -> Canvas Height -> select 'Auto-Resize'.
If you still get problems the other suggestions here should help by doing something like...
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '12345', status: true, cookie: true, xfbml: true});
window.setTimeout(function() {
FB.Canvas.setAutoResize();
}, 1000);
};
(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>
Here I set your page height to 1000 -> change this to your page height and I set your app ID to 12345 -> change this to your app id.
I hope this works for you.
Im fancing a really weird problem with the edge.create callback.
What im doing is to execute an ajax call to the server each time an edge.create or edge.remove event occurs (the firs is to like and the second to unlike a page).
Heres the code
// this will fire when any of the like widgets are "liked" by the user
FB.Event.subscribe('edge.create', function(href, widget) {
var dataSend = 'ajaxFace=true&submitAdd=true&code='+SomeCodeToAdd;
$.ajax({
type: 'POST',
url: 'http://somewebpage.com',
data: dataSend,
success: function(data) {
alert(data);
},
erro: function(data) {
alert('Try again later');
}
});
});
//this will fire when any widgets are "disliked" by the user
FB.Event.subscribe('edge.remove', function(href, widget){
var dataSend = 'ajaxFace=true&submitDelete=true&code='+SomeCodeToRemove;
$.ajax({
type: 'POST',
url: 'http://somewebpage.com',
data: dataSend,
success: function(data) {
alert(data);
},
erro: function(data) {
alert('Try again later');
}
});
});
Now, whats happening.
The function for the 'edge.remove' event works smooth and without any problems.
But when the user click like the code simply dont run on the success part of the ajax call, i tryed a simple alert like alert('test'); but nothing happens too. The code, however, works fine on the backend and the code I want to add is added with success.
However if i set the async : false the code works, the alerts is presented on the page but the browser gets that nasty "lock down" that i really want to avoid.
So, anyone have any idea whats exactly going on here?
PS.: Theres 2 others facebook elements on this page, the comments and activity feed. I dont know but im with the impression that the activity feed may have something to do with this...
I think this is some sort of scope issue. If you define the function containing the ajax call outside of the scope of the FB.Event.subscribe, and just call that function from within the FB.Event.subscribe, that may fix the issue.
HI i was facing the same problem but for different FB event. Here is my code an it 100% working :-
<!doctype html>
<html lang="en" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta charset="utf-8">
<title>Facebook Like Button</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>--->(DO not forget to include)
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '464134126954048', status: true, cookie: true,xfbml: true});
FB.Event.subscribe("message.send", function(targetUrl) {
$.ajax({
url:'abc.php',
type:'POST',
data:{name:'sunlove'},
success:function(data)
{
alert("I am here");
}
});
});
};
(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>
<fb:send href="http://demo.antiersolutions.com/studybooster1.2"></fb:send>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"> </script>
</body>
</html>
You can just copy and make new file and customize according to your need
I've developed a simple website using facebook connect, and it has been working fine for the last month or so. Underneath the fb:login-button code is a fb:facepile. It has worked as expected until today, when instead of showing friend's pictures it displays the facebook homepage. Here is a screenshot of the problem http://i.stack.imgur.com/nZsbq.png
Here is the relevant code. It worked at one time, so I'm really confused what happened to cause this weird error. Any help would be greatly appreciated.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '<?php echo $appkey; ?>', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
};
(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);
}());
function login(){
document.location.href = "<?php echo $base_url.'/facebook/'; ?>";
}
function logout(){
document.location.href = "<?php echo $base_url.'/logout/'; ?>";
}
</script>
I cannot copy the two XFBML tags that follow the javascript. They are fb:login-button and fb:facepile
It is a reported bug but it seems that nobody at Facebook care about it. Very strange and disapointing for such big web company.
http://forum.developers.facebook.net/viewtopic.php?id=90734
You can report this bug by upvoting at the follwoing webpage :
http://bugs.developers.facebook.net/show_bug.cgi?id=15490
It looks like <fb:facepile></fb:facepile> is finally working again. The bug was marked as resolved on the Facebook bugtracker and is currently working as expected on my development server.
I am using FB.getLoginStatus for an application in Facebook. This works fine in all the browsers, including IE8. But it doesn't work for IE7. My code is:
FB.getLoginStatus(function(response) {
if (response.session) {
alert("logout");
}
else{
FB.Event.subscribe('auth.login', function(response) {
login();
});
alert("login");
}
});
Does anyone know why?
According to the documentation at http://developers.facebook.com/docs/reference/javascript/fb.init/, the proper solution is to create a file on your web server (for instance channel.html) containing just:
<script src="http://connect.facebook.net/en_US/all.js"></script>
And then specifying the absolute URL to your channel.html in your init options:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
channelUrl : 'http://example.com/channel.html' // custom channel
});
</script>
For convenience in deployment, I use the following to calculate my channelUrl.
var curLoc = window.location;
curLoc.protocol + "//" + curLoc.hostname + ":" + curLoc.port + "/channel.html"
Currently this API (FB.getLoginStatus) is not working anymore on IE7 browsers.
Take a look here:
getLoginStatus not Fired on IE7
If you try to run the code in the following page on IE7 it's not working:
http://www.fbrell.com/auth/login-and-logout
It seems the "channelUrl" fix is not working anymore and the IE7 support for the Facebook Javascript SDK is compromised.
I recently upgraded to open graph and implemented some of the facebook social plugins on my website like fb:friendpile fb:like-box etc
Ever since I implemented these new features, I'm seeing some random behavior with these plugins.
Like on my home page, when you type in the URL and go for the first time, none of the facebook social plugins are rendered - no login button, no friendpile no like - nothing.
But when you hit CTRL F5 - they appear. First I thought it probably has somethin to do with my machine but yesterday two of my users reported the same issue.
I googled around and it seems to have something to do with where you place your connect code. Right now, I have this relevant portion of the script placed in my head tag - I even tried placing it right before the end of body tag - but it made no difference.
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '<?php echo Zend_Registry::getInstance()->configuration->facebook->appid;?>', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
logout();
});
};
(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);
}());
function login(){
document.location.href = "<?php echo $this->baseUrl(); ?>/login/log";
}
function logout(){
FB.init({appId: '<?php echo Zend_Registry::getInstance()->configuration->facebook->appid;?>'});
FB.logout(function(response) {
// user is now logged out
});
document.location.href = "<?php echo $this->baseUrl(); ?>/login/logout";
return false;
}
</script>
Any insights in trouble shooting this will be appreciated
Thanks
Your logout logic seems problematic (you call FB.logout() in logout() -- but also call logout() on the 'auth.logout' event, which seems circular). You should also remove the FB.init() call inside your logout() function. The lack of xmlns:fb on the <html> tag is often the cause of XFBML not rendering in IE, so I'd double check that. You could also try replacing the async loading with sync loading using a normal script tag like:
<script src="http://connect.facebook.net/en_US/all.js"></script>
But a live repro case would be more helpful since your code looks fine for the most part.
EDIT: You can also checkout http://fbrell.com/xfbml/fb:login-button for examples.