I've created a fake facebook page (entertainment page).
On the left of the attached image, I made a first post manually (the one below with the
big photo), and one programmatically (the one above with the small photo).
The code I used for the small photo looks like this:
FB.api(
'https://graph.facebook.com/[myAppId]/feed',
'post',
{
message: 'this is a grumpy cat',
description: "This cat has been lost for decades now, please call at 654321486",
picture: "http://laughingsquid.com/wp-content/uploads/grumpy-cat.jpg"
},
function (response) {
if (!response) {
alert('Error occurred.');
} else if (response.error) {
document.getElementById('result').innerHTML =
'Error: ' + response.error.message;
} else {
document.getElementById('result').innerHTML =
'<a href=\"https://www.facebook.com/' + response.id + '\">' +
'Story created. ID is ' +
response.id + '</a>';
}
}
);
But I'm not happy with it:
the application I'm working on make a list of lost animals,
so it would be much greater with big photos.
I didn't see any example of how to do it on the facebook developer pages.
I believe this is possible, but I've not found it out yet.
Have you guys already gone through this problem before?
There are two things that you will need to do to achieve this. I'm not 100% sure if the JS-SDK will allow you to do the second step, but you can use a server side SDK if needed.
The application will need to request the manage_pages and publish_stream permission. Then make a call to /{user-id}/accounts which will return all pages the authorized user manages, and their respective page access tokens.
Store in a variable the page access token returned for the page you want to post to. Set the photo you want to upload as the source parameter (must be local to the server running the code) and make a POST request to /{page_id}/photos using the page access token (NOT the application access token!).
So it would be along the lines of:
FB.api('/{page_id}/photos', 'post', { source: 'path/to/image.jpg', access_token: {page_access_token}, message: 'hey heres a photo' }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
I believe the application also needs to specify fileUpload as true when initializing.
I would be happy to share my PHP code to do this if it would be helpful to you.
Finally, I did it!
I'm posting the solution, thanks to cdbconcepts for pointing me in the right direction.
After reading the doc again:
https://developers.facebook.com/docs/reference/api/photo/
They say that:
"You can also publish a photo by providing a url param with the photo's URL."
The url doesn't have to be on the same server, as shown in the example below,
and it works with the js-sdk.
So here is the final code that works for me:
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>
var appId = 'Replace with your appId';
window.fbAsyncInit = function () {
FB.init({
appId: appId,
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
var options = {
scope: 'manage_pages, publish_stream'
};
FB.Event.subscribe('auth.authResponseChange', function (response) {
if (response.status === 'connected') {
testAPI();
} else if (response.status === 'not_authorized') {
FB.login(function () {
}, options);
} else {
FB.login(function () {
}, options);
}
});
};
// Load the SDK asynchronously
(function (d) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function (response) {
console.log('Good to see you, ' + response.name + '.');
});
}
function error(msg) {
document.getElementById('result').innerHTML = 'Error: ' + msg;
}
function postApi() {
var myPageID = '484364788345193';
var targetPageName = 'Entertainment page of ling';
var pathToImg = 'http://laughingsquid.com/wp-content/uploads/grumpy-cat.jpg';
var accessToken = null;
FB.api(
'https://graph.facebook.com/me/accounts',
function (response) {
if (!response || response.error) {
console.log(response);
error('Error occured');
} else {
console.log(response);
for (var i in response.data) {
if (targetPageName === response.data[i].name) {
accessToken = response.data[i].access_token;
}
}
if (accessToken) {
FB.api(
'https://graph.facebook.com/' + myPageID + '/photos',
'post',
{
url: pathToImg,
access_token: accessToken,
message: "Tadaam"
},
function (response) {
if (!response || response.error) {
console.log(response);
error('Error occured');
} else {
console.log(response);
alert("PostId: " + response.id);
}
}
);
}
else {
error("Page not found in the accounts: " + targetPageName);
}
}
}
);
}
function logout() {
FB.logout();
}
$(document).ready(function () {
$("#logout").click(function () {
logout();
});
$("#post1").click(function () {
postApi();
});
});
</script>
<!--
Below we include the Login Button social plugin. This button uses the JavaScript SDK to
present a graphical Login button that triggers the FB.login() function when clicked. -->
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
<button id="logout">Logout</button>
<button id="post1">post something</button>
<div id="result"></div>
</body>
</html>
Related
I'm trying to get some basic information using Facebook api, but so far I only get the user's name and id. As in { name: "Juan Fuentes", id: "123456" }
I need to get mor einformation, like email, first name, last name and birthday
This is my js code
function facebookLogin() {
FB.login(function(response) {
var token = response.authResponse.accessToken;
var uid = response.authResponse.userID;
if (response.authResponse) {
FB.api('/me', 'get', { access_token: token }, function(response) {
console.log(response);
});
FB.api('/'+uid, 'get', { access_token: token }, function(response) {
console.log(response);
});
}
},
{ scope: 'public_profile' }
);
}
And this is the button that activates it
<a id="fb-login" href="#" onclick="facebookLogin()"></a>
You need to manually specify each field since Graph API v2.4:
https://developers.facebook.com/docs/apps/changelog#v2_4
https://developers.facebook.com/docs/javascript/reference/FB.api
Declarative Fields
To try to improve performance on mobile networks, Nodes and Edges in v2.4 requires that you explicitly request the field(s) you need for your GET requests. For example, GET /v2.4/me/feed no longer includes likes and comments by default, but GET /v2.4/me/feed?fields=comments,likes will return the data. For more details see the docs on how to request specific fields.
E.g.
FB.api('/me', 'get', { access_token: token, fields: 'id,name,gender' }, function(response) {
console.log(response);
});
It's also possible to use this syntax for data from public_profile scope (tested in Graph API v2.9):
FB.api('/me?fields=birthday,link,gender,age_range', function(response) {
console.log(response);
});
You can test the possible values online in Graph API Explorer, just click "Get Token" button:
https://developers.facebook.com/tools/explorer/?method=GET&path=me%3Ffields%3Dbirthday%2Clink%2Cgender%2Cage_range&version=v2.9
Here is the complete Script:
jQuery(document).ready(function () {
openLoginPopup();
})
function openLoginPopup() {
FB.getLoginStatus(function (response) {
if (response.status == 'connected') {
getCurrentUserInfo(response);
} else {
FB.login(function (response) {
if (response.authResponse) {
getCurrentUserInfo(response);
} else {
console.log('Auth cancelled.');
}
}, {scope: 'email'});
}
});
}
function getCurrentUserInfo() {
FB.api('/me?fields=id,email,first_name,last_name,name', function (userInfo) {
console.log(userInfo.name + ': ' + userInfo.email);
});
}
window.fbAsyncInit = function () {
FB.init({
// appId: 'xxxxxxxxxxxxxxxxxxxxx', //livemode
appId: 'xxxxxxxxxxxx', //testmode
cookie: true, // Enable cookies to allow the server to access the session.
xfbml: true, // Parse social plugins on this webpage.
version: 'v4.0' // Use this Graph API version for this call.
});
};
(function (d, s, id) { // Load the SDK asynchronously
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'));
Thanks.
Note that email is not always returned by a call to the me api with email as field, even if scope email was requested and granted, if e.g. the user signed up with a phone number:
https://developers.facebook.com/docs/facebook-login/permissions#reference-email
I'm trying to get some basic information using Facebook api, but so far I only get the user's name and id. As in { name: "Juan Fuentes", id: "123456" }
I need to get mor einformation, like email, first name, last name and birthday
This is my js code
function facebookLogin() {
FB.login(function(response) {
var token = response.authResponse.accessToken;
var uid = response.authResponse.userID;
if (response.authResponse) {
FB.api('/me', 'get', { access_token: token }, function(response) {
console.log(response);
});
FB.api('/'+uid, 'get', { access_token: token }, function(response) {
console.log(response);
});
}
},
{ scope: 'public_profile' }
);
}
And this is the button that activates it
<a id="fb-login" href="#" onclick="facebookLogin()"></a>
You need to manually specify each field since Graph API v2.4:
https://developers.facebook.com/docs/apps/changelog#v2_4
https://developers.facebook.com/docs/javascript/reference/FB.api
Declarative Fields
To try to improve performance on mobile networks, Nodes and Edges in v2.4 requires that you explicitly request the field(s) you need for your GET requests. For example, GET /v2.4/me/feed no longer includes likes and comments by default, but GET /v2.4/me/feed?fields=comments,likes will return the data. For more details see the docs on how to request specific fields.
E.g.
FB.api('/me', 'get', { access_token: token, fields: 'id,name,gender' }, function(response) {
console.log(response);
});
It's also possible to use this syntax for data from public_profile scope (tested in Graph API v2.9):
FB.api('/me?fields=birthday,link,gender,age_range', function(response) {
console.log(response);
});
You can test the possible values online in Graph API Explorer, just click "Get Token" button:
https://developers.facebook.com/tools/explorer/?method=GET&path=me%3Ffields%3Dbirthday%2Clink%2Cgender%2Cage_range&version=v2.9
Here is the complete Script:
jQuery(document).ready(function () {
openLoginPopup();
})
function openLoginPopup() {
FB.getLoginStatus(function (response) {
if (response.status == 'connected') {
getCurrentUserInfo(response);
} else {
FB.login(function (response) {
if (response.authResponse) {
getCurrentUserInfo(response);
} else {
console.log('Auth cancelled.');
}
}, {scope: 'email'});
}
});
}
function getCurrentUserInfo() {
FB.api('/me?fields=id,email,first_name,last_name,name', function (userInfo) {
console.log(userInfo.name + ': ' + userInfo.email);
});
}
window.fbAsyncInit = function () {
FB.init({
// appId: 'xxxxxxxxxxxxxxxxxxxxx', //livemode
appId: 'xxxxxxxxxxxx', //testmode
cookie: true, // Enable cookies to allow the server to access the session.
xfbml: true, // Parse social plugins on this webpage.
version: 'v4.0' // Use this Graph API version for this call.
});
};
(function (d, s, id) { // Load the SDK asynchronously
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'));
Thanks.
Note that email is not always returned by a call to the me api with email as field, even if scope email was requested and granted, if e.g. the user signed up with a phone number:
https://developers.facebook.com/docs/facebook-login/permissions#reference-email
I am working for the first time with facebook API. From there documentation I found we can fetch name as below
console.log(response.name);
But How can I can also fetch email and fbid ?
Thanks,
Enamul
<?php ?>
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'f', // App ID
channelUrl : '//localhost/practices/phpTest/fblogin/login.php/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// connected
} else if (response.status === 'not_authorized') {
// not_authorized
login();
} else {
// not_logged_in
login();
}
});
// Additional init code here
};
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
});
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<?php ?>
In addition to adding scope="email" to the button, you need to specify which fields to return.
<fb:login-button scope="public_profile, email" onlogin="checkLoginState();" data-auto-logout-link="true" data-size="large">
function testAPI() {
FB.api('/me', {fields: 'name, email'}, function(response) {
console.log( response );
console.log( response.email );
});
}
For full code structure take a look at the facebook documentation.
The same way you access name. i.e
response.email and response.id
but to fetch email address you must have the permission to access it.
Add scope="email" to your FB Login Button.
[EDIT]
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
testAPI();
} else {
// cancelled
}
}, { scope: 'email' });
}
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.' + ' Email: ' + response.email + ' Facebook ID: ' + response.id);
});
}
Here's a good tutorial for beginners: http://www.loginworks.com/technical-blogs/404-working-with-facebook-javascript-sdk
If anyone else is having trouble with retrieving users' email specifically, please note that Facebook won't allow you to access users' email while your app is still listed as "in-development." After switching to a "in-production" in your Facebook Developer Dashboard, email should become available. Hope this helps someone out there, as I wasted a lot of time tonight struggling to retrieve users' email.
Email: "Not available to all users because your app is not live"
change code to following
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
FB.api('/me?fields=name,email', function(response) {
console.log('Good to see you, '+response.name + '---'+response.email);
});
I have write this code but it does work only if I am already logged in facebook, otherwise appears a popup window that require me email and password to login in facebook.
This is the code:
window.fbAsyncInit = function () {
FB.init({
appId: 'xxx',
frictionlessRequests: true,
status: true,
cookie: true,
xfbml: true,
oauth: true
});
function update(response) {
if (response.authResponse) {
FB.api('/me', function (info) {
login(response, info);
});
} else {
}
}
FB.getLoginStatus(update);
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
function login(response, info) {
if (response.authResponse) {
publish();
}
}
function publish() {
var publish = {
method: 'feed',
access_token: '<?php echo $token; ?>',
message: 'How are you ?',
name: 'hi friends',
caption: 'yuhuuuuuuuu',
description: (' '),
link: 'http://www.example.com',
picture: 'http://cdn1.hark.com/images/000/004/514/4514/original.jpg',
actions: [{
name: 'Hello',
link: 'http://www.example.com/'
}],
user_message_prompt: 'Share on facebook'
};
FB.ui(
publish, function (response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
});
}
In your update method, in the blank else you should call the FB.login method:
Calling FB.login prompts the user to authenticate your application
using the OAuth Dialog.
However, you can't just do this:
function update(response) {
if (response.authResponse) {
FB.api('/me', function (info) {
login(response, info);
});
} else {
FB.login(function(response) {
if (response.authResponse) {
console.log("user is logged in!", response.authResponse);
}
});
}
}
Since as it states in the documentation:
Calling FB.login results in the JS SDK attempting to open a popup
window. As such, this method should only be called after a user click
event, otherwise the popup window will be blocked by most browsers.
You'll have to show a user a button or something that tells him to click in order to login, and then you can call the FB.login method.
I am using JavaScript API to create my app for Facebook. The problem is, it's returning
email = undefined.
I don't know why? And if I use Facebook login/logout button on my app then the alert shows correct email id of the user but I don't want to do that.
What am I missing?
Here is my code:
<p><fb:login-button autologoutlink="true" perms="user_about_me,email"></fb:login-button></p>
<script>
window.fbAsyncInit = function () {
FB.init({ appId: '250180631699888', status: true, cookie: true,
xfbml: true
});
FB.getLoginStatus(function (response) {
if (response.session) {
greet();
}
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
function greet() {
FB.api('/me', function (response) {
alert('Welcome, ' + response.name + "!");
alert('Your email id is : '+ response.email);
});
}
</script>
// https://developers.facebook.com/docs/javascript/reference/FB.api/
// v2.4
FB.api('/me', { locale: 'en_US', fields: 'name, email' },
function(response) {
console.log(response.email);
}
);
here is example how i retrieve user name and e-mail:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
$(function() {
FB.init({
appId : 'APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
getCurrentUserInfo(response)
} else {
FB.login(function(response) {
if (response.authResponse){
getCurrentUserInfo(response)
} else {
console.log('Auth cancelled.')
}
}, { scope: 'email' });
}
});
function getCurrentUserInfo() {
FB.api('/me', function(userInfo) {
console.log(userInfo.name + ': ' + userInfo.email);
});
}
});
</script>
According to the latest info on the facebook page you should use 'scope' instead of perms.
https://developers.facebook.com/docs/reference/javascript/FB.login/
If you visit
https://developers.facebook.com/tools/console/
and use the fb-api -> user-info example as a starting point, then logout and back in again, it should ask you for email perms and you can see your email being printed. It is done using response.email as you mention in your post.
<button id="fb-login">Login & Permissions</button>
<script>
document.getElementById('fb-login').onclick = function() {
var cb = function(response) {
Log.info('FB.login callback', response);
if (response.status === 'connected') {
Log.info('User logged in');
} else {
Log.info('User is logged out');
}
};
FB.login(cb, { scope: 'email' });
};
</script>
Use this to for extra permission
for more details visit :
https://www.fbrell.com/examples/
In this code i have get user data form facebook and store into my database using ajax
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me?fields=email,name,first_name,last_name', function(response)
{
FB.api(
"/"+response.id+"/picture?height=100",
function (responses) {
//console.log(responses.data.url)
response['profile_pic']=responses.data.url;
$.ajax({
type:"POST",
url:'<?php echo base_url(); ?>'+'home/facebook_get_signup',
data:response,
success:function(res)
{
if(res=='success')
{
window.location='<?php echo base_url(); ?>';
}
if(res=='exists')
{
window.location='<?php echo base_url(); ?>';
}
}
});
}
)
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
// handle the response
}, {scope: 'email,user_likes'});
There are a couple of things wrong with your solution. First of all you are using the old authentication scheme. You should use the new one described here :
https://developers.facebook.com/docs/reference/javascript/
You need to add the oauth:true to your init function, and make sure that your getLoginStatus looks for the new type of response.
When that is said you need to make sure you have the right permissions to see the users e-mail. You can see the required permissions here:
http://developers.facebook.com/docs/reference/api/user/
You get those by using the FB.login function as described by TommyBs in another answer.
Once you have those options you can use the FB.api function to get the e-mail.