If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

What are we going to build?

In this tutorial, you’ll learn how to connect to Facebook via the Facebook API plug-in, and:

  1. Invoke the Facebook API.
  2. Add a “Login with Facebook” button to your app.
  3. Load data from Facebook.
  4. Post a message to someone’s wall.

Before you begin

Tutorial level: advanced.

Creating a new project

1. In Appery.io, enter FacebookApp for an app name and click “Create”.

2. On the left-hand side, click Pages > startScreen – an editor with an empty startScreen will open:StartScreenEmpty

Registering a Facebook app

First, create an app in Facebook:

1. Go to http://developers.facebook.com/ and log in (or sign up).

You should have a verified Facebook account. Read here for more.

2. Click “My Apps” in the top menu, register as a developer, then “Add a New App”:
AddNewAppFacebook

3. Then select a platform:
SelectPlatform

3. Enter your Display Name and click “Create New Facebook App ID”:
CreateNewApp

4. Then choose Category from the drop-down list and click “Create App ID”:
AppsForPages

Once the app is created, to open its settings, go to My Apps>Appery.io app>Settings, the page should look like:Settings

5. Click “+ Add Platform.” Choose Website:
SelectPlatform1

6. Use the following Site URL as a template, but use your Appery.io App ID:

If you’re using libraries version below 3.0, the URL will look as following:

7. The Appery.io App ID can be taken from the Appery.io app URL:

8. It should look like the following:

9. Type appery.io into App Domains and click “Save Changes”.

The App Settings tab should look like the following:

10. Copy the App ID, which will be used to configure the Facebook API plugin.

Now that the Facebook app is created, you need to go to Appery.io and import the plug-in.

Importing the plugin

1. To import the plugin, click CREATE NEW > From Plug-in:
FromPlugin

2. Check the “Facebook API”:
FacebookAPI

3. Click “Import selected plug-ins”.

You’ll be asked whether you want to set the file containing API keys used by the service:
SettingAPIFile

Before you can publish with Facebook, you need to sign up for a developer account. You will then get keys; however, you can skip setting the file right now. Since the App ID is copied to your clipboard,  open Facebook_Settings and paste it as the value for the client_id parameter:AppID

4. Copy the Appery.io App ID from the URL string:

5. And paste it to the project_id:AppProjectID

The app

The app, with the imported plug-in, allows the user to log in with their Facebook username and password, and returns logged user information. Information is displayed on the Facebook_Me page.

Now you need to change the Start Page:

1. Open App settings under the Project folder.

2. Change the Start Page to Facebook_Login:
GeneralSettings

3. Click on the small arrow icon to the right of the “Test” button in the upper-right corner of the screen and launch the Show without frame option:
Public

4. After a few seconds, the following page will appear on the screen:
fb_login_page

5. Click “Login to Facebook.” You’ll be redirected to the Facebook authorization page. Enter your log in information. After successful authorization, you’ll be automatically returned to the Facebook_Me page, which contains the personal information of the logged user.

Important iOS information

For the app to work on an iPhone or iPad, you must set the project to Public:
SetPublic

MeService

After successful authorization, the app will open the Facebook_Me page. Once the page is loaded, the meService will be invoked.

To retrieve information, you need to specify the needed fields in the service request:

In the same way, you can create your own REST services to retrieve Facebook user info, or, for example, post a wall message based on the Facebook Graph API.

Posting a wall message service

Now, let’s slightly modify the app to make it possible to post wall messages. First of all, posting to a wall requires different access rights:

1. Go to the Facebook_Helper listed under the JavaScript folder:
FacebookHelper

2. Replace line 9 with the following code:

The modified Facebook_Helper.js should look like the following:CodeChanged

3. From the Projects view: CREATE NEW > Service > REST, enter name Facebook_PostService, and click “Create Service.” The service will be listed under the Services folder.

4. Change the REST service settings according to the following screenshot:
FacebookPostServiceSettings

5. Go to the Request tab and add two parameters – access_token and message:RequestParams

6. Go to the Facebook_Me page and add the Input and Button components below the existing UI. Name the Input as message and provide any text for the Text property. Name the Button as post_message_button and change its Text property to Post message:
MeFacebookUI

7. Switch to the DATA tab. Select Service > Facebook_PostService as datasource and click “Add.” Rename the added instance to postService:ServicesList

8. Click “Mapping” for the Before send instance, and create the following mapping. Remember to check the “Storage” box on the left:MappingPostServiceBS

9. Click “Save and return”.

10. Switch to the DESIGN tab, select the post_message_button and add the following event: post_message_button > Click > Invoke Service > postService.

11. Click “Save”.

Here’s how the added wall message looks:
Final

Testing the app

The final app will look like:
FacebookLogin