Any help with this issue would be appreciated!
I'm getting this error in the console:
Uncaught b {message: 'invalid version specified', innerError: undefined}
As far as I'm aware 15.0 is the latest version, right? Here's my script which caused the error:
`<script>
FB.init({
appId : 'myappidisherebuthidden',
status : true,
xfbml : true,
version : 'v15.0'
});
(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'));
</script>`
I'm using the snippet from Facebook's quick start and it's not working. I'm about to go insane.
All answers given on questions I've seen so far don't seem to work either.
I've used the snippet given by FB, as well as attempting removing the 'v' from version
Snippet Facebook provides:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v15.0'
});
};
</script>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js">
</script>`
Ok the answer is I'm stupid. I forgot I had duped the file to move into my htdocs folder. It turns out I was editing the wrong file and I've just wasted 2hrs of my life.
SMH
edit: If you're struggling with the 'Invalid version specified' problem refer to my code above and make sure you're editing the wrong file.
Related
I'm trying to add a facebook share to my react application. There is a lot of detail on Stackoverflow around adding FB.XFBML.parse()
How ever i'm a lint error "FB is not defined". What is the best way to load FB?
edit
window.fbAsyncInit function added.
"use strict";
var React = require('react');
var Router = require('react-router');
var Link = Router.Link;
var ThanksPage = React.createClass({
componentDidMount: function() {
(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
const js = d.createElement(s); js.id = id;
js.async = true;
js.src = '//connect.facebook.net/fr_CA/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.XFBML.parse();
};
},
render: function() {
return (
);
}
});
module.exports = ThanksPage;
You can only use FB after FB.init:
componentDidMount() {
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.6'
});
//JS SDK initialized, now you can use it
FB.XFBML.parse();
};
//load the JavaScript SDK
(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'));
}
Also, make sure to use this with a server (public or localhost), don´t just open the html file in your Browser. You should also consider putting the Facebook stuff in a separate file, so you can use it in future projects. But first, make sure it works and make sure you understand what´s happening.
Keep in mind that you may need to use FB.XFBML.parse in componentDidUpdate too. You have to make sure the JS SDK is loaded already for that. componentDidMount will only get called once, and if you go to another route and back to this component, it will be cached and you need to parse Social Plugins again.
More information about the JS SDK: http://www.devils-heaven.com/facebook-javascript-sdk-login/
You can get rid of the linting error by using /*global FB*/ at the head of your files, or (much better) by defining FB in the .eslintrc file (if using ESLint):
"globals": {
"FB": true
}
You are trying to execute
FB.init();
FB.XFBML.parse();
When the SDK is not even loaded, so, of course, you will get the undefined reference error.
You are missing the callback
window.fbAsyncInit = function() {
// Example: Standard initialization code:
FB.init({
appId : '{your-app-id}',
status : true,
xfbml : true,
version : 'v2.4' // or v2.0, v2.1, v2.2, v2.3
});
FB.XFBML.parse();
};
This code loads the SDK asynchronously so it does not block loading
other elements of your page. This is particularly important to ensure
fast page loads for users and SEO robots.
The URLs in the above code are protocol relative. This lets the
browser to load the SDK over the same protocol (HTTP or HTTPS) as the
containing page, which will prevent "Insecure Content" warnings.
The function assigned to window.fbAsyncInit is run as soon as the SDK
is loaded. Any code that you want to run after the SDK is loaded
should be placed within this function and after the call to FB.init.
For example, this is where you would test the logged in status of the
user or subscribe to any Facebook events in which your application is
interested.
Furthermore, you should set the callback before loading the SDK
window.fbAsyncInit = function() {
// Example: Standard initialization code:
FB.init({
appId : '{your-app-id}',
status : true,
xfbml : true,
version : 'v2.4' // or v2.0, v2.1, v2.2, v2.3
});
FB.XFBML.parse();
};
(function (d, s, id) {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
const js = d.createElement(s); js.id = id;
js.async = true;
js.src = '//connect.facebook.net/fr_CA/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
If you want to add any social share buttons to your react pages then you can try out npm module react-share which is very easy compared to native APIs by FB, Twitter etc.
Sample react-share code snippet at https://samvikshana.weebly.com/blog/react-share-social-share-widgets
As instructed by this page, I include the SDK snippet into my page, except that since I don't have any Facebook APP and I was just trying to build a custom share button on my page, I leave parameter "app-id" as null. To test if it is up and running, on console I execute
FB.getLoginStatus(function(response){
console.log(response)
})
while I am logged in FB. However, it returns undefined, which means there is no response. What is wrong? Is this because I didn't assign a "app-id"?
It depends on where you're calling getLoginStatus from and in what order. It needs to be inside your fbAsyncInit function:
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.4'
});
FB.getLoginStatus(function(response){
console.log(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/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
That should load the SDK, initialize everything, then get your login status.
My facebook login doesn't work. It open the popup ask me a permission. I allow permission then it stuck on the blank popup and give me js error.
error in event handler for (unknown): Error: Failed to execute 'observe' on 'MutationObserver': The provided node was null.
at observeNodes (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/Rain1/Overlay.js:216:13)
at init (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/version2.js:218:6)
at HTMLDocument.<anonymous> (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/version2.js:55:3)
at c (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/jquery-1.9.1.min.js:3:7857)
at Object.p.add [as done] (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/jquery-1.9.1.min.js:3:8167)
at b.fn.b.ready (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/jquery-1.9.1.min.js:3:2072)
at b.fn.b.init (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/jquery-1.9.1.min.js:3:1602)
at b (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/jquery-1.9.1.min.js:3:206)
at Object.fetchAll0 (chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/version2.js:54:2)
at chrome-extension://ihamlfilbdodiokndlfmmlpjlnopaobi/jslib/Rain1/Overlay.js:125:51
Here is my code.
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxx',
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));
//LOGIN FUNCTION
function login() {
FB.login(function(response) {
if (response.authResponse) {
alert('Success!');
}
console.log(response);
}, {scope: 'email'});
}
</script>
<div onclick="login();">Login with Facebook</div>
</body>
Anyone have an idea about it?
PS. I tested share/login in my old apps. They are broken too.
I think it's facebook api servers fault, is down!
I was working normal and minutes ago the javascript sdk stop working and stuck with a blank popup as you describe.
I was able to connect normally by PHP sdk but not with javascript sdk.
hope this helps and little.
I'm currently trying to allow user to connect to my site with their Facebook account but I have some issues.
First of all, you have to know that I already added a Like button with this code:
<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/fr_FR/all.js#xfbml=1&appId=myappid";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
var urlfb = document.location.href;
$(document).ready(function(){
$('fb\\:like').attr('href', urlfb);
});
</script>
So I saw the post of Facebook on how to add Facebook Login to his website but each time I launch the page where I pasted the FB code, there is this famous error message: FB.init has already been called - this could indicate a problem.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid', // App ID
channelUrl : '', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
What do I have to do to remove this error ? I tried to remove my Like button and no more error but I want to keep this like button, so what do I have to delete to make it works ?
Any ideas ?
Thanks
Adding #xfbml=1&appId=myappid to the end of the SDK URL makes it automatically initialze itself – so just remove that part, change
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=myappid";
into
js.src = "//connect.facebook.net/fr_FR/all.js";
Facebook SDK window.fbAsyncInit not firing on localhost? worked fine last week.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
console.log("hey");
// init the FB JS SDK
FB.init({
appId : '***************', // App ID from the App Dashboard
channelUrl : '//localhost/channel.html', // Channel File
status : true, // check the login status upon init?
cookie : true, // set sessions
xfbml : true // parse XFBML tags on this page?
});
}
// 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*/ true));
</script>
"hey" does not fire upon loading the page
additionally I noticed that when i comment out the channel url in the "Fb.init", but add the:
<script src="//connect.facebook.net/en_US/all.js"></script>
within the header of the file, "hey" fires upon first loading the page, but not the upon subsequent tries
To be more explicit. This is what the error in my console reads:
Uncaught SyntaxError: Unexpected token ( connect.facebook.net/en_US/all/debug.js:9237
You missed loads the SDK below FB.init().
(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));`
https://developers.facebook.com/docs/reference/javascript/
and make sure you sets up App Domains in App setting page.
There is currently a bug in the rendering of the debug version of all.js - that is causing your code not to execute correctly. This will be resolved shortly.