Facebook Plugin

Integrate with Facebook to help you build engaging social apps and get more installs.

Share

Allow people using your app to publish content to Facebook. When people of Facebook engage with these posts they are directed to your app or your app's App Store page (if they don't have your app installed).

Login

Let your users easily sign in to your app with their Facebook account. If they have already signed in, they don't have to reenter their username and password again.

Graph API

The Graph API is the primary way to get data in and out of Facebook's social graph. You can use it to query data, post new stories, upload photos and a lot of other use cases.

Custom Stories

Allow your users using your app to publish from your app to Facebook. When people of Facebook engage with these posts they are directed to your app or your app's App Store page (if they don't have your app installed).

Overview

You can use the Facebook item to retrieve information about a logged in user and to send read and publish graph requests.

Use Cases

Facebook can help your apps & games become more popular and engaging for your users.

Apps

Retrieve information about your users and their friends

Integrating the Facebook plugin allows your app to get additional information about your users. You can greet them by their first name or save time during a registration process by prefilling the gender or birth date from Facebook.

Reach other people by posting to a User's or App Wall

You can post a message directly to a user's feed, to one of the user's friend's or to your page's feed by using Facebook::postGraphRequest(). See the Direct Wall Post Example for implementation details.

Add a Log In to your App

The Facebook plugin integration allows people to log into your app quickly without having to remember another username and password and therefore improves your conversion. A Facebook login also allows to login to the same account across different devices and platforms.

Like a Facebook Page or App

There is no default interaction of liking Facebook app pages, as initially opening a session with openSession() already registers a user with your app. Instead of liking an app, you can like specific objects in your app or game, e.g. different levels, achievements, etc. These are called stories that follow the "actor verb noun" syntax, for example "Karen likes MyGame Level 1".

Games

Additionally to the use cases for your apps you can also make advantage of the Facebook plugin when integrating in your games. In the following sections, the most popular use-cases are explained:

Brag About Game Progress

It's common practice in mobile games that whenever a player reaches a goal or makes some progress in a game, he can post about it in his news feed (also referred to as his "wall"). The user will then enter a personal message or opinion about something noteworthy that happened in the game, which makes it more interesting for others in comparison to pre-filled text. The message can either be posted on the logged in user's wall, to a friend's wall or to the wall of the Facebook page of your game.

Scores

In addition to other scoring services like V-Play Game Network Facebook can also be used for storing scores online. This has the advantage that friends of your users can compare their results and thus get motivated to beat the other's highscores. Have a look at the Score API to see how to integrate scores by using Facebook::postGraphRequest() and getGraphRequest() with the "me/scores" request type.

Invite Friends

Allowing to invite the player's friends to your game can be a major driver of game downloads. You can filter the friends who did not download your game yet to avoid multiple requests.

Match-Making with other Facebook Users

If you are using any kind of multiplayer functionality like in turn-based games, you can select other players that are already using your game as gaming partners. These do not necessarily need to be friends with the logged in player.

Further Game-Related Functionality Available with Facebook

For more information on gaming-related functionality that Facebook offers have a look at http://developers.facebook.com/docs/guides/games/.

Facebook SSO

The Facebook plugin supports single sign-on (SSO) which makes it convenient for your users to login to Facebook.

The SSO feature allows your users, to login to your app with their existing Facebook account and therefore simplifies the login process.

There are 3 different scenarios for SSO:

  • The user uses a device with native Facebook integration (e.g. devices with iOS 6 and above)
  • The user has installed the native Facebook app
  • The user has neither a device with native Facebook integration nor installed the native Facebook app

In scenario 1 and 2 the user is asked to give your app the requested permission defined in Facebook::readPermissions and Facebook::publishPermissions without the need of entering his Facebook credentials beforehand. These are the most convenient methods for your users.

In all other cases the plugin open a web view as a fallback which asks your users to enter their login credentials and afterwards to grant the app permissions. Once the users are logged in, the credentials are stored as cookies in the web view and it's not required to enter the credentials again for every continuing openSession() calls.

So in both cases, either native Facebook integration or not, the user only needs to log in once for the lifetime of your application.

Logout from Facebook Account

Since the login credentials are stored as explained before, changing to another Facebook user which is often needed during development requires some additional steps. If the native Facebook app is installed, you need to logout in the native app to be able to login with another user after the next call of openSession(). If you are testing on iOS and do not have the native Facebook app installed, open Safari and also logout there, because the login credentials are stored as cookies. Also make sure, to log out your Facebook account in the iOS Settings in the Facebook section, where the application-wide login credentials are stored.

Example Usage

To try the Facebook plugin or see an integration example have a look at the V-Play Plugin Demo app.

The Facebook item can be used like any other QML item. Here is a simple example of how to add a simple Facebook integration to your project:

 import VPlayPlugins 1.0

 Facebook {
   appId: "xxxxxxxxxxxxxxxx"
   readPermissions: [ "public_profile", "email", "user_friends" ]
   publishPermissions: ["publish_actions"]

   Component.onCompleted: {
     openSession()
   }
 }

Note: The user_friends permission only allows to get a list of friends that also use your app and connected to Facebook.

Session Handling Example

Before any Facebook interaction you have to open a valid session first. The following example opens a session at app startup and prints information about session state changes to the console:

 Facebook {
   id: facebook
   appId: "YOUR_APP_ID"

   onSessionStateChanged: {
     if (sessionState === Facebook.SessionOpened) {
       console.debug("Session opened.");

       // Session opened, you can now perform any Facebook actions with the plugin!
     }
     else if (sessionState === Facebook.SessionOpening) {
       console.debug("Session opening...");
     }
     else if (sessionState === Facebook.SessionClosed) {
       console.debug("Session closed.");
     }
     else if (sessionState === Facebook.SessionFailed) {
       console.debug("Session failed.");
     }
     else if (sessionState === Facebook.SessionPermissionDenied) {
       console.debug("User denied requested permissions.");
     }
   }

   Component.onCompleted: {
     facebook.openSession();
   }

 }

Direct Wall Post Example

You can send a pre-defined message with a defined message text with the Facebook::postGraphRequest() method. The following example sends a message to the own wall, without any further parameters like a link, description or caption. These parameters are also available for this request though, so you can set them if required.

 facebook.postGraphRequest("me/feed",
                           {
                             "message" : "Hello me!"
                           })

You can also provide a to parameter to post on a friend's wall or on a Facebook page. Please keep in mind that posting to a Facebook page is only possible when the logged in user liked the page before.

Posting directly to walls usually has a weaker growth effect than adding a personal message, because the friends' engagement and interest in personal messages is higher. However, you could still open a native input dialog and send the message with the above call afterwards. This has the advantage that the user needs not leave the app and no Facebook dialog is shown. Also, the native Facebook app is not launched and the user stays in your game.

Note: Posting on the user wall requires the publish_actions permissions. At the first post request, the user must allow the publish permission for your app. Facebook apps that use this permission also require a review by Facebook before the app can be used by people other than you as the app developer.

Available QML Items

Facebook

Item provides access to the native Facebook SDK on iOS and Android

FacebookProfile

Item encapsulates information about a specific Facebook profile

Integration

To use the Facebook plugin you need to add the platform-specific native libraries to your project, described here:

iOS Integration Steps

  1. Download our PluginDemo from https://github.com/v-play/PluginDemo/archive/master.zip and unzip it.
  2. Copy FBSDKCoreKit.framework, FBSDKLoginKit.framework and Bolts.framework from the ios subfolder to a sub-folder called ios within your project directory.
  3. Add the following lines of code to your .pro file:
     ios {
       VPLAY_PLUGINS += facebook
     }
  4. Open the Project-Info.plist file within the ios subfolder of your project and add the following lines of code:
     <key>CFBundleURLTypes</key>
     <array>
       <dict>
         <key>CFBundleURLSchemes</key>
         <array>
           <string>fb{your-app-id}</string>
         </array>
       </dict>
     </array>
     <key>LSApplicationQueriesSchemes</key>
     <array>
       <string>fbapi</string>
       <string>fb-messenger-api</string>
       <string>fbauth2</string>
       <string>fbshareextension</string>
     </array>

    right before the closing tags:

     </dict>
     </plist>

    Make sure to replace your-app-idwith your Facebook app's app ID.

Android Integration Steps

  1. Open your build.gradle file and add the following lines to the dependencies block:
     dependencies {
       compile 'net.vplay.plugins:plugin-facebook:2.+'
     }

    Note: If you did not create your project from any of our latest wizards, make sure that your project uses the Gradle Build System like described here.

Adding a Facebook Application

In order to use the Facebook plugin within your app you need to create a Facebook app at https://developers.facebook.com first.

  • Create a new application and go to the Settings page.
  • Click the Add Platform button and add two new platforms, iOS and Android.
  • For iOS add the bundle ID of your app, found in the Project-Info.plist file.
  • For Android add the following information:

    The Google Play Package Name of your app, found in the AndroidManifest.xml file.

    The Class Name as net.vplay.helper.VPlayActivity (also set in your project's AndroidManifest.xml file).

    The Key Hashes for each of your used signing certificates. See Facebook::printAndroidKeyHash() on how to get you key hashes (the hash in the screenshot above is only a sample value!).

Used Facebook SDK Versions

iOS 4.17.0
Android 4.17.0

Note: Other SDK versions higher than the stated ones might also be working but are not actively tested as of now.

See also Facebook::openSession(), Facebook::sessionState, Facebook::publishPermissions, and Facebook::postGraphRequest().

Videos

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support