THIS TUTORIAL IS VERY OLD, AND PROBABLY IT WILL NOT WORK ANYMORE, HERE IS THE NEW VERSION.
This tutorial will guide you to the process of integration of your web community with Facebook. This means that when a visitor comes to your site it can log in with normal credenditals if it has, but if it has not it can click on the “facebook connect” button and try to log in with its facebook account, automatically.
This is a good thing because, of course, your community is not so big and famous that every visitor wants to register and become a user to leave just a comment, but probably your visitors already have a Facebook account. So why loose their comments?
More: you can use facebook connected users to post automatically on users’s facebook walls, that is to say, you can increase your traffic.
The target is to add facebook connect functionality with small changes to your code, we also want to make very small changes to your database and to your normal login process.
INDEX, SEVEN STEPS:
1. Create an application on Facebook
2. Copy on your site the xd_receiver.htm file
3. Download the PHP apis for facebook and copy them to your site
4. Modify your users’ table
5. Create a PHP page for log in with facebook connect
6. Link the fbclogin.php file to your login
7. Further implementations in the next posts/pages of this blog
So let’s start:
STEP 1. Create an application on Facebook
This means that you have to be registered and logged-in on Facebook, than you have to go to the developer page on facebook and click on the “set up new application” button.
In the set up page you have different fields to enter, but only these ones are needed to make a facebook-connect application for our purpose:
a. “name of the application” and your developer contact in the Main Panel;
b. “Connect url” in the Facebook Connect Panel, you should enter the root of your community site, for the example: http://www.your-site-url.com
c. you can customize log (not necessary)
Save the changes.
This will create a couple of keys that you will use inside your PHP login page: API Key and secret. Copy them or leave this window open to copy them later.
STEP 2. Copy on your site the xd_receiver.htm file
Here is the xd receiver file: (you can find it here)
STEP 3. Download the PHP apis for facebook and copy them to your site You can download the PHP API here on Github server. You can find the previous link in the get started page of Facebook developers page. STEP 4. Modify your users’ table This is important: we want to let connect the guys of facebook, but we also want to make new users, so we create new users on our community for every new guy coming from facebook. We suppose that you already have a users’ table on your db:
TABLE users (something like this): id ID INT AUTOINCREMENT PRIMARY username VARCHAR password VARCHAR email VARCHAR status ENUM ('active','pending','deactivated') activationdate DATETIME
If you have the primary key on the email field, than you will have to remove it and use an autoincrement key because you will not receive the email from facebook, the users coming from facebook do not have the email field filled at the beginning. So they are “different”. Add those fields to your users table:
fb_userid VARCHAR fl_facebook ENUM ('new','normal','registered') DEFAULT = 'registered'
the fb_userid will store the facebook user id. the fl_facebook is a flag and the values can be: registered = is the default value that identify your users normally registered on your db new = for new users just created normal = for users that have been transformed into normal users (this could happen later, when you will ask the email to those users to make some action that only registered users can make on your site… for example buy a thing, subscribe to a newsletter, create a new item…), when they become ‘normal’ they are no longer ‘different’. STEP 5.create a PHP page for log in with facebook connectHere it is the code of the facebook login file (fbclogin.php), put it on your web site root (below some note) and read it because it’s full of comments:
This PHP file includes in the header some tag for facebook (the namespace declaration in the html tag), so it can handle FBML code (the facebook specific tags for html facebook elements).
STEP 6. Link the fbclogin.php file to your login
Near your login fields, add a link to the fbclogin.php file so users will notice suddenly that you give a facebook connect functionality.
STEP 7. further implementations in the next posts
a. copy the avatar from facebook to your server: it’s easy: note, this is not approved by Facebook policies!
b. handle redirect to the correct page: if you have the login in every page you can modify this code to let the user go back to the correct page after the login process.
c. handle duplicated accounts: sometimes a user that connect with facebook already has an account on your site, so you will have two users for the same person on your db. That could be a problem, we will explain why and how to solve the problem.
d. handle registration completed: registration is completed when a user give you every data you consider mandatory, such as the email. This script already handles the flag fl_facebook, but in a further post we will explain how to modify your scripts to handle this part of the process.
e. use facebook connect functions to post to users wall on facebook: this will increase traffic to your site.