# Thursday, August 19, 2010

Dinking around with the Facebook JavaScript SDK

With some spare time on my hands, I took at look at the improved JavaScript SDK from Facebook.

In the past, I really disliked Facebook coding because the developer experience was really hard. The documentation was wrong or obsolete, the sample code libraries rarely worked and it was really frustrating.

Now with the push towards the JavaScript SDK, things are smooth sailing! Here’s the reference: http://developers.facebook.com/docs/reference/javascript/

It’s super easy to sign in to Facebook from my external site and remove the need to have my own authentication system. I’m always a fan of having one less username and password to remember. The following sample page can be used to connect to your facebook application and do a couple of simple tasks like retrieving your name. This Facebook code comes right out of the JavaScript SDK reference.

The 5 steps to set up this code are embedded in comments of this HTML file:

   1: <!DOCTYPE html>
   2: <html lang="en">
   3: <head>
   4:     <title>Sample Facebook JavaScript SDK</title>
   5:  
   6:     <!--
   7:         How to get started:
   8:  
   9:             1. Register an app on http://www.facebook.com/developers/
  10:             2. Helpful table of facebook app settings can be found here: http://msdn.microsoft.com/en-us/windows/ee395718.aspx
  11:             3. Create a Web Forms or MVC project in Visual Studio
  12:             4. Inside Visual Studio, set the specific PORT NUMBER to match the Facebook app registration
  13:             5. Copy your app id from Facebook registration page to the JavaScript below
  14:     -->
  15:  
  16:     <style>
  17:         input {
  18:             width:130px;
  19:         }
  20:         table {
  21:             width:100%;
  22:         }
  23:         .left {
  24:             width:200px;
  25:             vertical-align:top;
  26:             text-align:left;
  27:         }
  28:         .right {
  29:             vertical-align:top;
  30:             text-align:left;
  31:         }
  32:     </style>
  33: </head>
  34: <body>
  35:  
  36:     <table>
  37:         <tr>
  38:             <td class="left">
  39:                 <ol>
  40:                     <li>
  41:                         <input id="getLoginStatusButton" type=button value="Get Login Status" />
  42:                     </li>
  43:                     <li>
  44:                         <input id="loginButton" type=button value="Login" />
  45:                     </li>
  46:                     <li>
  47:                         <input id="getName" type="button" value="Get Name" />
  48:                     </li>
  49:                     <li>
  50:                         <input id="logoutButton" type="button" value="Logout" />
  51:                     </li>
  52:                 </ol>
  53:             </td>
  54:             <td class="right">
  55:                 <h2>Messages</h2>
  56:                 <ol id="messages"></ol>
  57:             </td>
  58:         </tr>
  59:     </table>
  60:     
  61:     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  62:     <script type="text/javascript">
  63:  
  64:         window.fbAsyncInit = function () {
  65:             FB.init({
  66:                 appId: '[YOUR APP ID GOES HERE]',
  67:                 status: true, 
  68:                 cookie: true,
  69:                 xfbml: true
  70:             });
  71:         };
  72:  
  73:         $(function () {
  74:  
  75:             $('#getLoginStatusButton').click(function () {
  76:                 console.log('inside button click event');
  77:                 FB.getLoginStatus(function (response) {
  78:                     if (response.session) {
  79:                         // logged in and connected user, someone you know
  80:                         $('#messages').append('<li>logged in; access token is ' + response.session.access_token + '</li>');
  81:                     } else {
  82:                         // no user session available, someone you dont know
  83:                         $('#messages').append('<li>not logged in</li>');
  84:                     }
  85:                 });
  86:             });
  87:  
  88:             $('#loginButton').click(function () {
  89:  
  90:                 FB.login(function (response) {
  91:                     if (response.session) {
  92:                         // user successfully logged in
  93:                         $('#messages').append('<li>successful log in; access token is ' + response.session.access_token + '</li>');
  94:                     } else {
  95:                         // user cancelled login
  96:                         $('#messages').append('<li>cancelled logged in</li>');
  97:                     }
  98:                 });
  99:  
 100:             });
 101:  
 102:             $('#getName').click(function () {
 103:  
 104:                 FB.api('/me', function (response) {
 105:                     $('#messages').append('<li>' + response.name + '</li>');
 106:                 });
 107:  
 108:             });
 109:  
 110:             $('#logoutButton').click(function () {
 111:  
 112:                 FB.logout(function (response) {
 113:                     $('#messages').append('<li>logged out</li>');
 114:                 });
 115:  
 116:             });
 117:  
 118:         });
 119:  
 120:     </script>
 121:     
 122:     <div id="fb-root">
 123:         <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
 124:     </div>
 125:  
 126: </body>
 127: </html>
Facebook | JavaScript | software
#    Comments [0] |