I'm trying to create a share button with facebook javascript SDK :
On Facebook Developer Page - Facebook Login - Valid OAuth redirect URIs
I have added my dev URL : http://localhost:5000/
I have added this code to my page
window.fbAsyncInit = function() {
FB.init({
appId : 'my app id xxxxxxxxxxxxx',
xfbml : true,
version : 'v2.6'
});
};
(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'));
$('.btnShare').click(function () {
FB.ui({
method: 'feed',
link: "http://localhost:5000/",
picture: 'http://localhost:5000/src/assets/image.JPG',
name: "The name who will be displayed on the post",
description: "The description who will be displayed"
}, function (response) {
console.log(response);
});
});
I click on the share button and an iframe opens and it throws this error:
Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.
Any ideas ?
As described here, you will probably need to tweak your settings in facebook a bit.
Related
I am using facebook login popup in my website. I am showing a loader for api response. But when user click on close button (X) of facebook login window, My loader is showing infinite. So i want to get that event when user click on close button. I am using below code for facebook login popup.
window.fbAsyncInit = function() {
FB.init({
appId : '###',
cookie : true,
xfbml : true,
version : 'v3.1'
});
FB.AppEvents.logPageView();
window.checkLoginState = function() {
FB.getLoginStatus(function(response) {
document.getElementById('loader-response').classList.add('show');
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
if (response.status === 'connected') {
getProfile();
} else {
window.localStorage.setItem('facebook',false);
}
}
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
I have edited your code.
Just add document.getElementById('loader-response').classList.add('show'); after the FB.getLoginStatus(function(response) function.
What should be the app domain in FB app option in Fb Login when my app is a chrome extension.
I have tried chrome-extension:/[id]
without it the error is coming
Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.
This is my logic.js
window.fbAsyncInit = function() {
FB.init({
appId : '1232048723506658',
xfbml : true,
version : 'v2.6'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
}
else {
console.log('initiate FB login...');
FB.login();
}
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
Please explain .
I have an angular-ui-router web app.
There's code:
window.fbAsyncInit = function () {
console.log('loginCtrl.window.fbAsyncInit: initiating FB ...');
FB.init({
appId: '1058057514286456', // rand's peoplecount-www app
//status: true,
//cookie: true,
xfbml: true,
version: 'v2.5'
});
(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'));
When I click on the login-with-facebook button, it calls:
FB.login(function (response) {
console.log('FB Reg : Response - ' + JSON.stringify(response));
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', {fields: 'name, email,first_name,last_name,verified'}, function (response) {
$scope.saveUserInfo('$scope.fbRegistration', response);
console.log('fbReg: api response='+JSON.stringify(response));
});
} else {
console.log('fbReg: User cancelled login or did not fully authorize. response='+JSON.stringify(response));
}
});
When I hit the facebook login button, I a facebook dialog opens with a message:
URL Blocked
This redirect failed because the redirect URI is not whitelisted
in the app’s Client OAuth Settings. Make sure Client and Web OAuth
Login are on and add all your app domains as Valid OAuth Redirect URIs.
What redirect URI is it using? Where do I set it?
https://developers.facebook.com/docs/facebook-login/web === nothing on this web page talks about the redirect URI
https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow === this has a call to a url with a redirect_uri on it. Do I have to use this manual method?
https://www.facebook.com/dialog/oauth?
client_id={app-id}
&redirect_uri={redirect-uri}
Thanks
All redirect URI should be whitelisted in the App's Dashboard.
The Dashboard can be accessed at https://developers.facebook.com/
Under PRODUCTS category you should see "Facebook Login" (if not - just create it through "+Add Product" option)
On the "Facebook Login" you'll find "Valid OAuth redirect URIs" parameter where you can whitelist your URIs.
Facebook security guys explains why it may be necessary https://www.facebook.com/FacebookforDevelopers/videos/10152795636318553/ at around 9:50.
Starting March 2018 only such whitelisted URIs will be able call Facebook API.
Facebook login is not working. I dont know why.
Following is the FB js code :
<script>
window.fbAsyncInit = function () {
FB.Event.subscribe('auth.statusChange', function (response) {
$(document).trigger('fbStatusChange', response);
});
FB.init({
appId: '419718681491265', // App ID
channelUrl: 'http://127.0.0.1/9377/', // Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
};
// Load the SDK Asynchronously
(function (d) {
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.js";
ref.parentNode.insertBefore(js, ref);
}(document));
Following is the App dashboard:
Please help..Tired of banging my head
The error is :
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
It seems that you can't test Facebook connect locally.
So a URL of 127.0.0.1 will not work.
I have been racking my brain for 2 days now. I am trying to build a simple Facebook app using the Javascript SDK and I just want a simple alert if the user is not authorized using getLoginStatus(). It works fine in my website but not in the canvas. I get no alert. I am using very simple code that Facebook provides.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '354932757968708', // App ID from the app dashboard
channelUrl : '//www.staging.socialdigi.com/channel.html', // Channel file
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("Youre In");
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
alert("Not Authorized");
} else {
// the user isn't logged in to Facebook.
}
});
};
// 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.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I get the following errors in the console but have been told it doesnt have anything to do with my issue
Blocked a frame with origin "http://static.ak.facebook.com" from accessing a frame with origin "http://staging.socialdigi.com". The frame requesting access set "document.domain" to "facebook.com", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access.
I do not have an ssl
Its in sandbox mode
I have the canvas url correct and nothing for secure canvas url
app id is correct
any help is appriciated
thanks