The KICKZ online store is our latest e-commerce project that has gained a deep integration with Facebook. This blog article presents the four ways to utilize Facebook for a better and smoother customer experience. First we show how customers can use their Facebook accounts for registration and login into the online store using the OAuth 2.0 protocol. Next we discuss accessing the customer data from Facebook’s Open Graph (if user’s permission is given) in order to prefill registration and order forms. And finally, we deal with product reviews and forwarding customer Facebook posts to the Facebook wall of the online store.
Facebook uses the authentication and authorization protocol OAuth 2.0. Due to the broad, world-wide user base of Facebook, OAuth became a valuable authentication resource for web applications. But Facebook does provide more for web applications – it gives access to the whole social graph of a user, the permission by the user provided. We show now step by step, how an integration can look like.
Facebook OAuth
The benefits of the integration of an authentication provider are manifold. First, the user can use his Facebook account to log-in at several web applications. He hasn’t to remember a bunch of credentials. He doesn’t need to fill-in registration forms again and again. Thus, an authentication service saves time and helps to keep the amount of accounts to manage low.
Login via Facebook: Users can login into the KICKZ web shop with their Facebook account. For new users, their Facebook profile data is used to prefill the registration form (see also screenshot below).
Second, any Web 2.0 site provides such share buttons to Facebook or Google+, that’s already a must. The integration of Facebook’s OAuth service for user registration in your own web application will lower the bar for new users, because it’s just one click away. The huge popularity of Facebook with nearly 1 billion users around the world makes Facebook a good partner for authentication purposes. And what’s important for users: the OAuth 2.0 protocol ensures that your web application won’t leak any passwords.
Facebook’s Open Graph API
Facebook provides a public API for its social graph (now Open Graph), so any web application, identified to Facebook by its Facebook application, is able to ask the user for permission to access a user’s personal data and his personal wall. Depending on the user’s choice, the web application is able to authenticate the user and do a login. If the user is not yet registered in your web application, it can read the personal data from Facebook and prefill the registration form. Additional actions include posting on the user’s wall and re-post some of his posts to the Facebook wall of the company of the web application.
Example of a prefilled registration form with data obtained from the user's Facebook profile.
In order to get access to the Facebook Open Graph API, a web application developer needs to register a so called “Facebook Application”. The Facebook App describes the connection to our application, in our case the online shop. It’s the integration point of our web application and Facebook.
Once the Facebook App is prepared via the App Dashboard, we need the values “App ID/API Key” and “App Secret”, which we need to login to Facebook ourselves to access the Facebook Open Graph API. In the following screenshot, the App ID/API Key and App Secret values are blurred.
Preparing an Facebook Application on the App Dashboard for your web application. You are provided with an App ID/API Key, App Secret.
The Facebook Applications are bound to a dedicated site URL and domain. This is a security mechanism, so only requests from the registered site/domain will be allowed. Find more about the Facebook Applications and the Open Graph API in the Open Graph Tutorial.
Hint: If you’re developing a web application it’s helpful to register a Facebook Application for “localhost”. This way, each developper can share this single Facebook Application. For the production environment, just use another Facebook Application registered to the real web site and domain.
Now with the Facebook Application in place, we’re able to implement the features.
Feature 1: User-Registration with Facebook
Faceboook provides a JavaScript SDK which enables you to connect to your Facebook Application and then to access the Facebook Open Graph API to interact with the users’ Facebook accounts. The JavaScript SDK can be rendered in three ways: XFBML, XFBML in HTML5-compliant markup, and via Iframe. We choose the first two, XFBML and HTML5, because they support better tracking capabilities. For more details, please refer to the Social Plugins documentation.
Client-side authentification flow via the Facebook Javascript SDK (steps 1 and 2 in diagram).
1. Connect with Facebook Application (Javascript)
It is possible to initialize the JavaScript SDK asynchronously, and we prefer this implementation as it provides us with the fastest response if we use the following code right after the opening <body> tag:
2. Login a User (Javascript)
The authentication component of our web application needs to support three use-cases:
Registered user and already logged in to Facebook
Registered user, but not logged in to Facebook
New User: The user has a Facebook account, but is not registered in our web application
The listing below shows the necessary code on the client-side. It just uses the Facebook API to either show the OAuth login dialog, or ask for permission to access the users Facebook data in case he’s not a registered user. Facebook then maintains the granted permissions in our Facebook application, so we don’t need to check, whether this user is already registered or not.
First we define the link:
And then we define the JavaScript function fb_login_register:
For further details see the FB.getLoginStatus and FB.login documentation.
And this is how the login procedure looks like to the user:
Login: Using the client-side authentication flow will open a Facebook Login popup.
Request for Permissions.
After the successful login, we just send the User access token for this user to our server, which then gets the user’s data and provides a session for him.
Hint: Asking for the permission “offline_access” comes very handy on the server-side. This allows to access the users data, without the user being currently logged in. However, the offline_access has been removed! If you are building a new application you shouldn’t use this permission. Instead check the Deprecation of Offline Access Permission.
With our approach, the complete authentication is made on the client side (i.e. browser) as shown above. The client sends Facebook’s user access token, so on the server-side we can access the Open Graph API to get the personal information. This will be done in step 3 before.
Alternative: Server-Side Authentication
Analogous to the steps 1 and 2 above that use the JavaScript API from within the browser, you can also use the OAuth authentication on the server-side using the so-called server-side OAuth flow, an HTTP-based approach. Here again, you would first connect to our Facebook Application, and then access with the Facebook Open Graph API to read the users data is possible (step 3 below).
Doing the authentication with the server-side flow leads to some HTTP redirects, so the user has to leave the origin website (our KICKZ shop) during the login, as shown in the screenshot below. The benefit of the server-side authentication is better security, because the access token has not to be transferred over the network from the user’s browser to the web application on the server.
Login: Using the server-side authentication flow causes a HTTP redirect to the Facebook login page.
Here’s how you connect to our Facebook Application:
Step 1: Sending a Request for code and ask for permissions.
In this first step we generate an URL as follows:
Here, you use your Facebook App’s ID as the YOUR_APP_ID parameter. For a full list of parameters, see the OAuth Dialog documentation.
Hint: If you define YOUR_REDIRECT_URI as “http://localhost/” you can test it directly in your browser. First you will be prompted to authorize the Facebook App to your Facebook account, then you will be redirected to your localhost with the code URL parameter as:
In this step you also ask for permissions of your application. The permissions are defined by the scope parameters, e.g.:
Server-side authentification flow using HTTP requests (steps 1 and 2 in diagram).
Step 2: Request for User Access Token
Now that you’ve got the code, you can ask for the access token as follows:
The response for this request contains the access token in the message body. Example:
We just use the GetMethod class of the Apache HttpComponents library for sending the HTTP requests and obtaining the responses.
3. Load the users data and create a session (Server-Side)
Once we have our user access token, either the Javascript way or via the server-side flow, we can now use any Java library to load the personal information of a user from Facebook.
There are several Java libraries for accessing the Facebook API. In this example we just use the restfb library, because it offers a very intuitive way for working with the Facebook Open Graph.
This is the code to retrieve a user from Facebook, using the access token for the user delivered by the client-side:
Now that we’ve successfully got the Facebook user, we can copy his basic data into our user base, create a new session for him and log him in. In our web application we just inform the user, that he’s now logged in, which looks likes this:
The web application greets and informs the user about the successful login via Facebook Connect.
Conclusion
With these fairly easy steps the “Login via Facebook” feature gets implemented. The web application can provide a one-click registration process for new users. In respect to our native registration-process, in which we ask for all relevant information, we now support a so called “partial” registration. All information, like the postal address information, which is not available via Facebook will be retrieved from the user during the first check-out.
Feature 2: Generate posts on the a user’s Facebook wall
Everybody knows the “like buttons” on web-pages, but with the Facebook API there are much more possibilities to interact with the users. In our web shop each user is able to post reviews on products. These reviews are shared with other customers in our web-shop directly.
With the Facebook integration, we can share the reviews of a user and post them directly on his Facebook wall. This leads to a win-win situation, because the user sees his reviews liked by other users. And the web shop gets more incoming links and more attention which helps to boost marketing and SEO.
Let’s look at how to post a message to a user’s Facebook wall. Since we already have the permissions and know how to obtain an access token, we can just use the restfb library like this:
And since we have the id of the post, we can also put a comment to that message as follows:
In our web application we use this feature to automatically post reviews on products of the user on his personal Facebook wall. The comments are reviewed by a shop personnel, thus not all reviews get distributed automatically. So the code snippets above are integrated in the customers review approval workflow.
Feature 3: Listen on a user’s Facebook wall and copy posts to the shop wall
Facebook provides also a listener interface. So a Facebook application can register listeners for posts of a user. For each new post the listener gets invoked and is then able to decide what to do.
The callback functionality breaks the basic Facebook privacy. With this mechanism each post can break out the walled Facebook garden, in which the user originally wanted to share his post. So this feature also needs to get handled with great respect and empathy to the users privacy feeling. Thus, in order to get these posts a special permission from the user is required.
As KICKZ is a strong shop-brand and the customers have a close relationship to the brand, they usually accept this post forwarding and feel proud to be present on the Facebook wall of their favorite shop. This may not be the case for every company or brand, and customers may get offended when they see their “private messages” on the companies Facebook wall.
The following steps are necessary to allow us to listen and read a user’s posts:
Ask the user for the permissions “read_stream” and “publish_stream”.
Register a Facebook listener (callback server).
Filter user activities and publish them to the company’s Facebook wall or to web shop site.
Main steps of this listening and filtering process (read left-to-right).
We implemented a simple “fb_callback_servlet” which accepts the incoming calls from Facebook. If the user’s post matches certain criteria, then his post is directly posted to the Facebook wall of the shop and its web site.
Here some background information about the steps:
Registration of the callback server: We define a “callback_url” on which we listen in the “fb_callback_servlet”. During the registration process we pass the access token of our Facebook Application and the parameters describing what and on which object of the graph API we want to listen on.
Users activity listener: Our “fb_callback_servlet” provide a doGet() method that verifies the subscription for the user-stream to Facebook. This is also required for any modification or deletion of the subscription. The doPost() method of the servlet is used as a “callback” and receives the data of the user stream.
An official description of this function is available on “Realtime Updates” in the Facebook developer documentation. And a simple implementation example is available on facebook / real-time (Github).
Feature 4: Tracking Facebook communication via Google Analytics
Tracking Facebook communication with the Google Analytics tool provides useful information for the management of e-commerce activities and shows traffic related to Facebook.
The integration of Google Analytics is also straight forward and there are many good examples like Google Analytics Social Tracking Demo and tutorials available, e.g. “Social Plugin Analytics in Google Analytics”.
In this web application we use the tracker in the traditional way, but we just override the global social track abilities, as we are currently only interested in Facebook events on our pages. So we add tracking logic for Facebook directly to the Google Analytics pageTracker object:
The pageTracker.trackFacebook method defined above is called after FB.init() in the web-pages of our web application.
Conclusion
We showed that the integration of Facebook into a web application is quite straightforward. We demonstrated a social login/registration and in the context of a shopping use-case. These features allow a user to quickly login and provide the postal information later on-demand during the check-out.
The integration of customer reviews and forwarded user posts with the shop’s Facebook wall helps to gain visibility of the web site, since a lot of fresh incoming links are generated. In order to respect the users’ privacy, there’s no automatic forwarding applied, the reviews are moderated by the shop personnel. Finally, the integration of Google Analytics helps to monitor the efficiency of our efforts of the Facebook related traffic.
(c) 2016 mgm technology partners. This posting "How KICKZ uses Facebook for a better Customer Experience" is part of the mgm technology blog. The author of the posting is
Jiri Honc.
We are hiring! mgm technology partners is looking for good software engineers for all our offices. Check out www.mgm-tp.com/karriere.