Code on my web page:
<body class="popup">
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '476947702378530', // App ID from the app dashboard
channelUrl : '//www.majorforms.com/fb_channel.php?_lang_id=1',// Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
After loading that page with a browser, I get this error in firebug console:
Application Error: There was a problem getting data for the application you requested. The application may not be valid, or there may be a temporary glitch. Please try again later.
I don't really understand. I do not have a real app, I just used the identifier of a facebook (company) account. I do not want to create a new facebook app, I just want to use credentials of a specific facebook account. How do I do that?
I'm not hundred percent sure but you need to create an app to use the facebook sdk because in the FB.init method it obviously asks for the Facebook App Id.
Creating a Facebook App doesn't necessarily mean that you actually have an app on facebook, the app configuration screen on Facebook Developers page has a specific section for "Website With Facebook Login" , so I think thats the way you should go.
I found I was getting this error when testing my application because I was signed into Facebook as a test account user. When I tried to access the live environment it would generate that error as it was already authenticated to the developer user. The error message is kind of generic and doesn't really spell out the issue in black and white.
Related
I'm trying to include Facebook Messenger Customer Chat Plugin in my website, but the plugin is not showing. It was working fine couple days ago but suddenly it stopped working.
I'm getting two types of errors:
1- When I'm not logged in to facebook, I'm getting this error in console:
Failed to execute 'postMessage' on 'DOMWindow': The target origin
provided ('https://www.facebook.com') does not match the recipient
window's origin ('https://web.facebook.com').
I used FB.CustomerChat.show() in the console, and the dialog appears but the error is repeated, and the bubble isn't shown.
2- When I'm logged in to facebook, I'm not getting any errors and the plugin still doesn't appear.
I used FB.CustomerChat.show() in the console, and the dialog appears but and the bubble isn't shown, but this time an Error link is displayed within the bubble's iframe saying:
this plugin requires the use of the Javascript SDK and XFBML
I tried changing the version of the sdk, changing the settings in the facebook app (developers.facebook.com), whitelisting the domain in my facebook page,
tried adding #xfbml=1&version=v2.12&autoLogAppEvents=1 after the url for the sdk..
no luck at all.
window.fbAsyncInit = function () {
FB.init({
appId: app_id,
autoLogAppEvents: true,
xfbml: true,
version: 'v2.12'
});
};
(function (d, s, id) {
var js;
var fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/'+localization+'/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
To workaround add this to response header:
X-Frame-Options: allow-from *
or
X-Frame-Options: allow-from https://www.facebook.com https://web.facebook.com
Changing the version for Facebook JS SDK to v3.3 and making sure that the Facebook SDK and Facebook MCC SDK are both loaded exactly after the body tag solves the issue.
Update:
There is a bug within the Facebook JS SDK that causes this problem, you can track the issue here:
https://developers.facebook.com/support/bugs/470869643489449/
I'm running an error very similar with this one: Facebook Login API HTTPS Issue.
I have a website use facebook authentication, the Facebook login is no problem. But the Facebook like-button get troubled when been clicked (test fail on Chrome, Safari, Firefox, in OSX), the error message is:
Blocked a frame with origin "https://www.facebook.com" from accessing a
frame with origin "http://static.ak.facebook.com". The frame requesting
access has a protocol of "https", the frame being accessed has a protocol
of "http". Protocols must match.
I've searched all over and find no solutions.
It seems like that when the like-button is clicked, it pop out a frame from https://facebook.com callback and trying to request http://static.ak.facebook.com thus cause protocol mismatch?!
Here's what I put right after <body> tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'appid', // App ID from the app dashboard
channelUrl : '//mydomain/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asynchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/zh_TW/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
and the channel file at http://mydomain/channel
<script src="//connect.facebook.net/zh_TW/all.js"></script>
and here's how I use the like-button
<div class="fb-like" data-href=url data-send="true" data-width="450"
data-show-faces="true"></div>
Really needs help, please!
In your first script tag you can tell Facebook explicitly to use HTTPS...
Add the line:
FB._https = (window.location.protocol == "https:");
Add it before the FB.init function call, just below or in place of the comment:
// init the FB JS SDK
This will ensure that Facebook's servers load any required libraries their end over https.
Hope this helps.
Reviewing the js code on Facebook there are multiple urls containing hard coded strings for
http://static .../rsrc.php
it's possible those are the files triggering the error.
This may be something Facebook needs to update.
On a side note, it may be possible to download that js file from Facebook and store it on your server and remove the hard coded http string. I would test this further but I am on my phone at the moment.
I want facebook login in my website
For that I followed these steps:
1)Created a demo site at developers (i uploaded the image as well)
2)Copied the app id at the place where required
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<MY APP ID>',
status : true,
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));
</script>
<div class="fb-login-button">Login</div>
3)I got the fb login button as shown in image:
on clicking the button a new window is popped up asking fb username and password and after coming back it shows this error
Unsafe JavaScript attempt to access frame with URL https://www.facebook.com/dialog/permissions.request?_path=permissions.request&app_id=158742990907100&redirect_uri=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D5%23cb%3Dfbf1cdd54%26origin%3Dhttp%253A%252F%252Flocalhost%253A8080%252Ffa53db99%26domain%3Dlocalhost%26relation%3Dopener%26frame%3Df27abde948&sdk=joey&display=popup&response_type=token%2Csigned_request&domain=localhost&fbconnect=1&from_login=1&client_id=158742990907100 from frame with URL http://localhost:8080/Befundo/. Domains, protocols and ports must match.
The properties I set for my app is :
I am not sure about APP NAMESPACE,APP DOMAIN,SITE URL
I am getting one more problem, when I click Login button twice it logs this message in the console of Browser::
FB.login() called when user is already connected.
and do nothing.
Please shed some light where I am doing wrong?
Thanks in advance.
Your login button is working as expected, and it's connecting user (which is confirmed by message that came after second click on the login button).
Next message is not an error in your code (it's because of cross-domain policy applied to JS-SDK trying to communicate with Facebook):
Unsafe JavaScript attempt to access frame with URL ... from frame with URL ... Domains, protocols and ports must match.
You can (probably) suppress it by passing self-hosted channelUrl to FB.init. (see FB.init documentation)
You also seems to do nothing after the user is connected. Read documentation for FB.login to figure out what you should do after user is logged in...
My facebook like button loads really slow, so as a solution I read this;
http://developers.facebook.com/docs/reference/javascript/
The only part I am confused about are these two lines;
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
I am unsure what would go in the above.
Could someone enlighten me? Thank you .
Edit: This is how my code looks like (for facebook like button), and I know it isn't right..
<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'; 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>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I'm not quite sure you need this.
For your like button you should be using https://developers.facebook.com/docs/reference/plugins/like/.
The FB JavaScript SDK is used when you're writing applications that would relay on data they receive from the Facebook API. In your case you're only using a "Like button". That doesn't depend on any data thus you don't need it.
Channel File
The channel file addresses some issues with cross domain communication in certain browsers. The contents of the channel.html file can be just a single line:
<script src="//connect.facebook.net/en_US/all.js"></script>
It is important for the channel file to be cached for as long as possible. When serving this file, you must send valid Expires headers with a long expiration period. This will ensure the channel file is cached by the browser which is important for a smooth user experience. Without proper caching, cross domain communication will become very slow and users will suffer a severely degraded experience. A simple way to do this in PHP is:
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
The channelUrl parameter is optional, but recommended. Providing a channel file can help address three specific known issues. First, pages that include code to communicate across frames may cause Social Plugins to show up as blank without a channelUrl. Second, if no channelUrl is provided and a page includes auto-playing audio or video, the user may hear two streams of audio because the page has been loaded a second time in the background for cross domain communication. Third, a channel file will prevent inclusion of extra hits in your server-side logs. If you do not specify a channelUrl, you can remove page views containing fb_xd_bust or fb_xd_fragment parameters from your logs to ensure proper counts.
The channelUrl must be a fully qualified URL matching the page on which you include the SDK. In other words, the channel file domain must include www if your site is served using www, and if you modify document.domain on your page you must make the same document.domain change in the channel.html file as well. The protocols must also match. If your page is served over https, your channelUrl must also be https. Remember to use the matching protocol for the script src as well. The sample code above uses protocol-relative URLs which should handle most https cases properly.
App Id
This is your Facebook application ID. Go to https://developers.facebook.com/apps and select the application you setup. If you didn't setup an application, then read: http://developers.facebook.com/docs/guides/canvas/
The page you linked to is for the Javascript SDK, which is probably not what you want, unless you want to do more than just plop a "Like" button on your page. To use the SDK, you have to have a Facebook app and add some code to your website, which is where you'll get the App ID.
The "Like" button documentation is here, and there's not a whole lot you can do to get it to load faster if it's Facebook taking a while to load the page, unless you want to add a full-fledged app and maybe use that to "Like" pages for the user, but I'm not sure if that's even possible. Pull up Firebug or Chrome Dev Tools and see what's taking the longest, but it's probably just on Facebook's end.
I am allowing my users to login to my web-app using their Facebook account.
A user is auto-logged in to my website through Facebook if -
They are registered to my site using Facebook
They haven't logged out of my site and ended their session
They are currently signed into Facebook
This is fine, except, there is a pause between the user accessing the homepage and being taken to their dashboard whilst Facebook checks whether they have logged in. Is there a way to show a sort of pre-loader that says "Signing in with Facebook" whilst the transition is made?
I am using the following Facebook javascript -
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxx',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Event.subscribe('auth.login', function() {
FB.api('/me', function(response) {
window.location='mysite/fb_signin/';
});
});
};
(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>
Thank you.
With the facebook api you are able to check if the user is connected or not before doing to call to FB.api (that is what taking time).
http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
This should help
I agree with Marc that you can use the getLoginStatus() to help you determine what they are before you send them to one place or another. However, you said something was slow. So that led me to look at your code, and it appears you're missing the channelUrl in your FB.init() call (see https://developers.facebook.com/docs/reference/javascript/ for more information). without the channelUrl user interaction with the Javascript SDK functions will be sluggish and slow.