38 Responses so far.
Leave a Comment
https://github.com/ShiyangHuang/OpenFB
https://developers.facebook.com/docs/graph-api/reference/user
Module 9: Facebook Integration
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.
Step 1: Create a Facebook application
- Login to Facebook
- Access https://developers.facebook.com/apps, and click Add New App
- Click www as the platform
- Type a name for your app and click Create New Facebook App Id
- Specify a Category, and click Create App ID
- Click My Apps in the menu and select the app you just created
- Click Settings in the left navigation
- Click the Advanced Tab
- In the OAuth Settings section, add the following URLs in the Valid OAuth redirect URIs field:
- http://localhost:8100/oauthcallback.html
- https://www.facebook.com/connect/login_success.html (for access from Cordova)
- Click Save Changes
Step 2: Add Facebook login
- Add the openfb files to your application
- Copy openfb.js from ionic-tutorial/resources to conference/www/lib.
- Copy oauthcallback.html and logoutcallback.html from ionic-tutorial/resources to conference/www.
- In conference/www/index.html, add a script tag to include openfb.js (before app.js):
<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:
- Open a browser and access http://localhost:5000
- Open the side menu and select Login
- Click the Login with Facebook button
- Enter your Facebook credentials on the Facebook login screen, and authorize the application
- Open the browser console: you should see the Facebook login succeeded message
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.
Step 3: Display the User Profile
- Create a template for the user profile view. In the conference/www/templates directory, create a new file namedprofile.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 a browser and access http://localhost:5000
- Open the side menu and select Login
- Login with Facebook
- Open the side menu and select Profile
Step 4: Publish to your feed
- 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:
- Open a browser and access http://localhost:5000
- Open the side menu and select Login
- Login with Facebook
- Open the side menu, select Sessions, and select a session in the list
- Click/Tap the Share button
- Check your feed on Facebook
Step 5: Test Facebook integration on device (optional)
- Build your application for a specific platform following the steps described in module 8:
ionic build iosand/or
ionic build android - Run and test your application on an iOS or Android device or emulator
before but after browsing through some of the post I realized it’s new to me.
Anyhow, I’m definitely happy I found it and I’ll be bookmarking and checking back
often!
Short but very accurate info… Appreciate your sharing this one.
A must read post!
as well happy to share my know-how here with mates.
me when new comments are added- checkbox and from now on whenever a comment is added I recieve 4 emails with the exact same comment.
Perhaps there is a means you can remove me from that service?
Kudos!
weblog or even a weblog from start to end.
really amazing.
large amount of work? I’ve very little understanding of
computer programming however I had been hoping to start my own blog in the near future.
Anyways, if you have any recommendations or techniques for new blog owners please share.
I know this is off topic however I simply had to ask.
Cheers!
know a few of the images aren’t loading correctly.
I’m not sure why but I think its a linking issue.
I’ve tried it in two different browsers and both show the
same outcome.
I’m not sure if this is a formatting issue or something
to do with browser compatibility but I thought I’d post to let you know.
The design look great though! Hope you get the problem fixed soon.
Cheers
He always kept chatting about this. I will forward this article to him.
Fairly certain he will have a good read. Thank you for sharing!
enjoyed reading it, you are a great author. I will always bookmark your blog and
definitely will come back in the foreseeable future.
I want to encourage one to continue your great posts, have a nice afternoon!
Please reply back as I’m attempting to create my own website and would
like to learn where you got this from or what the
theme is named. Kudos!
A handful of my blog audience have complained about my site not operating correctly in Explorer but
looks great in Safari. Do you have any ideas to help fix this
problem?
this site, and article is in fact fruitful for me, keep up posting such articles or reviews.
but I by no means found any attention-grabbing article like yours.
It’s pretty worth enough for me. In my view, if all web owners
and bloggers made just right content as you did, the web shall
be much more helpful than ever before.
We like to honor several other online websites around the web, even when they arent linked to us, by linking to them. Underneath are some webpages worth checking out.