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.
