I am trying to display the feed into my console using a console.log however it is returning an error of no token.
message: "An active access token must be used to query information about the current user."
type: "OAuthException" error code : 2500;
the message above is what I am getting. I have followed the steps given by FB.
The code is bellow.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '',
xfbml : true,
version : 'v2.1',
});
FB.api('/me', {fields: 'last_name'}, 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 = "http://connect.facebook.net/en_UK/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root">
</div>
You are trying to call the API without asking the user to login first. Instead, remove the FB.api line in your code and replace it with the below:
FB.login(function(){
FB.api('/me', 'get', {fields: 'last_name'}, function (response ) {
console.log(response);
});
});
Ideally, you should call the above login code when a "Login" button is pressed, e.g.:
<button type="button" onclick="doLogin();">Login to Facebook</button>
(Remember to wrap the FB.login() function in the doLogin() function.)
Related
I am trying to create a script for Facebook Messenger which is intended to be run from the browser console. As part of the script's functionality, I need to access the Facebook Graph - here is the relevant code:
window.fbAsyncInit = function() {
FB.init({
appId : '(my app's ID is here)',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.12'
});
FB.api(
'/me?fields=name',
'GET',
{fields: 'name'},
function(response) {
if (response && !response.error) {
console.log(response);
}
else {
console.log("Error with 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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
};
Most of the code is copied from the Facebook help page. Unfortunately, when run, neither the request response nor the string 'Error with SDK!' are logged to the console.
I am not quite sure why this doesn't work as intended and one of my thoughts is that the code has to be executed from an actual web page - however, this is not an option since the code has to be run directly from Messenger in order to obtain its source code. This can not be done from another URL due to the Same-Origin Policy. Any help is greatly appreciated!
I want to add facebook login to my website. I async load it, and when I check that the person is not logged into my website through facebook I call a function to register them, but I get an error saying my function does not exist... facebook is in an html file, and the method I'm calling (FaceRegister()) is in a javascript file with the same name. I presume this is because of the loading order? Any ideas how to solve this?
Code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '217518691989396',
xfbml : true,
version : 'v2.8'
}) ;
FB.AppEvents.logPageView();
$(document).trigger('fbload');
};
(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'));
$(document).on(
'fbload',
function(){
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else {
// The person is not logged into your app or we are unable to tell.
faceRegister();
}
}
window.fbAsyncInit = function() {
FB.init({
appId : '154776817xxxxxxx',
xfbml : true,
version : 'v2.1'
});
};
(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'));
function checkLoginState(chackStatus) {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.api('/me?fields=id,name,birthday,email,first_name,gender,hometown,last_name,location,middle_name,picture', function(response) {
console.log('Successful login for: ' + response.name);
});
} else {
FB.login( function(){
FB.api('/me?fields=id,name,birthday,email,first_name,gender,hometown,last_name,location,middle_name,picture', function(response) {
console.log('Successful login for: ' + response.name);
});
},{scope: 'email,user_birthday'});
}
});
}
Facebook Response :
{
"error" : {
"message" : "An active access token must be used to query information about the current user.",
"type" : "OAuthException",
"code" : NumberLong(2500),
"fbtrace_id" : "D3axJ2QxG1h"
},
"image" : "https://graph.facebook.com//picture?type=large"
}
The question is: When exactly do you call checkLoginState? You must call it after FB.init, after the JS SDK is loaded. That being said, there is an issue with FB.login, you are calling it in the asynchronous callback of FB.getLoginStatus - you MUST call it on user interaction instead, or browsers will block the popup. In general, use FB.getLoginStatus right after FB.init and FB.login on user interaction (mouse click).
Also, make sure the user is authorized in the callback of FB.login.
For example: http://www.devils-heaven.com/facebook-javascript-sdk-login/
I am trying to integrate parse database with my website. It is almost one day I spent but I couldn't figure out the problem. Here is my code:
<div id="fb-root"></div>
<script>
Parse.initialize("**************************", "**********************");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : '*****************',
cookie : true,
xfbml : true
});
Parse.FacebookUtils.logIn(null, {
success: function(user) {
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
};
(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#xfbml=1&version=v2.3&appId=920929871279093";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-login-button" data-max-rows="3" data-size="medium" data-show-faces="true" data-auto-logout-link="true"></div>
My problem is that when I run this piece of code I get following error but login button appears and work fine.
As I search for this issue people are saying I change
//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=920929871279093";
To
//connect.facebook.net/en_US/sdk.js#xfbml;
or
//connect.facebook.net/en_US/sdk.all;
I do not understand how this really work. And appreciate if anyone say where I am calling init.FB twice and how to fix it.
I think you need to put version number in init function:
The following is the example from parse.com https://www.parse.com/docs/js/guide#users-setup
<script>
// Initialize Parse
Parse.initialize("$PARSE_APPLICATION_ID", "$PARSE_JAVASCRIPT_KEY");
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({ // this line replaces FB.init({
appId : '{facebook-app-id}', // Facebook App ID
status : true, // check Facebook Login status
cookie : true, // enable cookies to allow Parse to access the session
xfbml : true, // initialize Facebook social plugins on the page
version : 'v2.3' // point to the latest Facebook Graph API version
});
// Run code after the Facebook SDK is loaded.
};
(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'm trying to post multiple facebook post on a page by using jQuery. So far I am getting success to post first facebook post but not able to post another.
What is happening?
facebook post embed url is
<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#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-post" data-href="https://www.facebook.com/ClashofClans/posts/1104473549576967:0" data-width="500">
<div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ClashofClans/posts/1104473549576967:0">
<p>The update is finally here!!! Maintenance will start soon! Read all that's new: http://supr.cl/UpdateNotes
</p>
Posted by
Clash of Clans on
Wednesday, July 1, 2015
</blockquote>
</div>
</div>
When I append this URL directly to DIV, it calls an iframe and then complete facebook post data binds on DOM. It works very well but next time Iframe is not loading on the DOM. In console first time I found an APP error ie Invalid App Id: Must be a number or numeric string representing the application id.. I tried with correct AppId but not succeed. Below is my code what I've tried so far
$("input").blur(function ()
{
$('div').html($(this).val());
//$(this).val() is facebook post URL shown above
})
Will anyone please suggest me the correct way of doing that ?
Use the following code. It factors when the code is loaded. The answer was created using this source Working with asynchronously loaded javascript You can wrap the getLoginStatus call in a loop if you will.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<input type="text" id="message" />
<input type="button" id="send" value="Send" />
<script>
$(document).ready(function(){
function facebookReady() {
FB.init({
appId : '1521775134725984',
xfbml : true,
status : true,
cookie : true,
version : 'v2.1'
});
$(document).trigger("facebook:ready");
}
if(window.FB) {
facebookReady();
} else {
window.fbAsyncInit = facebookReady;
}
});
$(document).on("facebook:ready", function() {
$("#send").on("click", function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var body = $("#message").val();
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
}
else {
FB.login(function(){
}, {scope: 'publish_actions'});
}
});
});
});
(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>
</html>