Right now I am having trouble with my facebook login in js for my website.
This is all of the code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '3',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function(response) {
alert('whoo hoo!!! getLoginStatus called the callback');
});
};
(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'));
</script>
And I am getting this error:
cxx.faceboo…:1 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 even edited my hosts file so that the domain points to my local machine.
Does anyone have any idea what could be causing this?
Thank you!
Related
Has anyone had success using the Facebook SDK in your react web (not native) project? There doesn't seem to be any good documentation on it.
Specifically. Where to I call the init function?
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.9'
});
FB.AppEvents.logPageView();
};
(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'));
</script>
If I add it on every page, FB.AppEvents.logPageView() does not load/register back to Facebook ( I don't see it when debugging events). If I add the init code on my main app.js, and then just add FB.AppEvents.logPageView() on individual pages I sometimes get an console error that FB.AppEvents can't be found.
What is the best practice for integrating the Facebook SDK in a react web app?
Did you have app-id and set it in your code?
https://developers.facebook.com/apps/
There may be many approaches, I am currently using that approach to do this:
Add the Facebook SDK for JavaScript in index.html page where you are placing your whole app component. Also add <div id="fb-root"></div> after the start of body tag in the same index.html file.
<body><div id="fb-root"></div><div id="root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.9'
});
FB.AppEvents.logPageView();
};
(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'));
</script></body>
The above snippet initialises the window.FB variable once your app component mounted. You can use this variable to do window.FB.AppEvents.logPageView() and any other stuff such as accessing graph API.
There is one issue that can be arises and that is when the component is mounted, things works fine, but once, its un-mounted and you can come back to this component, things may not work fine such as fb comments or like plugin. To tackle this issue you have to put the following line: if (window.FB) {window.FB.XFBML.parse();} in ComponentDidMount() life cycle method of every component in which you are accessing facebook stuff. It will re-parse the dom after mounting your component.
I want to show facebook like button. When a user clicks on the button it should make a callback after a user successfully likes that page.
Here is my code:
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-layout="box_count" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
<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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '510679165797120',
xfbml : true,
version : 'v2.6'
});
FB.Event.subscribe('edge.create', function(response) {
console.log('hello');
});
};
</script>
But it is not working. When you click on the like button it shows an error.
Can someone please tell me how to solve this issue?
It could be worth changing the js.src line. To me I see it as though this line is looking for a local file.
js.src = "https://connect.facebook.net/en_US/sdk.js";
I previously used the following line, but I'm not sure of the difference to be truthful:
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1"
You can get the code to like a Facebook page built for you directly by Facebook at this site --> https://developers.facebook.com/docs/plugins/like-button
That way you avoid deprecation issues, etc.
Just go there, enter the pertinent info, grab the code they spit out and place it on your site.
good luck!
demo : http://so.devilmaycode.it/facebook-like-button-showing-error-when-clicked/
The error happen because you are on localhost or not in the same domain you specidied in the app settings
also in order to work, your callback function should be at the top like below
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '#############',
xfbml : true,
version : 'v2.6'
});
FB.Event.subscribe('edge.create', function(response) {
console.log('hello');
});
};
(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'));
</script>
I added Facebook Comment on my site.
window.fbAsyncInit = function() {
FB.init({
appId : appId,
xfbml : true,
version : 'v2.5'
});
FB.Event.subscribe('comment.create', addedComment);
};
(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/ru_RU/sdk.js#xfbml=1&version=v2.5appId=appId;
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
appId - number my application on facebook.
On page add next code:
echo "\n<div class=\"fb-comments\" data-href=".the_permalink()." data-num-posts=\"7\" data-width=\"470\"></div>";
(I using Wordpress) Commentbox show on site, comments show in moderation tools, but on refresh page commentbox is empty.Why?
(sorry for my English)
I am using ng-Facebook service in my angular web app. I want to include a Facebook comments plugin. So, I have copied the code in the Facebook plugin with the Javascript SDK. I can see the comments in my page but the ng-Facebook service is not working.
I am getting this error:
FB.init has already been called - this could indicate a problem sdk.js:54
Uncaught Error: invalid version specified sdk.js:85
The code is in a plunkerlink
How is the service not working but I can still see the comments?
I don't know did you solved your issue but facebook changed their javascript-sdk code. I got same error with you and my javascript code was like this;
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: 'xxxxxxxxxxx',
status: true,
cookie: true,
oauth: true,
xfbml: true
});
};
(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/tr_TR/sdk.js#xfbml=1&version=v2.1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And I changed it like this. Then error gone.
<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/tr_TR/sdk.js#xfbml=1&appId=xxxxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Hope this will help
You can tell the ngFacebook service what Graph api version you want to use:
app.config(function($facebookProvider) {
$facebookProvider.setCustomInit({
version : 'v1.0'
});
});
I've added a facebook comment box on my website, but its only loading around 40% of the time. The other 60% nothing happens. I've tried to do some troubleshooting and came up with that, the times its not loading the height of the box is set to 0px, but when its loading it says 160px, as its supposed to.
Here is all the code related to the commentbox.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
The following is right after the body tag.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '389788207743820', // App ID
channelUrl : 'file:///C:\Users\ts10027\Documents\Mina webbplatser\recensionsida\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
});
};
(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 = "http://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<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/sv_SE/all.js#xfbml=1&appId=389788207743820";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
and this is placed where I want my box
<div class="fb-comments" data-href="http://www.stadskoll.nu/restaurang/harrys.php" data-num-posts="2" data-width="565px" data-height="160"></div>
Thanks in advance
If that's the code you're actually using, there are a few things you need to change:
channelUrl : 'file:///C:\Users\ts10027\Documents\Mina webbplatser\recensionsida\channel.html', // Channel File
This has to be on a public URL, just move the file somewhere on the server where it can be accessed by anybody.
Next, you have to and you're including the JS SDK two times? You might want to double check that: https://developers.facebook.com/docs/reference/javascript/