Build an app with Facebook API

/** Parse string in "key1=value1&key2=value2" into object:
 {'key1':'value1',
 'key2':'value2'}.
 **/
function parseUrlVars(url) {
   var vars = [];
   var params = url.slice(url.indexOf('?'));
   if(params.indexOf('#')>=0) {
      /*Remove all symbols after '#'*/
      params = params.slice(0, params.indexOf('#'));
    }
    params = params.slice(1).split('&');
    for (var i in params) {
       var item = params[i].split('=');
       vars.push(item[0]);
       vars[item[0]] = item[1];
    }
    return vars;
}

http://project.tiggzi.com/view/d8ca9181-48ab-42c4-ba08-15ff1530861f/result.html?state=YOUR_STATE_VALUE&code=CODE_GENERATED_BY_FACEBOOK#_=_

1. Create a new service, call it GetToken
2. REST service properties:
   1. URL: https://graph.facebook.com/oauth/access_token
   2. Keep everything else default
3. Open Request Parameters panel, create the following parameters and set them to default values (if specified)
   1. client_id - set to App ID/API Key from app settings page
   2. redirect_uri - set to the redirect URL from step 1 above
   3. client_secret - set to App Secret from app settings page
   4. code - leave this blank, we’ll set it when we map the service to the page

The result should look like this (your values will be different):

1. Open Result page, go to Data tab, from dropdown select Service then select GetToken, click Add button
2. Enter get_token for datasource name. The result will look like this:

3. Click Edit Mapping button.
4. On the service input side, everything is set except the code value. If you remember, we saved the code into local storage. On the right-hand side, in the input field enter code and then click Create new > Local storage variable.
   Note: the actual local storage already exists (we created it in step #3), we are simply adding it to the builder.
5. Now, select the “code” on the right-hand side and connect it to the code on the service side.

6. We get the following data from Facebook:

access_token=USER_ACESS_TOKEN&expires=NUMBER_OF_SECONDS_UNTIL_TOKEN_EXPIRES

We will save the access_token value so we can use it later.

7. Click Events button (on the bottom of the screen)
8. From Component dropdown select get_token
9. Add Event > Complete, then add Action > Run Custom JavaScript. Enter the following:

   var vars = jqXHR.responseText.split("&");
   var access_token = vars[0].split("=")[1];
   localStorage.setItem('access_token', access_token);

   The above code will get the access_token value and save it in local storage.

10. The last step is to invoke the service when we are redirected to this page or on page load. Go to Design view of Result page, click Events button (on the bottom of the screen)
11. From Component dropdown select Result page, add Event Load and Invoke Service action, select get_token service.

There should be two actions defined on page load:

Now that you got the access token, you can make requests to Facebook API.

Make requests to the Graph API

To test that we can make requests to Facebook’s Graph API, we can use the following REST service to get information about the logged in user:

https://graph.facebook.com/me?access_token=YOUR_USER_ACCESS_TOKEN

Let’s create the service first

1. Create a new service, name it GetData
2. REST service properties
   1. URL: https://graph.facebook.com/me
3. Request Parameters
   1. access_token
4. Response Parameters
   1. Response parameters are a little bit tricky as JSON structure depends on what data you requested in permissions (step #1), but there is workaround we can use but first we need to run the service, even without displaying the result in the app.
5. Add service instance to the Result page (open Result page, go to Data tab, from dropdown select Service then select GetData, click Add button)
6. Rename service instance to get_data
7. Lastly, add Click event then Invoke Service action to the Get Data button.
8. Click Edit Mapping button
9. Create access_token local storage variable on the page side
10. Map the local storage variable to access_token on the service side:

11. Launch the app in the browser, and open Chrome Developer Tools Network to see the actual request/response.
12. Click the Get Data button to invoke the service. If everything worked fine, you should see something like this:

13. Switch to Response tab, from there you can copy the entire response.
14. Go back to the service and open Response Parameters panel.
15. Click Automatically Create from Sample Response button and paste the JSON result.
16. Click Automatically Create from Sample Response button

17. Click Close

Now we got the correct response structure defined. You should be able to display the result on the page as with any other service after completing the mapping.

As an example, I created the following UI:

the mapping look like this: