Register and configure facebook app for website login Usage 2014

There are a number of platforms such as vbulletin and wordpress which allow users to sign up or login to a website with Facebook Connect, Thus allowing a quick and easy sign up with a visitors facebook details or connecting their facebook with their website account. We seem to have to give these basic instructions out on a regular basis so we thought we put it in basic form for everyone to read. Please note these are the basic instructions to get everything connected and working for your websites users, there are more advanced options which we may go into at a later date.

1. Register As a developer

register

To be able to create “apps” you need to be registered as a developer on facebook, make sure you are logged into the facebook account which you wish to use and then navigated to https://developers.facebook.com; you will then see “Apps” in the top navigation of which you will need to register for. You will be asked to confirm registration by text or other authorisation method.

2. Creating the App

Next step once registered is to navigate to the same “APP” menu , you will now see a link to “create new app”. Click the link and the box will appear to type your APP name, unique id and the category of which your website/app fits into, Generally the name of the app should be the name of your website so if you ever add more apps to your facebook account each one is easily identifiable.

createapp

3. The dashboard

You will now be presented with the App Dashboard, From here you should note the “APP ID” and “APP Secret” which will be required later to be entered into your website to connect your facebook APP and website.

appsecret

You will notice on the left hand side there is a “settings” link , click that and it will show you again your App ID and secret , below those form fields you will need to enter your email address. Next you will need to click on the “Add Platform” button, a window will then popup asking which platform. Depending on the type of app you are creating will depend on what option you choose here but if you are looking for the basic website login you need to select “website”.

platform

Now you will be presented with a field to enter your website address, if you have a dedicated mobile platform you can also enter this but its not needed in most cases.

websiteenter

4. APP details

Next again on the left hand menu you will find “App Details”, we would recommend that you fill as many of these sections in as possible , non are mandatory but its good practice to keep everything organised as possible.

appdetails

Activating the app for public use

Now the final setup in the APP development section, Turning on your app , this can be done by navigating to the left hand menu again and pressing “Status and review” , you will see a “make this app live” button next to the APP name, press yes and confirm the action when prompted.

activate

Connecting your app to your website

Now your app is activated and live you will need to connect your website to your app so they both communicate , to do this you need to take that “APP iD” and “APP secret” which you noted down earlier and this needs to be inserted into the required sections of your website ( this will be different on every platform whether it be vbulletin, wordpress or something else ) The example below is vbulletin, generally on these options pages there are a number of options which is purely down to user preference of how you wish your website to act and communicate with your APP/Facebook. Now you’ve inserted your APP keys and selected the options you wish to have press save and your users should now be able to communicate with facebook through your website for its desired effect.

Please note that you may need to refer to your websites usage and functionality for further steps concerning the plugin or app you are using, above is purely the steps to setup the app on facebooks side.

vbulletin-facebook-key

ALL DONE !