I'm trying to initialize Facebook's graph API in my angularjs app but having issues getting it started.
The angularjs framework page on Facebook developers site is very short and quite uninformative to an angularjs beginner like me, what I've got so far I've pieced together through the javascript SDK quick start and various posts found on here.
The end goal is to GET posts from several of my public pages and display them as a feed on my webpage. I will display the feed info in individual cards that when clicked will take the user to that post on Facebook. So no actual changes will be made by the user on my webpage.
Most information I've read regarding this has started with having the user login by clicking a button, but is that necessary for my needs?
I tested it locally and I received the error regarding it having to be HTTPS, so I've now put it on a server with HTTPS, but I'm not getting any responses now.
Can you see the problem?
A few more questions:
Is a user required to log in just to view public Facebook posts?
Is the app ID enough or do I need to include my token somewhere?
Any help is appreciated! Thanks in advance.
controller.js
angular.module('myApp')
.controller('FacebookFeedCtrl', FacebookFeedCtrl)
function FacebookFeedCtrl($scope) {
window.fbAsyncInit = function() {
FB.init({
appId : '111111111111111',
xfbml : true,
version : 'v9.0'
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
console.log(response);
});
FB.api('/me','GET',{"fields":"id,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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$scope.getMyLastName = function() {
facebookService.getMyLastName()
.then(function(response) {
$scope.last_name = response.last_name;
console.log("this works")
}
);
};
}
service.js
angular.module('myApp')
.factory('facebookService', function($q) {
return {
getMyLastName: function() {
var deferred = $q.defer();
FB.api('/me', {
fields: 'last_name'
}, function(response) {
if (!response || response.error) {
deferred.reject('Error occured');
} else {
deferred.resolve(response);
}
});
return deferred.promise;
}
}
});
html
<div ng-controller="FacebookFeedCtrl">
<h1>testing: {{last_name}}</h1>
</div>