UPDATED.
This code block takes the users facebook connections and saves them into the "fbdata" and within the div "friends-list-container".
Here is the page with the error.
I'm then attempting to save the data to parse.com and have the following error shown the image below.
<!doctype html>
<!-- Runs Parse and FB code that uses Facebook authentication to login
user to the site and redirects them to the main content area. This page is
fired from the Facebook button being clicked on the site landing page-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="fresh Gray Bootstrap 3.0 Responsive Theme "/>
<meta name="keywords" content="Template, Theme, web, html5, css3, Bootstrap,Bootstrap 3.0 Responsive Login" />
<meta name="author" content="Adsays"/>
<title>Parse JavaScript Todo App</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="scripts/underscore-1.1.6.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.13.min.js"></script>
</head>
<body>
<!-- Important, must be on the page -->
<div id="fb-root"></div>
<!-- Initialize the Parse object-->
<script type="text/javascript">
Parse.initialize("79tphN5KrDXdjJnAmehgBHgOjgE2dLGTvEPR9pEJ", "9lblofQNZlypAtveU4i4IzEpaOqtBgMcmuU1AE6Y");
var user = Parse.User.current();
//Fb app information//
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : '523753101076577',
channelUrl : 'http://www.kudosoo.com/channel.html',
status : true,
cookie : true,
xfbml : true
});
//FB user authentication script, after this completes it fires todos_two.js to redirect user to main content page//
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
FB.api('/me/friends', function(response){
if (response && response.data){
var contact = new Parse.User();
var fbdata=response.data;
var divTarget=document.getElementById("friends-list-container");
for (var friendIndex=0; friendIndex<fbdata.length; friendIndex++)
{ var divContainer = document.createElement("div");
divContainer.innerHTML="<b>" + fbdata[friendIndex].name + "</b>";
divTarget.appendChild(divContainer);
}
var contact = new Parse.User();
var contact = new Contact();
$(document).ready(function () {
var username = $("#friends-list-container").val();
contact.set("facebookFriends", fbdata.toString());
contact.save(null, {
success: function (results) {
// The object was saved successfully.
location.reload();
},
error: function (contact, error) {
// The save failed.
// error is a Parse.Error with an error code and description.
alert("Error: " + error.code + " " + error.message);
}
});
});
} else {
console.log('Something goes wrong', 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/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="friends-list-container"></div>
</body>
</html>
Here is the error.
Try replacing this line:
var contact = Parse.Object.extend("_User");
Updated from the chat conversation, this is what solved the problem:
If you want to store the friends list in an array on the current user, then Parse.User.current() is what you want:
var contact = Parse.User.current()
Related
Using 'Facebook Login for the Web with the JavaScript SDK', I have a login button which works fine, i.e. user is logged in OK.(https://developers.facebook.com/docs/facebook-login/web#loginbutton).
However, the button does not change to the Logout button until I refresh the page. After refresh the logout button is displayed and when clicked reverts to login button as expected. Following is the full code which can be run from within IIS. I put it in my default web site and called http://localhost/aspnet_client/system_web/4_0_30319/test.html.
NOTE: Add your App Id where it says, ADD YOUR APP ID HERE.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="row margin-bottom-small">
<div id="login-button" class="fb-login-button" data-max-rows="1" data-size="xlarge" data-show-faces="false" data-auto-logout-link="true" onlogin="checkLoginState();"></div>
<div id="status"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
testAPI();
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'ADD YOUR APP ID HERE',
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
</body>
</html>
FB code is from https://developers.facebook.com/docs/facebook-login/web#example
I don't want to refresh the page programatically. It is a single page application and refreshing the page will take me to the start.
Thanks.
Well, I couldn't figure out why it wouldn't refresh automatically - perhaps that by design. Here is my workaround - basically add the logout button and call FB.logout myself. If someone from Facebook dev team can provide a more elegant solution, I'd love to know. Thanks.
NOTE: Add your App Id where it says, ADD YOUR APP ID HERE.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="row margin-bottom-small">
<div id="login-button" class="fb-login-button" data-max-rows="1" data-size="small" data-show-faces="false" data-auto-logout-link="false" onlogin="checkLoginState();"></div>
<div hidden id="logout-button" class="fb-login-button" data-max-rows="1" data-size="small" data-show-faces="false" data-auto-logout-link="false" onlogin="logout();">Log Out</div>
<div id="status"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
testAPI();
} else {
// The person is not logged into your app or we are unable to tell.
//document.getElementById('status').innerHTML = 'Please log into this app.';
document.getElementById('login-button').style.display = 'block';
document.getElementById('logout-button').style.display = 'none';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function logout() {
FB.logout(function (response) {
document.getElementById('logout-button').style.display = 'none';
document.getElementById('login-button').style.display = '';
document.getElementById('status').innerHTML = 'You have been logged out!';
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'ADD YOUR APP ID HERE',
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// 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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('login-button').style.display = 'none';
document.getElementById('logout-button').style.display = 'block';
document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!';
});
}
</script>
</body>
</html>
I am testing out some basic stuff and this is confusing.
Parse JavaScript SDK v1.9.0:
<script src="parse.min.js"></script>
<script>
Parse.initialize("KEY");
Parse.serverURL = 'URL'
</script>
Connect to Facebook:
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'ID',
xfbml : true,
version : 'v2.7'
});
};
(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'));
Get the current user:
var user = Parse.User.current();
All fine up to this point. I can read and display from user.
When I try to update the user:
user.set("name","test");
user.save();
RangeError: Maximum call stack size exceeded.
I checked for recursion. This is only being called one time. No idea why this error would be thrown.
EDIT: To fix syntax. Error still exists.
EDIT 2: I get the same error if I try to update the currentUser or if I set a pointer of another object to the currentUser. Example:
The following creates a new InterestObject just fine, unless I set the user column as a pointer to the currentUser. Then I get the same error.
var currentUser = Parse.User.current();
var InterestObject = Parse.Object.extend("CadetsInterest");
var intObj = new InterestObject();
intObj.save({
user: currentUser,
cadets: [checkCadets state],
cadets2: [checkCadets2 state],
cwg: [checkCWG state],
question: [txtQuestion stringValue]
}).then(function(object) {
[viewSuccess setHidden: NO];
[viewInterest setHidden: YES];
});
i think the syntax in your code should be:
user.set("name","test");
and in your case you wrote:
user.set("name"),"test"
UPDATE
From the code that you provided i don't see any logIn call in order to login with facebook.
I did some side project and managed to do it. What i did is the following:
Go to https://developers.facebook.com
Create facebook app of type Web
In your facebook app URL put your server URL (in my case i did it on my localhost so i put the URL where my app is hosted)
Go to your parse app and write put the following code:
<!doctype html>
<head>
<meta charset="utf-8">
<title>My Parse App</title>
<meta name="description" content="My Parse App">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-latest.js"></script>
</head>
<body>
<div id="main">
<h1>You're ready to use Parse!</h1>
<p>Read the documentation and start building your JavaScript app:</p>
<ul>
<li>Parse JavaScript Guide
</li>
<li>Parse JavaScript API Documentation
</li>
</ul>
<div style="display:none" class="error">
Looks like there was a problem saving the test object. Make sure you've set your application ID and javascript key correctly in the call to <code>Parse.initialize</code> in this file.
</div>
<div style="display:none" class="success">
<p>We've also just created your first object using the following code:</p>
<code>
var TestObject = Parse.Object.extend("TestObject");<br/>
var testObject = new TestObject();<br/>
testObject.save({foo: "bar"});
</code>
</div>
</div>
<script type="text/javascript">
Parse.initialize("{PARSE_APP_ID}");
Parse.serverURL = '{PARSE_SERVER_URL}'
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId: '{YOUR_FB_APP_ID}',
xfbml: true,
version: 'v2.7'
});
};
(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'));
setTimeout(function() {
Parse.FacebookUtils.logIn(null, {
success: function(user) {
user.set("name", "test");
user.save();
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
}, 2000);
</script>
</body>
</html>
In this code i do exactly the same steps that you did but then i call to Parse.FacebookUtils.logIn. I am doing it after 2 seconds just to make sure that Parse.FacebookUtils.init was executed (it's better to do inside a callback but for testing purposed i did it like that).
then after i log in with my facebook account i get the user inside the success block, update his name and save it again.
then in my parse-dashboard i see the following:
Please also make sure that your current user is logged our before doing it because maybe there is a chance that you have an active session.
in order to do it simply call to
FB.User.logOut();
So i'm curious to know how to write some code to make the Facebook "Likes" appear on the users timeline, activity feed and in their "Liked pages section". As of today im using the following code:
<meta property="fb:app_id" content="APP_ID" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://MY_URL.SE/" />
<meta property="og:image" content="http://MY_URL.SE/med/fbLike.png" />
<meta property="og:title" content="SITE_TITLE" />
<meta property="og:site_name" content="SITE_NAME" />
<meta property="og:description" content="DESCRIPTION" />
And the javascript for the Facebook Like button:
var fbAppId = 'APP_ID';
var objectToLike = 'https://MY_URL.SE';
window.fbAsyncInit = function() {
FB.init({
appId : APP_ID,
status : true,
cookie : 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/sv_SE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function postLike() {
FB.api(
'https://graph.facebook.com/me/og.likes',
'post',
{ object: objectToLike,
privacy: {'value': 'SELF'} },
function(response) {
if (!response) {
alert('Error occurred.');
} else if (response.error) {
document.getElementById('result').innerHTML = 'Error: ' + response.error.message;
} else {
document.getElementById('result').innerHTML =
'<a href=\"https://www.facebook.com/me/activity/' + response.id + '\" />';
}
}
);
}
The like counter is increasing/decreasing as intended but nothing is being displayed on Facebook. The debugger tool finds all the OG objects and doesn't report any errors. The app is live and sandbox mode is deactivated, the Feed Dialog is working as intended (using the same app).
So why isn't it sharing the likes on the timeline/activity feed? Did i miss something?
have you tried going to your facebook profile and clicking on the "activity log" It lists all your activity whether its shared on your timeline or not. I've found on a site I'm currently working on that the activity is shown there and in order to get it on my timeline I have to select that from the drop down next to the post in the activity log.
Facebook API's FB object just seems to go null after init. This is the code I'm using, it's quite simple. The problem is that it says my "/me" response is undefined. I'm logged in, just double checked, so this is not the case. I already gave it permission to use my data.
Why is my "/me" responce undefined?
Also, is there a way I can move my code:
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
testAPI();
Into a separate .js file (with the code wrapped in a function), and have it load when function gets called inside window.fbAsyncInit? Cause every way I've tried to do that resulted in failure.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FB-Stuff</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[my code]', // App ID
channelUrl : '//[my channel]', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
testAPI();
};
// Load the SDK Asynchronously
(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));
</script>
</body>
</html>
edit-------------------------------------------------------
Now I'm not getting any function calls/error messages at all. This is the new code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FB-Stuff</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mycode.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxx', // App ID
channelUrl : '//xxx/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
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
facebookInit();
}
});
};
// Load the SDK Asynchronously
(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));
</script>
</body>
</html>
And inside mycode.js is:
function facebookInit(){
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
}
You need to defer the call to FB.api until after the status has been resolved - use FB.getLoginStatus or listen to one of the events for this.
Not sure what you mean with moving the code - you can put this code anywhere as long as it is loaded before the JS SDK.
Here is my code
<html>
<head>
<head>
<title></title>
<script type="text/javascript" charset="utf-8" src="cordova-1.6.0.js"></script>
<script type="text/javascript">
function go()
{
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
}
</script>
<body>
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '', // 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
oauth : true //oauth v2.0
});
};
// 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));
</script>
<input onclick="go();" type='submit' id='login-button' value='Login' name='login' >
</body>
</html>
Basically you click the button and it should show you a login pop-up. It works when I try in a normal browser but when I try in the iPhone simulator nothing happens. Iv also set the iPhone browser to allow pop-ups. what am I doing wrong?
I got it working using the phonegap plugin called Childbrowser :)