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.
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?
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>
Related
I have crated app on this link https://developers.facebook.com/ My app version is v3.1. I have use facebook api only scripting.
I want to check current user is like facebook page or not,If user is not like facebook page then request to like page,if user is liked then content are showing.
window.fbAsyncInit = function () {
FB.init({
appId:'xxx',
xfbml: true,
cookie: true,
status: true,
secret: 'xxx',
version: 'v3.1'
});
FB.Event.subscribe('edge.create',
function (href, widget) {
//alert('Ti piace ' + href);
//document.getElementById('fb-like').style.display = "none";
//var x = document.getElementsByTagName("button")[0].getAttribute("title");
// alert(x);
});
FB.api({ method: 'pages.isFan', page_id:'xxx' }, function (resp) {
console.log(resp);
if (resp) {
alert('You like it.');
} else {
alert("You don't like it.");
}
});
};
(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'));
Error are occurred like this. I am tired please help me this problems.
erro_code:"104" erro_msg:"Incorrect signature(104),request_args:Arrar(7),error_subcode: "0"
Gating content behind likes is not allowed since many years.
The edge.create event has been removed. It would only allow to detect new likes anyway, not existing ones.
"pages.isFan" is very old, it would be /me/likes instead to get the Pages a user likes. And that only works if the user authorizes your App with the user_likes permission. You will not get that permission approved in the review process for like gating or incentivizing users to like your Page in any way.
TL;DR: Not possible and not allowed.
I'm trying to get the user's email after they press Continue with Facebook on my site. I've looked on Stackoverflow and through the Facebook Developer documentation and cannot see a reason why what I am trying isn't working.
JAVASCRIPT
window.fbAsyncInit = function() {
FB.init({
appId : '1882306058687148',
cookie : true,
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function(response) {
statusChangeCallback(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
console.log(response);
statusChangeCallback(response)
});
}
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
runAPI();
}
}
function runAPI() {
FB.api('/me', { locale: 'en_US', fields: 'name, email' }, function(response) {
console.log(response);
document.getElementById('name').value = response.name;
document.getElementById('email').value = response.email;
document.getElementById('fb-login').style.display = 'none'
});
}
** HTML **
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
What's confusing me the most though is that this IS pulling the name through and that is definitely working.
You will only get an email address back if the user has a verified one set in their profile.
And even then, there are apparently some edge cases where privacy settings can still make it not return one at all. Of course, they might not have one set at all, if they registered using only their mobile. If your app needs and email address, then you should implement an additional step for users to input one manually. (Verification is your responsibility as well in that case.)
I want to add facebook login to my website. I async load it, and when I check that the person is not logged into my website through facebook I call a function to register them, but I get an error saying my function does not exist... facebook is in an html file, and the method I'm calling (FaceRegister()) is in a javascript file with the same name. I presume this is because of the loading order? Any ideas how to solve this?
Code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '217518691989396',
xfbml : true,
version : 'v2.8'
}) ;
FB.AppEvents.logPageView();
$(document).trigger('fbload');
};
(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'));
$(document).on(
'fbload',
function(){
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else {
// The person is not logged into your app or we are unable to tell.
faceRegister();
}
}
I want to use Facebook Login on my project. When the Facebook button is clicked I call checkLoginState function bu I get an error. I put angular js script file and I used ng-app. How can I solve this problem?
The error code is
Uncaught ReferenceError: $scope is not defined
HTML Code
<div class="text-center">{{userName}}</div>
<fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="$scope.checkLoginState();">Sign İn</fb:login-button>
Script Code
window.fbAsyncInit = function() {
FB.init({
appId : '391188****',
cookie : true, // enable cookies to allow the server to access
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.5
});
FB.getLoginStatus(function(response) {
$scope.statusChangeCallback(response);
});
};
var app = angular.module('myapp', []);
app.controller('ctrl', ['$scope','$http',function($scope,$http){
(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_EN/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$scope.checkLoginState=function() {
FB.getLoginStatus(function(response) {
$scope.statusChangeCallback(response);
});
}
$scope.statusChangeCallback=function(response) {
if(accessToken){
var accessToken=response.authResponse.accessToken;
}
if (response.status === 'connected') {
$scope.send(accessToken);
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = '';
} else{
document.getElementById('status').innerHTML = '';
}
}
$scope.send = function(accessToken){
$http({
method : 'POST',
url : 'https://example.com',
data:{
'smType':type,
'smID':accessToken
},
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data) {
if (data.errors) {
console.log("An error occurred");
} else {
$scope.userName=data.name;
}
});
};
}]);
First of all, if you want to call checkLoginState from your html, it has to be inside your controller and attached to $scope:
$scope.checkLoginState=function(){...}
Second of all, you can't use $scope in statusChangeCallback without passing it in. So either put statusChangeCallback inside your controller or pass in $scope as an argument.
Third of all, make sure you are injected $scope into your controller.
app.controller('ctrl',['$scope','$http',function($scope,$http){...}])
when Try to login Facebook Canvas App only Developer can't login to App Show following Error
Invalid Scopes: read_friendlists. This message is only shown to
developers. Users of your app will ignore these permissions if
present. Please read the documentation for valid permissions at:
https://developers.facebook.com/docs/facebook-login/permissions
I use Following code inside index.php file and bottom of the code
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo APP_ID;?>',
xfbml : true,
version : 'v2.3'
});
function onLogin(response) {
if (response.status == 'connected') {
FB.api('/me?fields=first_name', function(data) {
var welcomeBlock = document.getElementById('fb-welcome');
welcomeBlock.innerHTML = 'Hello, ' + data.first_name + '!';
});
}
}
FB.getLoginStatus(function(response) {
// Check login status on load, and if the user is
// already logged in, go directly to the welcome message.
if (response.status == 'connected') {
onLogin(response);
} else {
// Otherwise, show Login dialog first.
FB.login(function(response) {
onLogin(response);
}, {scope: 'user_friends,email,read_friendlists'});
}
});
FB.Canvas.setAutoGrow();
};
(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'));
This happen on 6th of may 2015, before that it works fine..
Check this link and check your api version.
https://developers.facebook.com/docs/facebook-login/permissions/v2.3
As per this link
"If you want to access a person's friends who also use your app, you should use the user_friends permission.
This permission will also not help you invite a person's friends to use your app. To learn more about how to invite friends to an app, please see our FAQs.
This permission also does not give the list of friends who are part of a friendlist. It only gives access to the names of the lists.
This permission was called read_friendlists before v2.3.
Review
If your app requests this permission Facebook will have to review how your app uses it."