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>
Disclaimer The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.