Facebook Development for Websites – Graph API Introduction

The graph API is one of the new application programming interfaces launched by Facebook to replace the old RESTful API.

The graph API allows developers to tap into the ‘social graph’ and retrieve information from Facebook.  It can be used to retrieve public information and also, with the appropriate permissions, more personal information, information about your friends, employment – basically anything that you share to the public or explicitly authorise the app or website to access.

The graph API is not just limited to people and their profiles on Facebook.  It can also be used to access things such as events, pages and groups.  If it is on Facebook, then chances are you can access and retrieve the information using the graph API.

The ‘social graph’ on Facebook contains everything within the ‘Facebook world’ and how it connects and relates to each other.  You can get information on who is friends with who, who is attending which events, and who likes a particular celebrity.

Facebook treats all these different types of information as ‘objects’.  There are different types of objects but essentially, everything within the world of Facebook is an object and it is assigned its own unique ID which, as the name suggest, uniquely identifies an individual object.

Facebook - Graph API

Data that is retrieved from Facebook is in a JSON (JavaScript Object Notation) format.  This is a widely used and standardised format which has become commonplace for applications and websites sharing information over the Internet.  Many programming languages will have support for JSON data types and will contain functions which can change the data into a standard format for that programming language.

For example, if you are using ColdFusion, then the JSON data returned by Facebook to your website is essentially, to all intents and purposes, as far as ColdFusion is concerned, a long string with delimiters.  In ColdFusion, this makes the data hard to work with.  It would be easier if it was a structure, with appropriately named attributes.  That’s no problem, ColdFusion includes a very handy function called ‘DeserializeJSON’.  This function can convert the returned data into an array (structure) of appropriately named attributes ready for you to use and manipulate within your application or website.

An example of the data returned by Facebook from a request to the Graph API is shown below:


    “name”: “Facebook Platform”, 
    “website”: “http://developers.facebook.com”,
“username”: “platform”,
“founded”: “May 2007”,
“company_overview”: “Facebook Platform enables anyone to build…”,
“mission”: “To make the web more open and social.”,
“products”: “Facebook Application Programming Interface (API)…”,
“likes”: 449921,
“id”: 19292868552,
“category”: “Technology”
}

(Facebook, no date).

The example above shows the returned public data about the Facebook Platform page.  It describes the general attributes and information of the page.  This can be used in data on your own website or it can be used in part or whole in your own functions and calculations.

The graph API can be used to access many items including:

  • Users
  • Pages
  • Events
  • Groups
  • Applications
  • Status Messages
  • Photos
  • Photo Albums
  • Profile Pictures
  • Videos
  • Notes
  • Checkins

The power of the Graph API cannot be overstated – when integrated correctly into a quality third party application, its full power can be realised and your application or website can be instantly taken from being standalone, to fully integrated with the Facebook website (and its many millions of users).

Facebook Development for Websites – Like Buttons

This article assumes that you have followed and completed our Getting Started tutorial successfully.

So, whats next?  Well there’s no point loading the JavaScript SDK and not using it!  So in this article we are going to go through one of the more simpler Facebook Development tasks – adding a like button to our website.

‘Like’ buttons are extremely popular and having one on your site is instantly recognisable, useful and not too taxing coding wise.

To make our task easier there is also a nice little ‘Like’ button generator on the Facebook Developer site – great!

So, firstly, you need to open the Facebook Like generator page linked above.

Now, we need to customise our like button so that people can ‘Like’ our website.

The first piece of information required by the generator is easy.  It’s the domain that we want people to ‘Like’, which is also the domain that we are hosting our webpage on.  If you are using a local development server then this needs to be “http://localhost”.  For a website which is hosted online it needs to be your website domain (for example, http://www.yourdomain.com).

The rest of the information that we need to add to configure our ‘Like’ button is all down to personal preference.  The ‘Like’ button will now work for your website no matter what we add now (assuming that you have entered the correct domain above of course!).

We’ll now go through these extra options:

Send Button – Well for this one, do we want people who use our website to be able to suggest that one of their Facebook friends also ‘Like’ your website.  Tick if you would like there to be a send button next to your like button or untick if you don’t want the send button to appear.  For the purposes of being ‘social’ I would suggest that you do have the send button option ticked (which is the default setting).

Layout Style – This can either be ‘standard’, ‘button count’ or ‘box count’.  Standard is the way that you will have probably seen on many websites.  It’s longer than the other two styles but it doesn’t display a count of how many people currently ‘Like’ your website.  In the early stages of your website development (or if on Facebook your website isn’t very popular at the moment) it may be advantageous to choose ‘standard’ so as not to give your visitors the impression that your site is not popular!!  However, as I have said previously, this is down to personal preference!  The ‘button count’ and ‘box count’ styles are basically the same style apart from button count is landscape and box count is portrait (and in a box).  These styles consist of the ‘Like’ button but also a count of how many people currently ‘Like’ your website.

Width – this is quite simply, the width of your ‘Like’ button.  You can customise this so that it fits neatly into your website.  The value you choose here will depend on the design of your website.  The width value is measured in pixels (even though this not obviously indicated on the generator!).

Show Faces – this is either ticked or unticked.  If you have ticked this option it will show the faces (small profile pictures) of a random selection of people that have liked your website.  If this is unticked, the faces will not be shown.

Verb to display – this is whether you want you ‘Like’ button to say ‘Like’ or ‘Recommend’.  Seen as though this like button is going to be for our website in general I would recommend choosing ‘Like’.  If you subsequently make a like button for, for example, a product, then you may wish to choose ‘Recommend’.  This doesn’t change the functionality of the ‘Like’ button in any way.

Colour Scheme – this can be either ‘light’ or ‘dark’.  These options basically translate to ‘white background’ and ‘black background’ respectively.  Your choice will obviously depend on the colour scheme of your site, but in most cases the ‘light’ (white background) will be the most suitable.

Font – there are a number of different font styles that you can choose from so that the font style of your like button fits in with your websites design.

Having completed all the fields we are now ready to retrieve the code using the ‘Get Code’ button.  Click it now.

When the dialog pops up you need to select the app that you have created for your website (this will already be selected if you only have one app).  You need to change the drop down box after “This script uses the app ID of your app:” to the required value.

As we have already initialised our page to use the Facebook JavaScript SDK we can ignore the first dialog box of code.

The code for the like button is in the 2nd box (“2:”) and this needs to be added to the section of your HTML code where you would like (;)) your ‘Like’ button to appear.

The code for our example (using yourdomain.com) is shown below:

<div data-href=”http://www.domain.com” data-send=”true” data-layout=”box_count” data-width=”450″ data-show-faces=”true” data-font=”arial”></div>

And, hey presto, you now have a ‘Like’ button on your website :).

Facebook Development for Websites – Getting Started

Welcome to the first Facebook Development article!!  These articles are not intended to replace the Facebook Developer documentation that is available on the Facebook Developers site.  However, it is intended to correct the mistakes, update the examples and give extra advice and tips on common problems.

These articles are covering development on Facebook for websites – i.e. integrating Facebook with your website.  These articles do not directly relate to developing apps for use on Facebook, although a lot of the information will no doubt be relevant to this also.

Firstly, to start off, the ‘Getting Started’ documentation for Facebook for Websites is located here.

Overall this part of the documentation is fairly accurate, even if it does have a few omissions.  There is a lot of information on Facebook’s ‘Getting Started’ guide that most developers can safely ignore as it relates to ‘plugins’ that will mainly be used by non developers.  The usefulness of these is limited if you are a developer.

I will assume at this point that you already have set up a website that you wish to integrate Facebook into.  These tutorials can be followed if you are using both a server hosted on the Internet or a local development server.  Please be aware that if you are using both a local development server and a server hosted on the Internet (or multiple servers on the Internet) you will need to create an App in the Facebook developer area for each different server that you want your app to run on (even if it is the same app with the same settings on each server).

The reason why you have to do this is due to the fact that you are only allowed to associate one domain with each app.  The reasoning behind this, according to Facebook, is for security purposes and that so users don’t inadvertently share their information with multiple organisations at the same time, when they have not given their explicit authorisation to do so.

You will require a Facebook account to ‘sign up’ to become a Facebook Developer.  If you do not already have a Facebook account then you can create one using the normal process on the Facebook home page.

After you have signed up for your Facebook account (or if you already have a Facebook account) then you can proceed to the Facebook Developer site.  You can then use the normal ‘Log In’ link in the top right hand corner to login to the Facebook Developer area.  If this is the first time that you have logged into the Facebook Developer area then you will be asked to authorise the Facebook Developer app which you need to do to continue.

After you have logged into the developer area (and authorised the Developer app if necessary) you need to create a new app for you website.

After you have created the new app for your website and completed all the information for the app you are ready to begin adding the code to your website to make use of your new app.

In these tutorials we will be using the JavaScript SDK to connect our website to Facebook.  In light if this, obviously, JavaScript will have to be enabled on your server(s).

The HTML code and pages used in these examples will be simply (so as not to distract away from the Facebook Developer code) but it will function all all HTML / PHP and other web language pages no matter how complex.  All code examples will be in courier font so that they are easily distinguishable from the other content in the article.

To begin with we will assume that we have a HTML page set up similar to the following:

<HTML>
<HEAD>
<TITLE>My First Facebook Page</TITLE>
</HEAD>
<BODY>
<P>Hello World!</P>
</BODY>
</HTML> 

As you can see, at the moment, its just a basic HTML page with nothing special about it.  Now we need to load the JavaScript SDK for Facebook on the page before we can start using any of the functionality.  The code to initialise the JavaScript SDK is:

<div id="fb-root"></div> 

<script> 

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; 
if (d.getElementById(id)) {return;}
js = d.createElement(s);
js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’)); 

</script>

You don’t need to worry about the actual code above.  The only thing that you need to know is that this is what initialises the Facebook JavaScript SDK so that we can use it.  This code for initialising the JavaScript SDK will need to be added to each page on your website where you are going to use the JavaScript SDK.

Congratulations – you now have the Facebook JavaScript SDK loaded onto your page.  You are now able to start using the functions of the SDK and changing your website from a normal website into a social website!

Over the next few articles we will discuss adding simple social plugins.  The coding for these is not difficult and is easy to understand and is usually the best place to start before we move onto more advanced topics such as authentication and retrieving information from Facebook to use with our own custom features on our websites.