I've got an implementation of the Facebook SDK that I'm using in my site. It works great on every browser minus Safari where occasionally the Facebook Connect button won't load.
Looking at the JS errors I'm getting the following messages. They're coming from all.js which is FB's JS library. Anyone got any ideas?
The "fb-root" div has not been created. (all.js Line 3)
TypeError: 'undefined' is not an object (evaluating 'e.root.appendChild') (all.js Line 6)
When working with Facebook's all.js, you need to make sure that you have div with id set to fb-root typically below the body tag. Make sure you have:
......
<body>
<div id="fb-root"></div>
<script>
// facebook js code here
</script>
The error message you have posted clearly says it does not find such div which means you should have it on your page like shown above.
How many fb-root divs do you have? If you have multiple it might confuse the API on the Safari browser.
Related
I've been working on a problem for the last day and a half now and have still yet to find a solution.
When visitng my game on facebook (which is in facebook's iFrame) php sessions don't work. This is for IE and Safari. Chrome works fine.
I've already read all the posts on stack about this problem, which seems to be down to third party cookie security and needing interaction with the iFrame first. There was a workaround by making javascript post some form data to the iFrame first, but this seems to have been 'fixed' in the latest versions of the browsers very recently as this no longer works.
I even tried implementing a start page that would require them to click a link first (in the iFrame) to load another page which would then create the session. But even THAT doesn't work.
I'm also having trouble even loading new pages in the iFrame using javascript, which seems to always cause infinite loop refreshes.
And no, P3P headers do NOT solve it.
Does anyone have a solution to this problem? I can't be the only one with it, considering how many facebook apps exist!
I came across this problem using a client that had "Accept third party cookies" disabled. My solution was to force PHP to embed the session ID into the URI by putting this line at the start of each page:
ini_set('session.use_trans_sid', true);
As the URLs are in iframe within Facebook the SID is not seen in the top window.
For IE, you will need the P3P Headers set. Something like:
<?php header('P3P: CP="CAO PSA OUR"'); ?>
Safari blocks 3rd-party cookies by default. Currently, the only work-around that is working for me is to "pop-up" a new window to set the cookies. I have something like this:
<script type="text/javascript">
function safariFix(){
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1){
window.open('https://yourdomainname.com/safari.php', 'Safari Fix','width=100,height=100');
}
}
</script>
And safari.php will have this:
<?php
setcookie("safari_test", "1");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Safari Fix</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
window.close();
});
</script>
<body>
Since Safari does not accept third-party cookies by default, we are forced to open this window.
This window will automatically close once we have set the cookies.
</body>
</html>
PROBLEM: This won't work if users have "block pop-ups" enabled in Safari. If anyone has a better solution for this, inform me ;)
I have an application at http://www.facebook.com/LovingPets?fbhref=index.php&app_page=1&v=app_190518734309657&sk=app_190518734309657#!/LovingPets?fbhref=treats.php&app_page=1&v=app_190518734309657&sk=app_190518734309657.
I keep getting problems with trying to run JavaScript. I thought that one of the benefits of Facebook adding the iframe to the page tabs is so that you could run JavaScript? When you try to click on the treat catalog link it loads the next page fine, but none of the interactivity works. Looking at Firebug these errors are observed,
script is not an allowed DOM element [Break On This Error] (11 out of range 3)"
and
a190518734309657_l is null [Break On This Error] <script type="text/javascript">
Is it possible to run JavaScript and jQuery the way I have my application setup? And if it is, what am I doing wrong?
Yes, it is possible.
I have been working with jQuery in the new iframe tabs. However, you must update your page to the new layout in order to get them working correctly.
http://www.webtlk.com/2011/02/11/how-to-upgrade-to-the-new-facebook-fan-page-layout-redesign/
Regards
I'm trying to write a simple facebook application using FBML.
when I configure my application to work as an IFrame and I view the source
i see the following:
<html>
<head>
</head>
<body>
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://url/file.swf'
width='340' height='270' />
</body>
</html>
When I change my application to be an FBML application i get the following error:
Application Temporarily Unavailable
Received HTTP error code 405 while loading http://xpofb.xpogames.com:5080/xpogame- servlet/Canvas?
Sorry, the application you were using is experiencing a problem. Please try again later.
Any ideas?
Try to put just plain text to FBML so you can be sure that it is not some FBML tag that is causing problem.
Facebook may act funny if your Canvas URL doesn't end with a slash. Try to map your controller to a directory and try again.
Also FBML apps don't support html, head, body tags, so that would be your next error message.
Welp... after a lot of research on the internet i read that some people added rewrite rules to /foo will be /foo.html and that would work.
When I tried to add rewrite rules in my case it didn't resolve the issue.
moving from a servlet to a jsp page did resolve the issue.
the Servlet was at url/Canvas
rewriting it to url/Canvas.html did not resolve the issue
creating a new jsp file at url/canvas.jsp resolved the issue.
I have facebook connect button on a page of my site and I want user to redirect to a page after a successful login: here's the code snippet:
</script>
<fb:login-button onlogin="facebook_onlogin();">
</fb:login-button> <script type="text/javascript">
FB.init("API_KEY", "http://myip/facebookapp/xd_reciver.html/");
function facebook_onlogin() {
window.location="http://myip/facebookapp/mypage/"
}
</script>
But when I logged in it redirects to the page INSIDE the pop-up, how can I redirect to the page out side of the popup..
In my experience, this is generally caused by not having the cross-domain receiver file set up properly.
Assuming you copied the cross-domain receiver file that Facebook provides, then in your code snippet above, it looks like you misspelled "receiver" in xd_receiver.html. Double-check that it is a valid URL by copying and pasting it into your browser and making sure it can be loaded... my guess is you'll have to fix the spelling and remove the trailing slash, ie. http://myip/facebookapp/xd_receiver.html. Double-check the API key while you're at it, Facebook Connect can be quite frustrating to set up sometimes.
Are you using latest connect javascript sdk by facebook or the oldest one ?
checkout the latest javascript sdk by facebook http://developers.facebook.com/docs/reference/javascript/
Here you'll see nice working example.
I do IFrame application for facebook.
Problem is: any link inside it causes redirect loop
Link is: http://mydomain/mypage?fb_sig=[what I got from $_GET['fb_sig']]
(to test I link to the same page as my loaded canvas is loaded from)
when I click on it, my server returns:
<script type="text/javascript">
top.location.href = "http://www.facebook.com/login.php?api_key=5dc632fcef992470341178f492f79b93&v=1.0&next=http%3A%2F%2Fthiismydomain%2Ffacebook%2F%3Ffb_sig%3D96a5c47f133eadcfbba4abf82e5311e0%26page%3D1";
</script>
then it goes to corresponding page, and facebook returns
Location: http://thisismydomain/facebook/?fb_sig=96a5c47f133eadcfbba4abf82e5311e0&page=1&auth_token=ce4cf4968f91cace5b3e915f5b658984
then, my server replies with
<script type="text/javascript">
top.location.href = "http://www.facebook.com/login.php?api_key=5dc632fcef992470341178f492f79b93&v=1.0&next=http%3A%2F%2Fthisismydomain%2Ffacebook%2F%3Ffb_sig%3D96a5c47f133eadcfbba4abf82e5311e0%26page%3D1%26auth_token%3Dce4cf4968f91cace5b3e915f5b658984";
</script>
and back, facebook replies:
Location: http://thisismydomain/facebook/?fb_sig=96a5c47f133eadcfbba4abf82e5311e0&page=1&auth_token=ce4cf4968f91cace5b3e915f5b658984&auth_token=77df653b7949ca39c1a226c82cce8add
and it goes on and one without end.
Should I say that this redirect responce from my server is generated automately (most probaby my facebook php lib)
I have no more ideas why this happends. Any ideas?
I had a similar problem, where getSession() returned nothing, and thus sending me out on an infinite redirect loop. I solved it by enabling OAuth 2.0 in the settings for the application, as stated here:
http://forum.developers.facebook.net/viewtopic.php?id=64656
Ok, if you recognize the problem, here is the solution:
fb_sig is not the only param to be passed manually. Whole fb_sig* should be passed. Read more at this beautiful page http://www.foobots.net/breakouts.html