Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code sample added #147

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Code sample added #147

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 88 additions & 2 deletions _posts/2013-08-01-facebook-login.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,97 @@ These three statuses correspond to what call to Kissmetrics you should make:

* `connected`: [automatically log in][auto-login] and record the ***Logged In*** event upon success.
* `not_authorized`: prompt the visitor to login with `FB.login()` and record the ***Signed Up*** event upon success.
* `unknown`: prompt the visitor to login with `FB.login()`. Upon successful login, fetch more info (with `FB.api` perhaps) and record ***Logged In*** *or* ***Signed Up*** based on the results.
* `unknown`: prompt the visitor to login with `FB.login()` and assume a sign up (though they might have signed out of your app, and want to sign in again).

## Code Example

We have not personally worked with the Facebook SDK, so we don't have a working code example to provide. Please contribute below if you have recommendations!
When asking for information from the user via Facebook login, you get their email and basic profile information by default. If you want anymore information you need to have your app reviewed.

[Public profile reference](https://developers.facebook.com/docs/facebook-login/permissions#reference-public_profile)

Code example modified from [Facebook](https://developers.facebook.com/docs/facebook-login/web):

```html
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
//This is called when FB knows who a user is
function statusChangeCallback(response) {
if (response.status === 'connected') {
// Logged into your app and Facebook.
fblogin();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
} else {
// The person is not logged into Facebook
}
}

//Boilerplate...
var buttonClicked = false;
function checkLoginState() {
buttonClicked = true;
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}

window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
cookie : true,
xfbml : true,
version : 'v2.5'
});

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'));

//Grab the data we need, and identify the user
function fblogin() {
FB.api('/me', {fields: 'id,name,email,gender,locale,age_range,picture'}, function(response) {
//Track login
if(buttonClicked){
_kmq.push(['record', 'Signed In' ,{type : 'facebook'}]);
}else{
_kmq.push(['record', 'Logged In' ,{type : 'facebook'}]);
}

//Identify user by email
//NB: a user might have signed in with a mobile no, or declined to give you their email
//You might want to use their FB UUID instead
_kmq.push(['identify', response.email]);
//_kmq.push(['identify', response.id]);

//Save properties to user
_kmq.push(['set', {'name' : response.name}]);
_kmq.push(['set', {'gender' : response.gender}]);
});
}
</script>
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>
</body>
</html>
```

This code tracks a user logging in / signing up with Facebook, and then identifies them and sets properties to them.

[fb-js-sdk]: https://developers.facebook.com/docs/reference/javascript/
[login-flow]: https://developers.facebook.com/docs/facebook-login/login-flow-for-web/
Expand Down