Let’s face it, a lot of us spend a significant portion of our lives on Facebook — it’s one of those addictions that never seem to go away. To fuel this addiction and widen the reach of your Web application, developers need to make their apps social. This not only provides a good platform to the huge user base that Facebook has, but also allows you to get easy feedback about your brand, immediately.
Also, if you need to, you can provide personalised information and services to users, tailored specifically to their likes and interests — and who knows, you can build an app specifically for the advanced statistical analysis of your users.
For basic users though, most CMS platforms today already have a few good plugins that work well with Facebook; all you need to do is install and enable them. Moreover, the Facebook documentation is so detailed that you don’t even need to read this article if you are a basic user. But what if you are building your Web application right from scratch? What if you want it to be more tightly integrated than what those plugins can provide for?
Yes, you need to get your hands dirty… so let’s get started! When you begin thinking about integrating your brand with Facebook, you are probably considering the following methods:
- Getting a Like button, a Comments box, an activity feed, etc., on your website, so that users can interact with your page easily.
- Getting a “Log in with Facebook” button, in order to simplify the registration and login process.
- Getting an application on facebook.com that can access functionality such as Requests, Events and all-posts.
- Building a mobile application on a platform such as Android.
I’ll try to give you a preview of how to get started with each of the above features. Using the Like button and other such social plugins involves just copying already “cooked” code from the Facebook developer website, which provides GUI configuration options for each of these plugins — so we will mainly focus on Facebook application development, the Graph API, Open Graph protocol, FQL and other such features.
To start with, we need to register our application/website with Facebook, and get an application ID, along with a secret key. Head over to https://www.facebook.com/developers/ and click the “Set up New App” button to get started.
Social plugins
Social plugins are what Facebook provides for its easy integration with your website in the form of various features such as the Like button, Login button, Registration plugin, Recommendations, the Comments box, etc.
Now, let’s say that you want to implement the “Log in with Facebook” functionality in your Web application. As an example, let’s try to make an application that greets the users by their names, as soon as they log in. The client-side code for such an application would be as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=YOURAPPIDHERE&xfbml=1"></script>
<script>
FB.init({
appId: 'YOUR APPID HERE', cookie: true,
status: true, xfbml: true
});
FB.event.subscribe('auth.login', function (response) {
fblogin();
});
function fblogin(){
FB.api('/me', function(response) {
alert("You have successfully logged in, "+response.name+"!");
});
}
</script>
<fb:login-button> Login to LinuxForYou.com</fb:login-button>
</body>
</html>
This JavaScript code and XFBML tag will show a button, which when clicked, will prompt for Facebook credentials, and for the permissions to grant to this website. The JavaScript is programmed to subscribe to this event. As soon as the user logs in, it executes the fblogin function, and displays an alert box that greets the logged-in user by name.
Basically, in this function we have performed a Facebook JavaScript SDK API call (with the /me query), asking for the current user’s profile information, which is returned in the response object. From that, we extract the name and display it; other details also can be extracted, for registration purposes.
FB.init and FB.event.subscribe initialise the JavaScript SDK, and subscribe to the login event, respectively. Note that before trying out this code, you will have to get your own app ID and paste it wherever required.
For a more sophisticated registration, you can also use other plugins provided by Facebook, such as the registration plugin. These, and all other plugins, can be used in a manner similar to what’s been described above.
The Graph API
The most basic way of accessing information from Facebook is the Graph API. The Open Graph Protocol and the Facebook Graph API are the two heavyweights in Facebook application development. The Graph API presents a huge social graph of accessible information to the application, in the form of usable data, while the Open Graph Protocol brings Facebook to almost every part of the Web, and extends the usability of the “Like” button in hitherto unimaginable places.
To give you a trailer, try and visit https://graph.facebook.com/LinuxForYou. You should see text that looks something like the following:
{
"id": "58079349432",
"name": "Linux For You",
"picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/50254_58079349432_282_s.jpg",
"link": "http://www.facebook.com/LinuxForYou",
"likes": 131385,
"category": "News/media",
"website": "https://www.opensourceforu.com",
"username": "LinuxForYou",
"founded": "February, 2003",
"company_overview": "The first issue of the magazine had hit the stands in February 2003, since then it has been catering to newbies, powerusers, administrators, developers and those belonging to the IT industry. Its main goal is to enhance the return on investment (RoI) for organisations by deploying Linux (or open-source) solutions. The magazine is accompanied by a FREE DVD, which carries latest Linux distributions. The magazine aims at providing complete solution for deployment of Linux. ",
"mission": "To accelerate adoption and creation of Open Source solutions.",
"products": "LINUX For You Magazine\nLinuxforu.com Portal\nLFY DVDs (accompany magazine)",
"can_post": true,
"talking_about_count": 5792
}
That is the Graph URL of LFY’s Facebook page, and the information returned is in the form of JSON. This can be parsed in a manner similar to XML, but it is more compact, and represents information in the form of key-value pairs.
To get a hang of the Graph API, go here and browse the API which is in the form of a comfortable GUI Web application.
For the most part, in order to access advanced information, we need to get an access token with the help of OAuth 2.0 authorisation, which then gives an access token for a specified period of time. This token is then passed over an HTTPS connection as a parameter to the Graph API, to access information for which the user has granted access.
The ID field returned in the above example is used to access any object in the social graph, such as a page, person, event, group, application, photo, video, etc., and is unique for any such object. We can browse the social graph, with the help of connections between these objects. There are several connection types possible, such as, friends, likes, movies, music, photos, etc. An example of such a query would be: https://graph.facebook.com/me/friends?access_token=ACCESSTOKENHERE.
There are different methods to get the access token on the client side and on the server side; explaining each of these methods in detail here would be a waste of space and time, so we will just point you here.
You can also post on behalf of the user, if you have permission to do so, using the HTTP POST method. For example:
curl -F 'access_token=ACCESSTOKENHERE' \ -F 'message=I love Facebook!' \ https://graph.facebook.com/USERID/feed
The API is very detailed, and offers many other features besides those demonstrated here.
Open Graph Protocol
We have often heard of the terms “the semantic Web”, “Web 3.0”, etc., and wonder what exactly they mean.
Basically, adding semantics to Web pages makes them accessible for processing by machines, to recognise the meaning behind those pages on the Internet — making them more intelligent (no, not like what you saw in The Matrix!).
The Open Graph Protocol is somewhat related to this; it lets Facebook know about the contents of a page, and about its classification information, etc. The structured data published by this protocol makes your Web page similar to a Facebook page, and makes it easier for users to access the data related to that page. It makes that information searchable on Facebook by converting it into a graph object that can appear anywhere on Facebook. This is the particular piece of technology that has given the Like button so much popularity.
The Open Graph Protocol can be implemented by using the good old <meta> tags and adding the Like button to the respective page, in the following manner:
<meta property="og:title" content="Linux For You Magazine"/> <meta property="og:type" content="magazine"/> <meta property="og:url" content="http://www.linuxforyou.com"/> <meta property="og:image" content="https://www.opensourceforu.com/wp-content/themes/unspoken/images/logo-header.png"/> <meta property="og:site_name" content="Linux For You"/> <meta property="fb:admins" content="FACEBOOK_USERID_OF_ADMINS"/> <meta property="og:description" content="The magazine aims at providing complete solution for deployment of Linux."/>
These tags can be added to the header of any page, which is then automatically available to Facebook for the easy extraction of information.
FQL
FQL is another heavily used feature provided by Facebook. As you might have guessed, it provides an SQL-like query interface to data exposed by the Facebook Graph API. Not only does it make accessing data easier, but also allows us to perform batch queries to the publicly available access point at:
https://api.facebook.com/method/fql.query?access_token=ACCESSTOKENHERE&query=QUERY&format=json.
Here, the query parameter value can be something like what follows:
SELECT name FROM user WHERE uid = me()
We can see that this query is like SQL, which most of us know, and makes advanced queries possible very easily. This query can also be executed at places other than this endpoint, such as via the JavaScript SDK, etc.
Note that we need to have an access token before sending the FQL query to the server. We can also specify whether we want the response as XML or JSON, with the format parameter.
Canvas applications
When you want to set up an application on facebook.com and want it to appear within the Facebook domain, like the several games/applications encountered every day, you probably require canvas applications. All you need in order to make such applications is knowledge of your favourite Web programming language (PHP, Python, Java, etc), space to host that application somewhere, and some knowledge of the Facebook API.
Now, to set up such an application, you need to set up a page (at most 760 pixels wide) somewhere on your Web server, and then configure it in the application settings under the Facebook integration tab, by setting the Canvas Page and Canvas URL property (see the screenshot below).
Apart from these, Facebook also provides Custom Page Tabs that work in a manner similar to canvas applications. Full-fledged SDKs for Android, PHP, and JavaScript are available. They make Facebook development much easier, and have in-depth documentation and support. Also, the Ads API, Chat API and Credits API allow us to program with other advanced features that have not been listed here, as yet.
In conclusion, the features listed here are just an introduction. If you are serious about making your Web-app social, you should probably take a look at the incredible amount of documentation available at the developer website.
