Facebook SDK throws following console error:
FB.NativeExtensions.onready only works when the page is rendered in a WebView of the native Facebook app. Test if this is the case calling FB.UA.nativeApp()
sdk.js:57
Has anyone encountered this?
I created this simple fiddle and it shows the error even by just loading FB SDK.
// 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_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
fiddle
Related
I have a vue2 single-page-app. In an vue component, I try to use Facebook Javascript SDK to authenticate and use Graph API.
In a method, I use this code to connect to Facebook
window.fbAsyncInit = function () {
FB.init({
appId: 'xxx',
cookie: true,
xfbml: true,
version: 'v2.10'
});
console.log(FB);
FB.getLoginStatus(function (response) {
statusChangeCallback(response);
});
};
(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/de_DE/sdk.js";
js.src = "https://connect.facebook.net/de_DE/sdk/debug.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
When the app executes the method FB.getLoginStatus, I get the error message “URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings.”.
I know that I have to go to the settings of my facebook app and enter the redirect url into OAuth Redirect URIs.
My problem is, I have done this. The callback url is https://localhost/myapp/public/api/facebook/callback. So I guess I'm too stupid to find out the correct callback url... Any ideas how to find out this one?
I solved the problem using the vue router history mode.
In my router js file, I added this line:
const router = new VueRouter({
mode: 'history', // that did the trick
routes: [ ... ]
})
There may be a better solution, but it works for me...
I'm trying to incorporate Facebook sharing into the website I'm building. I'm following FB's guide for including their Javascript SDK (and copy/pasting their code inside a script tag directly following the body tag) but for some reason it isn't working. In the following code "running" is successfully printed but the "Initialized" never prints and the shareFacebook function is never successfully initialized. Does anyone know why this is?
console.log("Running init script");
window.fbAsyncInit = function() {
FB.init({
appId : '444853392519445',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
function shareFacebook() {
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/'
}, function (response) {
});
console.log("Inside shareFacebook");
}
console.log("Initialized");
};
(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_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
I think, that I had the same Problem with Facebook SDK. Can you test with
js.src = "//connect.facebook.net/en_US/all.js";
and remove also version : 'v2.8'.
I've started a new Visual Studio 2012 Express Web project using the HotTowel SPA template. I'm not sure where I should be placing the code to load the Facebook SDK within the HotTowel structure?
I've tried main.js, and shell.js but I can't seem to get the sdk to load. Facebook says to put the below code to load the sdk asynchronously
window.fbAsyncInit = function () {
// init the FB JS SDK
FB.init({
appId: '577148235642429', // App ID from the app dashboard
channelUrl: '//http://localhost:58585/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/en_US/all/debug.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Create a module in a file called facebooksdk.js that contains this code. Then "require" the code in the boot sequence, if you want it to load right away.
It is not easy to use to use Facebook SDK with Durandal.
Facebook offers instructions how to set it up with require. But sounds like that method is not supported in Durandal.
I made my dirty version by wrapping global FB object with vm supporting knockout. You could easily use that and bind to any properties like users name.
Include that facebook.js from shell.js to make sure it is loaded when app starts.
Here is my facebook.js:
define(['services/logger'], function (logger) {
var vm = {
facebook: null,
initialized: ko.observable(false),
name: ko.observable(""),
picturesrc: ko.observable(""),
login: login,
logout: logout
};
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function () {
window.fbAsyncInit = function () {
vm.facebook = FB;
vm.facebook.init({
appId: '160000000000499',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
vm.initialized(true);
vm.facebook.getLoginStatus(updateLoginStatus);
vm.facebook.Event.subscribe('auth.statusChange', updateLoginStatus);
};
});
return vm;
function login() {
vm.facebook.login( function(response) {
//Handled in auth.statusChange
} , { scope: 'email' });
}
function logout() {
vm.facebook.logout( function (response) {
vm.picturesrc("");
vm.name("");
});
}
function updateLoginStatus(response) {
if (response.authResponse) {
logger.log("Authenticated to Facebook succesfully");
vm.facebook.api('/me', function (response2) {
vm.picturesrc('src="https://graph.facebook.com/' +
+response2.id + '/picture"');
vm.name(response2.name);
});
} else {
logger.log("Not authenticated to Facebook");
vm.picturesrc("");
vm.name("");
}
}
});
I have not tested my code properly. But atleast logging in and fetching name worked fine in Chrome.
Remember change appId and update proper domain at developers.facebook.com.
Actually, I am making a simple page in Symfony2.2. I've got the following codes in a twig template:
<!-- facebook link -->
<div id="fb-root"></div>
<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_US/all.js#xfbml=1&appId=297720976910223";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>
<!-- end facebook link-->
They successfully do the following:
display a facebook login button on my page.
when I click on the button, I can enter my Facebook account.
I get my Facebook name displayed on my page.
Now what I wish to do is: After having entered a valid Facebook account on the Facebook popup, once I get back on my page, I can alert somthing. For example something like:
function after_click() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("Facebook user is connected");
}
});
..The problem is that I don't exactly how it works. I have tried several options in my codes and searched the net, but in vain.
Any one could explain me the principles for the above and guide me through?
(PS: My final objective is to replace the 'alert' code by a code which redirects the user to another page.)
Thank you alots.
#Thomas, thank you for your answer.. But I really don't understand why the following gives me an alert only when the btnTest is clicked (alert="You clicked on me for a test.."); other alerts are never displayed:
<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '297720976910223', // App ID from the App Dashboard
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
FB.Event.subscribe('auth.login', function(response) {
alert("test connection");
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
alert("connected");
} else if (response.status === 'not_authorized') {
// not_authorized
alert("not authorized");
} else {
// not_logged_in
alert("not logged in");
}
}, true);
};
function testme()
{
alert("You clicked on me for a test..");
FB.getLoginStatus(function(response) {
alert("xxx_");
if (response.status === 'connected') {
// connected
alert("connected");
} else if (response.status === 'not_authorized') {
// not_authorized
alert("not authorized");
} else {
// not_logged_in
alert("not logged in");
}
});
}
// Load the SDK's source Asynchronously
// Note that the debug version is being actively developed and might
// contain some type checks that are overly strict.
// Please report such bugs using the bugs tool.
(function(d, debug){
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" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
</script>
<fb:login-button onlogin="testme()" autologoutlink='true' perms='email,user_birthday,status_update,publish_stream'></fb:login-button>
<!-- Just for testing purposes-->
<button type="button" name="btnTest" onclick="testme()">Test</button>
<div class="fb-login-button" data-show-faces="true" onlogin="testme()" data-width="200" data-max-rows="1"></div>
</body>
</html>
PS: On facebook dev website its written:
Prerequisites:
You'll need somewhere that lets you host HTML files online. If you haven't got one, you can get set up quickly at no cost with Heroku.
I'm testing that file on my PC; does that make a difference..?
The function FB.getLoginStatus only tells you, whether the user is authenticated with your application, not if he just logged in.
You can register a listener on login status change to connected:
FB.Event.subscribe('auth.login', function(response) {
// handle the login
});
More info on FB JavaScript SDK Events.
I moved to omniauth-facebook and it is working wonderfully. I've been trying to use popups for the login button but I can't get it to work.
I followed the example on https://github.com/mkdynamic/omniauth-facebook/blob/master/example/config.ru for a rails app.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '#{ENV['APP_ID']}',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
};
(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() {
$('a').click(function(e) {
e.preventDefault();
FB.login(function(response) {
if (response.authResponse) {
$.get('/auth/facebook/callback');
}
}, { scope: '#{SCOPE}' });
});
});
</script>
<p>
Connect to FB
</p>
It almost works: clicking on the link will display the popup and I get authenticated, but when the popup closes I remain on the login page, even though I can see in the logs that the destination page is processed, and if I click on a link that's available both to guests and members, I will get the member version, another proof that the login worked.
So why isn't the browser redirected even though the login is successful ? Should I modify something in the controller method that logs the user in (like a "respond_to" with a special format) ?
Thanks
When a user logs in via FB.login the dialog closes and the user goes back to the main window, and the callback is invoked.
In your callback you do $.get('/auth/facebook/callback');, which is an ajax call.
Where's the redirect?
Add :authorize_params => { :display => 'popup' } to the provider info for facebook in your initializer.