In this module, you add Facebook integration to your application. You allow users to login with Facebook, view their profile, and share their favorite sessions on their feed.
In this tutorial, you use OpenFB to perform the integration. OpenFB is a micro-library that lets you integrate your JavaScript applications with Facebook. It works for both browser-based and Cordova/PhoneGap apps. It also doesn't have any dependency: You don't need the Facebook plugin when running in Cordova. You also don't need the Facebook SDK. More information here.
Login to Facebook
Access https://developers.facebook.com/apps, and click Create New App
Specify a unique Display Name and a Category, and click Create App
Click Settings in the left navigation
Click the Advanced Tab
In the Security section, add the following URLs in the Valid OAuth Redirect URIs field:
Click Save Changes
Add the openfb files to your application
In conference/www/index.html, add a script tag to include openfb.js (before app.js):
GitHub
Project<script src="lib/openfb.js"></script>
Open conference/www/js/app.js, and initialize OpenFB in the config() function (on the first line, before $stateProvider). Replace YOUR_FB_APP_ID with the App Id of your Facebook application.
openFB.init({appId: 'YOUR_FB_APP_ID'});
Open login.html in the www/conference/templates directory. Add a Login with Facebook button right after the existing Log In button:
<label class="item">
<button class="button button-block button-positive" ng-click="fbLogin()">
Login with Facebook
</button>
</label>
Notice that fbLogin() is called on ng-click. You define the fbLogin() function in the next step.
Open conference/www/js/controllers.js, and add the fbLogin function in the AppCtrl controller (right after the doLogin function):
$scope.fbLogin = function() {
openFB.login(
function(response) {
if (response.status === 'connected') {
console.log('Facebook login succeeded');
$scope.closeLogin();
} else {
alert('Facebook login failed');
}
},
{scope: 'email,publish_actions'});
}
Test the application:
The next time you login, you won't be asked for your credentials again since you already have a valid token. To test the login process again, simply logout from Facebook. The OpenFB library has additional methods to logout and revoke permissions that are beyond the scope of this tutorial.
Create a template for the user profile view. In the conference/www/templates directory, create a new file named profile.html and implement it as follows:
<ion-view title="Profile">
<ion-content class="has-header">
<div class="list card">
<div class="item">
<h2>{{user.name}}</h2>
<p>{{user.city}}</p>
</div>
<div class="item item-body">
<img src="http://graph.facebook.com/{{user.id}}/picture?width=270&height=270"/>
</div>
</div>
</ion-content>
</ion-view>
Create a controller. Open controllers.js, and add the following controller:
.controller('ProfileCtrl', function($scope) {
openFB.api({
path: '/me',
params: {fields: 'id,name'},
success: function(user) {
$scope.$apply(function() {
$scope.user = user;
});
},
error: function(error) {
alert('Facebook error: ' + error.error_description);
}
});
});
Open app.js, and add the following route:
.state('app.profile', {
url: "/profile",
views: {
'menuContent' :{
templateUrl: "templates/profile.html",
controller: "ProfileCtrl"
}
}
})
Open www/templates/menu.html, and add the following menu item:
<ion-item nav-clear menu-close href="#/app/profile">
Profile
</ion-item>
Test the application:
Open controllers.js, and add a share function to the SessionCtrl controller:
$scope.share = function(event) {
openFB.api({
method: 'POST',
path: '/me/feed',
params: {
message: "I'll be attending: '" + $scope.session.title + "' by " +
$scope.session.speaker
},
success: function () {
alert('The session was shared on Facebook');
},
error: function () {
alert('An error occurred while sharing this session on Facebook');
}
});
};
Open session.html in the templates directory and add an ng-click handler to the Share button: invoke the share function:
<a class="tab-item" ng-click="share()">
<i class="icon ion-share"></i>
Share
</a>
Test the application:
Build your application for a specific platform following the steps described in module 8:
ionic build ios
and/or
ionic build android
Run and test your application on an iOS or Android device or emulator
*TODO - This is the version from the basic Ionic-Tutorial, needs to be updated for this tutorial *