About 50% of the time, when calling FB.init, I get this javascript error:
Refreshing the page sometimes fixes the issue. I can't discern any particular pattern.
Does anyone recognize this code? Is it part of the facebook js sdk?
How do I figure out what is going wrong? I checked the open issues at the Facebook support site but did not see anything.
This is my init code straight out of the fb docs:
<script>
window.fbAsyncInit = function () {
debugger;
FB.init({
appId: xxxx,
status: true,
cookie: true,
xfbml: true
});
};
// Load the SDK Asynchronously
(function (d) {
debugger;
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));
</script>
Related
I use Facebook Login in Vue-cli, but it shows 'FB' is not defined.
I separate the code in two files : application.js & app.vue
./assets/js/application.js
// Facebook 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/zh_TW/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
App.vue
mounted: function(){
window.fbAsyncInit = function() {
FB.init({
appId : '<appID>',
cookie : true,
xfbml : true,
version : '{api-version}'
});
FB.AppEvents.logPageView();
};
}
main.js
import './assets/js/application.js'
import App from './App.vue'
You do not have FB in your scope. You need to import it from the library you want to use, like
import { FB as VFacebookLogin } from 'vue-facebook-login-component'
I am not sure what library do you use. This one in my answer is from https://github.com/adi518/vue-facebook-login-component
UPDATE
You separate the code into two files, it can be a reason for the issue. The other reason can be that you do not wait until it will loads. So your mounted works before https://connect.facebook.net/zh_TW/sdk.js have been loaded.
Here is a good example of how it can be done:
https://github.com/adi518/vue-facebook-login-component/blob/master/src/modules/helpers.js#L7
https://github.com/adi518/vue-facebook-login-component/blob/master/src/modules/helpers.js#L27
https://github.com/adi518/vue-facebook-login-component/blob/master/src/components/FBLogin.Scope.js#L51
function initFbSdk(options) {
return new Promise(resolve => {
window.fbAsyncInit = function () {
const defaults = { cookie: true, xfbml: true }
options = { ...defaults, ...options }
window.FB.init(options)
resolve()
};
/* eslint-disable */
(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0]
if (d.getElementById(id)) { return; }
const js = d.createElement(s); js.id = id
js.src = '//connect.facebook.net/zh_TW/sdk.js'
fjs.parentNode.insertBefore(js, fjs)
}(document, 'script', 'facebook-jssdk'))
/* eslint-enable */
})
}
function getFbSdk(options) {
return new Promise(async resolve => {
if (window.FB) {
resolve(window.FB)
} else {
await initFbSdk(options)
resolve(window.FB)
}
})
}
Then you can use it as
const sdk = await getFbSdk({ appId, version, options }) //sdk === FB in this case
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 just want make a script who post when i make the login. I find this code
var body = 'i13 App - Post test';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
}else {
alert('Post ID: ' + response.id);
}
});
it work with Facebook javascipt Test Console, but when i put in my script i never can post and received the alert('error occured),
Thz for your help,
Have you set up the page code correctly? ensure you have the following code within the page
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the app dashboard
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.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
https://developers.facebook.com/docs/reference/javascript/
After the user is logged in successfully you can have a button trigger the following code"
var body = 'Reading JS SDK documentation';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
https://developers.facebook.com/docs/reference/javascript/FB.api/
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
FB.login fails and execution stops on FB.login. I can only see for a few seconds facebook login popup that says "loading", then it disappear and nothing happens.
I have after body tag
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '129519787234412', // App ID from the App Dashboard
channelUrl : '<?=URL?>facebookChannel.php', // Channel File for x-domain communication
status : true, // check the login status upon init?
xfbml : true // parse XFBML tags on this 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.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
After all HTML, in script tag:
$(".box_top_img").click(function(){
FB.login(function(response) {
if (response.authResponse) {
FB.getAuthResponse()['accessToken'];
FB.api('/me', function(response) {
$.ajax({
url:"ajax/check_vote.php",
type:"POST",
data:response,
success:function(response){
var result = $.parseJSON(response);
if(result.code == 0){
$("#container_1").hide();
$("#container_2").hide();
$("#container_3").show();
}else if(result.code == 1){
$("#container_1").hide();
$("#container_2").show();
$("#container_3").hide();
$("#facebook_id").val(result.id);
if(result.first_name)
$("#name").val(result.first_name);
if(result.last_name)
$("#lastname").val(result.last_name);
if(result.email)
$("#email").val(result.email);
}else{
$("#container_1").show();
$("#container_2").hide();
$("#container_3").hide();
}
}
});
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
});
Thanks!!
Check if sandbox mode is disabled on the app settings page
You could try to replace facebook-jssdk with fb-root. This should work.