Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get User info using JS SDK after they login with Facebook

I have this in my header:

<script src="http://connect.facebook.net/en_US/all.js"></script>

Then I have the FB login button code like this:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=myAppId&amp;xfbml=1">
</script><fb:login-button show-faces="false" perms="user_hometown,user_about_me,email,user_address"
autologoutlink="true" width="200" max-rows="1">
</fb:login-button>

Then after the user logs in with the FB button, how do I make a JS call to get their name, email, photo, etc?

I also found some code like this, but not sure where this is used:

<script>
  FB.init({
    appId  : 'myAppId',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    channelURL : 'http://www.comehike.com/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
  });
</script>

Do I need the code right above?

Thanks!!

like image 356
Genadinik Avatar asked Aug 02 '11 17:08

Genadinik


People also ask

What SDK does Facebook use?

To learn more about using Facebook development tools, see App Development. The current version of the Facebook SDK for Android is version 15.0. 0 and requires the Android API 15. Code and samples for the Facebook SDK for Android are available on GitHub.

What is Facebook JavaScript SDK?

The Facebook SDK for JavaScript provides a rich set of client-side functionality that: Enables you to use the Like Button and other Social Plugins on your site. Enables you to use Facebook Login to lower the barrier for people to sign up on your site. Makes it easy to call into Facebook's Graph API.


1 Answers

<html>
<head> ... </head>
<body>
    <div id="fb-root"></div>

    <fb:login-button show-faces="false" perms="user_hometown,user_about_me,email,user_address" autologoutlink="true" width="200" max-rows="1"></fb:login-button>


    <!-- put this before the end body tag -->
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
      FB.init({
        appId  : 'myAppId',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true, // parse XFBML
        channelURL : 'http://www.comehike.com/channel.html', // channel.html file
        oauth  : true // enable OAuth 2.0
      });
    </script>
</body>
</html>

To get logged users data:

FB.api('/me', function(response) {
  console.log(response);
});

If all went well response should be a JSON object containing the user data you have permission to view.

The users image can be gotten from:

http://graph.facebook.com/FACEBOOK_USER_ID/picture

You can specify the size you want with the type argument

  • square - 50x50
  • small - 50 pixels wide, variable height
  • normal - 100 pixels wide, variable height
  • large - about 200 pixels wide, variable height

For example:

http://graph.facebook.com/FACEBOOK_USER_ID/picture?type=large
like image 146
jBit Avatar answered Oct 19 '22 09:10

jBit